JQuery Ajax Request status manager Packaging

However, no matter how close it is, the client and the server will surely wait for the loading of data. Therefore, most websites use a Gif dynamic icon or 'loading... 'to notify users that data is still being loaded. But sometimes this problem is very complicated and troublesome. You can either display this 'loading' before the ajax request, and then hide it after the ajax is successful, or write it in jquery's ajax global event jQuery. ajaxStart () and jQuery. ajaxStop () to control the ajax status of the entire page. The former method is too trivial to use. Every request must write this 'loading' once, and it must be hidden no matter whether the request succeeds or fails. The latter is global, that is, the Request status of the entire page. Sometimes it cannot meet the requirements of displaying the loading status locally.

To solve these problems, I developed the jQuery plug-in named Ajax Request status manager. Using this plug-in makes loading no longer so troublesome. You can use this plug-in to add and write all requests before triggering ajax requests. All you need to do is to execute the. request () method in user interaction events. You can set all requests on a page to display loading independently or globally (only one loading is displayed ). The following describes how to use the plug-in:

Customize the css style of loading:
. State-loading {background: # fff url (images/icon-ajax-loader.gif )...}

Reference the latest jquery file:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>

Note: This plug-in is only available in jquery1.4.4 and later versions.

Reference the Ajax Request status manager plug-in file:
<Script src = "js/jquery-ajaxloader.js"> </script>

Run the. install () method in the ready event of jquery:
$. Loader. install (className, isGlobal );

Parameter description:
ClassName: string, which indicates the name of your custom loading class, such as the state-loading defined in css above.

IsGlobal: boolean, which defines whether loading is displayed globally or independently. The default value is true. This parameter can be omitted.

Add the required ajax Request Parameters and the callback method after successful addition:
$. Loader (key). add (modules, settings, callback );

Parameter description:
Key: string. This key is used to create or obtain the loader of the specified module. Of course, you can execute the add () method multiple times to add different modules for the same key. However, settings and callback are shared for this key, therefore, the settings and callback added later will overwrite the previous ones.

Modules: jquery object. The same request on a page can process data from multiple modules. Therefore, if the previous install () method is set to false, all modules added to this loader will display the loading status.

Settings: map, jquery's ajax settings parameter, but do not set ajax events. This will overwrite the callback method in the plug-in. The default request type is GET.

Callback: function, the callback function after success. It has a parameter data, which is an object returned in json type by default.

The add () method returns an array of strings prefixed by 'module'. For example, if you add three elements, the result is ['lele1', 'lele2', 'lele3']. You can use the returned array to delete the loading of one of the specified modules. You can also delete all the modules without specifying them. Of course, if you need to do this.

Remove () method to delete the specified module:
$. Loader (key). remove (moduleId );

Parameter description:
ModuleId: string or array. If it is set to string, a module is deleted. If it is specified as an array, modules are deleted in batches. If no parameter is specified, all modules are deleted.

Example
Add two modules to the Loader named userinfo:Copy codeThe Code is as follows: var id1 = $. loader ('userinfo'). add (
$ ('# Userinfo, # top-userinfo '),
{Url: 'server/userinfo. php '},
Function (data ){
UpdateContent ($ ('# userinfo, # topsection, # footer-userinfo'), data );
}
);

Add another module to the userinfo Loader:

Var id2 = $. loader ('userinfo'). add ($ ('# footer-userinfo '));
Var idList = id1.concat (id2 );
// Result: ['lele1', 'lele2', 'lele3']
Delete the loading of the 2nd modules, that is, '# top-userinfo ':
Var ret = $. loader ('userinfo'). remove (idList [1]);
// Result: true, modules: ['lele1', 'lele3']
Execute the. request () method in an interactive event:
$. Loader (key). request ();
]
Of course, you can also discard the previously added ajax settings and callback and write $. ajax or $. get in the interaction event. Call $. loader (key). show () before the request, and call $. loader (key). hide () in the callback function (). In this way, you can flexibly control the loading status.

ExampleCopy codeThe Code is as follows: $ ('# getuserinfo'). bind ('click', function (){
$. Loader ('userinfo'). request ();
});

You can also re-write the request:Copy codeThe Code is as follows: $ ('# getuserinfo'). bind ('click', function (){
$. Loader ('userinfo'). show ();
$. Get ('server/userinfo. php', function (data ){
$. Loader ('userinfo'). hide ();
UpdateContent ($ ('# userinfo, # topsection, # footer-userinfo'), data );
})
});

Note: When a request is repeatedly triggered, the Manager will execute abor () to stop the previous unfinished requests and re-release new requests, however, if you output an error message through the jquery ajaxError event on the page, it will be considered as an error. Therefore, if necessary, you need to filter it by yourself.

ExampleCopy codeThe Code is as follows: // output the Error Log
$ ('Body'). bind ('ajaxerror', function (event, xhr, setting, thrownError ){
// Filter out abort error messages
If (xhr. status = 0 | xhr. readyState = 0 | xhr. statusText = 'abort '){
Return;
}
$ ('# Log'). append (' <p> '+ thrownError +' </p> ');
});

This plug-in is easy to use, and the code logic is not very complex, but I have limited capabilities and technical level, if you encounter problems or any bug, please tell me by mail: nicolas-zhao@hotmail.com. Thank you!

Package download: Ajax Request status manager.