jQuery Ajax request state manager packaging_jquery

However, no matter how close it is, there will always be time to wait for the data to be loaded through the back and forth between the client and the server. Therefore, most websites use a Gif dynamic icon or words such as 'Loading...' to inform users that the data is still loading. But sometimes this problem will be very tedious and troublesome, either display this 'Loading' before the ajax request, and then hide it after the ajax is successful, or write it in the global event jQuery.ajaxStart() of jquery's ajax and jQuery. ajaxStop() to control the ajax state of the entire page. The former method is too trivial to use. You have to write this 'Loading' for every request, and you need to hide it regardless of whether the request succeeds or fails. The latter is global, that is, the request status of the entire page. Sometimes it cannot meet the requirement of displaying the loading status locally.

In order to solve these problems, I developed a jQuery plug-in called: Ajax Request Status Manager. Using this plug-in can make loading less troublesome. You can use this plug-in to add and write all requests before triggering an ajax request. All you have to do is execute the .request() method in the user interaction event. You can set all requests on a page to display loading independently, or you can set it to display globally (only one loading is displayed). The following is the specific usage of the plug-in:

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

Quote the latest version of jquery file:


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

Quote the Ajax request status manager plug-in file:


In the ready event of jquery Execute the .install() method in:
$.loader.install( className, isGlobal );

Parameter description:
className: string, indicating your customized loading class name, such as the above State-loading defined by css.

isGlobal: boolean, 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 success:
$.loader( key ).add( modules, settings , callback );

Parameter description:
Key: string, use this key to create or obtain the loader of the specified module. Of course, the same key can execute the add() method multiple times to add different modules, but settings and callbacks are shared for this key, so settings and callbacks added later will overwrite the previous ones.

modules: jquery object. The same request in a page can process data from multiple modules. Therefore, if the install() method was set to false before, when executing the ajax request, add it to this loader. All modules will display the loading status.

Settings: map, jquery's ajax settings parameter, but do not set the ajax event. This will override 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 defaults to an object returned by json type.

The add() method returns a string array prefixed by 'module'. For example, if you add 3 elements, the result is ['module1', 'module2', 'module3']. You can delete the loading of one of the specified modules through the returned array, or you can not specify it, that is, delete them all, of course, if you need to do this.

remove() method deletes the specified module:
$.loader( key ).remove( moduleId );

Parameter description:
moduleId: string or array, specified as If it is a string, one of the modules will be deleted. If it is specified as an array, the modules will be deleted in batches. If no parameters are specified, all modules will be deleted.

Example
Add 2 modules to the loader named userinfo:

Copy code Code 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: [ 'module1', 'module2', 'module3' ]
Delete the loading of the second module, that is, '#top-userinfo':
var ret = $.loader( 'userinfo' ).remove( idList[1] );
// result: true, modules: [ 'module1', 'module3' ]
Executed in interactive events. request() method:
$.loader( key ).request();
]
Of course, you can also abandon the ajax settings and callback added before, and write $.ajax yourself in the interactive event or $.get etc. Then call $.loader( key ).show() before the request and $.loader( key ).hide() within the callback function. This also allows you to flexibly control the loading status.

Example

Copy code The code is as follows:

$( '#getUserInfo ' ).bind( 'click', function() {
$.loader( 'userinfo' ).request();
});

You can also rewrite it from scratch Request:

Copy code The 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 triggered repeatedly, the manager will execute abor() to prevent the previously unfinished request and reissue a new request. However, if you output error information through jquery's ajaxError event on the page, it will This information is also considered incorrect, so you need to filter it yourself if necessary.

Example

Copy code The code is as follows:

//Output error log
$( 'body' ).bind( 'ajaxError', function( event, xhr, setting, thrownError ) {
// Filter out abort error message
if ( xhr.status === 0 || xhr.readyState === 0 || thrownError '' );
});


The plug-in is simple and easy to use, and the code logic is not very complicated. However, my ability and technical level are limited. If I encounter If you have any questions or bugs, please tell me via email: nicolas-zhao@hotmail.com. Thanks for coming!

Package download:
Ajax request status manager
.