Based on the jquery Ajax request Status Manager

It is not surprising that today's Web sites have asynchronous requests and even many asynchronous requests in a Web page. Ajax has become the basic function of the site now, making Web applications closer to desktop applications.

However, no matter how close you are, there will be time to wait for the data to be loaded, once through the client and the server. As a result, most websites tell users that the data is still loaded by using a GIF animated icon or ' Loading ... '. But sometimes the problem can be tedious and cumbersome, either by displaying the ' Loading ' before an AJAX request, hiding it after Ajax succeeds, or writing it in jquery's Ajax global event Jquery.ajaxstart () and Jquery.ajaxstop () to control the Ajax state of the entire page. The former method is too trivial to use, each request writes the ' Loading ', and it needs to be hidden regardless of whether the request succeeds or fails. The latter is global, that is, the request state of the entire page, sometimes unable to meet the requirements of the local display loading state.

To address these issues, I developed a jquery plugin called Ajax request Status Manager. Using this plugin can make loading less troublesome. You can use the plugin to add all the requests in advance before triggering the AJAX request, and all you have to do is execute it in the event that the user interacts. Request () method. You can set all requests on one page to display loading independently, or you can set them to be global (show only one loading). Here are the details of how to use the plug-in:

Custom Loading CSS styles:
. state-loading {background: #fff URL (images/icon-ajax-loader.gif) ...}

Reference jquery Latest Version file:
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" ></script>

Note: This plugin is only tested in jquery1.4.4 and later versions.

Referencing the AJAX Request Status Manager plug-in file:
<script src= "Js/jquery-ajaxloader.js" ></script>

Executes the. Install () method in the Ready event of jquery:
$.loader.install (ClassName, IsGlobal);

Parameter description:
Classname:string, which represents the class name of your custom loading, such as the CSS-defined state-loading above.

Isglobal:boolean, defines whether the loading is global or stand-alone, the default value is True, and the parameter can be omitted.

Add the required Ajax request parameters and the successful callback method:
$.loader (Key). Add (modules, settings, callback);

Parameter description:
Key:string, this key is used to create or get the loader for the specified module. Of course, the same key can perform multiple add () methods to adding different module, but settings and callback are shared for this key, so the settings and callback added later will overwrite the previous one.

Modules:jquery object, the same request on a page can handle data from multiple modules, so if the previous install () method is set to false, when the AJAX request is executed, All of the module additions to this loader will display the loading state.

Settings:map,jquery Ajax settings parameters, but do not set AJAX events, which overrides the callback method in the plug-in, and the default request type is get.

Callback:function, a successful callback function that has a parameter of data, and the default is the object returned by the JSON type.

The Add () method returns an array of strings prefixed by the ' module ', for example, you add 3 elements, and the result is [' Module1 ', ' module2 ', ' module3 ']. You can delete the loading of one of the specified modules by returning an array, or you may not specify, that is, delete all, of course, if you need to.

Remove () method deletes the specified module:
$.loader (Key). Remove (ModuleID);

Parameter description:
Moduleid:string or array, specified as String deletes one of the modules, specifies that the module will be deleted in bulk, and if no parameters are specified, all modules will be deleted.

Example
Add 2 modules to the loader named UserInfo:

The code is as follows	Copy Code
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:

The code is as follows	Copy Code
var id2 = $.loader (' UserInfo '). Add ($ (' #footer-userinfo ')); var idlist = Id1.concat (ID2); Result: [' Module1 ', ' module2 ', ' module3 '] Delete the loading of the 2nd module, which is ' #top-userinfo ': var ret = $.loader (' userinfo '). Remove (idlist[1]); Result:true, modules: [' Module1 ', ' Module3 '] Executing in an interactive event. Request () Method: $.loader (key). Request ();

Of course, you can also discard the previous add Ajax settings and callback, in the interactive event to write their own $.ajax or $.get. Then call $.loader (key) before the request. Show (), call $.loader (key) inside the callback function. Hide (). This can also be flexible to control the state of loading.

Example

The code is as follows	Copy Code
$ (' #getUserInfo '). Bind (' click ', function () { $.loader (' UserInfo '). Request (); });

You can also write the request anew:

The code is as follows	Copy Code
$ (' #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 executes Abor () to block previously incomplete requests and republish new requests, but if you output an error message through the Ajaxerror event of jquery in the page, it is considered wrong, so if necessary, You need to filter it yourself.

Example

code is as follows	copy code
//output 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 ') {    & nbsp;    return;    }     $ (' #log '). Append (' <p> ' + thrownerror + ' </p> '); });