The events in JQuery Ajax are described in detail _jquery

Source: Internet
Author: User

Ajax can trigger many events.
There are two kinds of events, one is a local event, the other is a global event:
Local events: called and assigned by $.ajax.

Copy Code code as follows:

$.ajax ({
Beforesend:function () {
Handle the Beforesend Event
},
Complete:function () {
Handle the Complete event
}
// ...
});

Global events, which can be bound with bind and unbind to unbind. This is similar to Click/mousedown/keyup and other events. But he can pass it on to every DOM element.
Copy Code code as follows:

$ ("#loading"). Bind ("Ajaxsend", function () {///Use Bind
$ (this). Show ();
}). Ajaxcomplete (function () {//Direct use Ajaxcomplete
$ (this). Hide ();
});

Of course, one of your AJAX requests does not want to produce global events, you can set the Global:false
Copy Code code as follows:

$.ajax ({
URL: "Test.html",
Global:false,
// ...
});

The sequence of events is as follows:

Ajaxstart Global Events
Start a new Ajax request, and no other AJAX requests are in progress at this time.
Beforesend Local Events
Triggered when an AJAX request starts. If you want, you can set the Xhr object here.
Ajaxsend Global Events
Global events that are triggered before the request starts
Success Local Events
triggered when a request succeeds. That is, the server does not return an error, and the returned data is correct.
Ajaxsuccess Global Events
The global request succeeded
Error local Event
triggered only if an error occurs. You cannot perform both success and error two callback functions at the same time.
Ajaxerror Global Events
Triggered when an error occurs globally
Complete Local Events
Whether you request success or failure, even if the synchronization request, you can trigger the event when the request completes.
Ajaxcomplete Global Events
triggered when a global request completes
Ajaxstop Global Events
Triggered when no Ajax is in progress.

The parameters of the local event callback are clearly written in the document and are not described here.

In global events, except for Ajaxstart and Ajaxstop, all other events have 3 parameters
Event, XMLHttpRequest, Ajaxoptions
The first is the event, the second is the XHR object, and the third parameter is the most useful, and is the parameter of the time when this Ajax was invoked.
For Ajaxerror, there is a fourth parameter thrownerror that is passed only when an exception occurs.
We can use Ajaxoptions to write a global Ajax event.
Like what

Copy Code code as follows:

$ ("#msg"). Beforesend (function (e,xhr,o) {
$ (this). HTML ("requesting" +o.url);
}). ajaxsuccess (function (e,xhr,o) {
$ (this). HTML (o.url+ "request succeeded");
}). ajaxerror (function (e,xhr,o) {
$ (this). HTML (o.url+ "request Failed");
});

For this example,
This allows us to display the current Ajax state in a very convenient and global way.
Of course, the third argument is actually a parameter passed to Ajax. Get/post/load/getscript/getjson methods are essentially calls to Ajax methods, so the Ajaxoptions.url attribute is always valid.

There are even richer examples.
If you call with Ajax, you can also pass a custom parameter. The following example I have customized a msg parameter to the AJAX call

Copy Code code as follows:

Custom Parameters Msg
$.ajax ({url: "test1.html", type: "Get", msg: "Page One"});
$.ajax ({url: "test2.html", type: "Get", msg: "Page Two"});
$.ajax ({url: "test3.html", type: "Get", msg: "Page Three"});
$.ajax ({url: "test4.html", type: "Get", msg: "Page Four"});

Here you can get the custom parameter Msg.
This can be used to differentiate between different AJAX requests.
$ ("#msg"). Beforesend (function (e,xhr,o) {
$ (this). HTML ("requesting" +o.msg);
}). ajaxsuccess (function (e,xhr,o) {
$ (this). HTML (o.msg+ "request succeeded");
}). ajaxerror (function (e,xhr,o) {
$ (this). HTML (o.msg+ "request Failed");
});

Finally, for the load method, there is a saying.

Other simple Ajax methods, such as Get,post,getjson, have their callback functions set success callbacks.

And only the load set is actually the complete callback.

Therefore, there should be 2 parameters for the callback function set in load.

XMLHttpRequest and Textstatus
But that's not the case.
The load callback has three parameters
Xmlhttprequest.responsetext, Textstatus, XMLHttpRequest
So, you can do it in the load callback.
Use textstatus== "Success" or textstatus== "error" to determine whether the call succeeds.
Or use the Xmlhttprequest.status attribute to determine whether it is 200 or 404 or something else.

In this regard, I think it is more advanced than the ordinary get/post and other methods. It is not possible to set the error for each get in the singular. But setting a global ajaxerror is actually a good choice.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.