A wrapped jquery ajax handling, with custom request keys, response refactoring, pre handling, post handling.

requirements

• jquery [optional]
• json-refactor

quick start

1. load resources

var seeAjax = require('see-ajax');
seeAjax(...);

or load scripts directly

<script src="path/to/jquery"></script>
<script src="path/to/json-refactor"></script>
<script src="path/to/see-ajax"></script>
<script>
seeAjax(...);
</script>

2. config current application

seeAjax.config(name, {
    // options: method, stringify, settings, url, requestKeys, responseRefactor, preHandle, postHandle, implement, implementDelay
});

3. use

seeAjax(name, reqData, successCallback, errorCallback);

config options

example:

{
    method: [...],
    stringify: [...],
    settings: [...],
    url: [...],
    requestKeys: [...],
    responseRefactor: [...],
    preHandle: [...],
    postHandle: [...],
    implement: [...],
    implementDelay: [...]
}

method

tell which http method to request, default is GET.

method: [
    'delete', // env: 0, use DELETE
    'put', // env: 1, use PUT
    'post'// env: 2, use POST
    // other env, use GET
]

stringify

whether stringify request data, default is false, and request will use application/x-www-form-urlencoded(POST, PUT, DELETE). if true, request will use a string in the body.

• note: if GET method, request data will always not to stringify.

stringify: [
    void 0, // env: 0, no
    true // env: 1, yes
    // other env, no
]

settings

extra ajax settings, refer to https://api.jquery.com/jQuery.ajax/

settings: [
    {...}, // env: 0
    {...} // env: 1
]

url

url to request data

url: [
    'url1', //env: 0
    'url2', //env: 1
    'url3' //env: 2
]

requestKeys

request keys mapping

requestKeys: [
    {displayKey: 'realKey'}, // env: 0
    {displayKey: 'realKey'}, // env: 1
    {displayKey: 'realKey'}, // env: 2
]

responseRefactor

refactor response data, after ajax responding

responseRefactor: [
    {... refactor map ...}, // env: 0
    {... refactor map ...}, // env: 1
    {... refactor map ...}, // env: 2
]

• refactor map: see json-refactor

preHandle

more handling after requestKeys, before ajax sending

preHandle: [
    (reqData) => {... do something ...}, // env: 0
    (reqData) => {... do something ...}, // env: 1
    (reqData) => {... do something ...}, // env: 2
]

postHandle

more handling after responseRefactor

postHandle: [
    (res, reqData, name) => {... do something ...}, // env: 0
    (res, reqData, name) => {... do something ...}, // env: 1
    (res, reqData, name) => {... do something ...}, // env: 2
]

implement

custom implement instead of ajax.

sometimes, you have not to use ajax, but other ways, for some reasons, this is what you want.

implement: [
    reqData => {... return a response ...}, // env: 0
    reqData => {... return a response ...}, // env: 1
    reqData => {... return a response ...}, // env: 2
]

• note: every function should return a value, like ajax response

implementDelay

milliseconds delay for implement, default is 0

implementDelay: [
    1000, // 1 second delay
    100 // 0.1 second delay
]

api

config

config current application

// one
seeAjax.config(name, options);

// multi
seeAjax.config({
    name1: options1,
    name2: options2,
    ...
});

setEnv

set current environment

seeAjax.setEnv(0/1/2/3);

getEnv

get current environment

var env = seeAjax.getEnv(); // 0/1/2/3

seeAjax

make a request

seeAjax(name, reqData, successCallback, errorCallback)

• name: defined request name
  • note: common is a special request name, for this will apply to all request.
• reqData: request data, refer to https://api.jquery.com/jQuery.ajax/
• successCallback: success callback, refer to https://api.jquery.com/jQuery.ajax/
• errorCallback: error callback, refer to https://api.jquery.com/jQuery.ajax/

set

set custom config;

set({
    request: $.ajax,
    debug: !0
});

• request: config your own request method, default is jQuery.ajax

settings => {...}

settings: request settings

• debug: whether in debug mode, default is true

handlers sequences while processing

1. method: check which http method to request, default is GET.
2. stringify: check whether to stringify request data.
3. settings: check extra ajax settings.
4. url: get request url
5. requestKeys: get real request data
6. preHandle: more handling before send a request
   1. common: common handling, if have
   2. name: named handling
7. implement: if have, return a custom response data, and will not send an ajax
8. responseRefactor: refactoring response data
   1. common: common handling, if have
   2. name: named handling
9. postHandle: more handling after refactoring response data
   1. common: common handling, if have
   2. name: named handling

without jquery

by default, see-ajax is rely on jquery.

however, you can use your ajax engine to replace jquery.ajax. like reqwest

if you do, you should make it like this:

const seeAjax = require('see-ajax/dist/see-ajax.custom');
const reqwest = require('reqwest');

seeAjax.set({
    request: reqwest
});

// or

seeAjax.set({
    request: settings => {
        // do some with settings

        reqwest(settings);
    }
});

// ..., others is the same

demo code