Jquery Ajax events

Source: Internet
Author: User

Reference material address:
Http://docs.jquery.com/Ajax_Events
Http://www.cnblogs.com/HeroBeast/archive/2008/10/16/1312476.html

Ajax triggers many events.
There are two types of events: local events and global events:

Partial event: called and allocated through $. Ajax.

$. Ajax ({
Beforesend: function (){
// Handle the beforesend event
},
Complete: function (){
// Handle the Complete Event
}
//...
});
For global events, BIND can be used to bind and unbind can be used to cancel binding. This is similar to the click/mousedown/keyup event. But it can be passed to every Dom element.

$ ("# Loading"). BIND ("ajaxsend", function () {// use bind
$ (This). Show ();
}). Ajaxcomplete (function () {// directly use ajaxcomplete
$ (This). Hide ();
});
Of course, if you do not want to generate a global event for an Ajax request, you can set global: false.

$. Ajax ({
URL: "test.html ",
Global: false,
//...
});
The event sequence is as follows:
Ajaxstart global event
Start a new Ajax request, and no other Ajax request is in progress.
Beforesend local event
Triggered when an Ajax request starts. If necessary, you can set the xhr object here.
Ajaxsend global event
Global events triggered before request start
Success local events
Triggered when the request is successful. That is, the server does not return errors, and the returned data is not.
Ajaxsuccess global event
Global request successful
Error local events
Triggered only when an error occurs. You cannot execute the success and error callback functions at the same time.
Ajaxerror global event
Triggered when a global error occurs.
Complete local event
Whether your request succeeds or fails, you can trigger this event when the request is complete even if the request is synchronized.
Ajaxcomplete global event
Triggered when a global request is complete
Ajaxstop global event
Triggered when no Ajax is in progress.

The parameters of local Event Callback are clearly written in the document.

In global events, except for ajaxstart and ajaxstop, other events have three parameters.
Event, XMLHttpRequest, ajaxoptions
The first is the event, the second is the xhr object, and the third parameter is the most useful when Ajax is called.
For ajaxerror, there is also the fourth parameter thrownerror, which is passed only when an exception occurs.
We can use ajaxoptions to write a global Ajax event.
For example

$ ("# MSG"). beforesend (function (E, xhr, O ){
Authorization (thisdomain.html ("requesting" + O. url );
}). Ajaxsuccess (function (E, xhr, O ){
Optional (this).html (O. url + "request successful ");
}). Ajaxerror (function (E, xhr, O ){
Optional (this).html (O. url + "request failed ");
});
For this example,
In this way, the current Ajax status is displayed globally.
Of course, as mentioned earlier, the third parameter is actually the parameter passed to Ajax. Methods such as get/post/load/getscript/getjson call Ajax methods in essence, so the ajaxoptions. url attribute is always valid.

There are more examples.
If you use Ajax, you can also pass custom parameters. In the following example, A msg parameter is customized for Ajax call.

// Custom parameter msg
$. Ajax ({URL: "test1.html", type: "Get", MSG: "Page 1 "});
$. Ajax ({URL: "test2.html", type: "Get", MSG: "Page 2 "});
$. Ajax ({URL: "test3.html", type: "Get", MSG: "Page 3 "});
$. Ajax ({URL: "test4.html", type: "Get", MSG: "Page 4 "});

// The Custom parameter MSG can be obtained here.
// This can be used to treat different Ajax requests differently.
$ ("# MSG"). beforesend (function (E, xhr, O ){
Authorization (this).html ("requesting" + O. msg );
}). Ajaxsuccess (function (E, xhr, O ){
Optional (this).html (O. MSG + "request successful ");
}). Ajaxerror (function (E, xhr, O ){
Optional (this).html (O. MSG + "request failed ");
});
Finally, there is something to say about the load method.
Other simple Ajax methods, such as get, post, and getjson, all of their callback functions have success callbacks.
Only the load setting is actually the complete callback.
Therefore, there should be two callback function parameters set in load.
XMLHttpRequest and textstatus
But not in reality.
The load callback has three parameters.
XMLHttpRequest. responsetext, textstatus, XMLHttpRequest
Therefore, you can
You can use textstatus = "success" or textstatus = "error" to determine whether the call is successful.
You can also use the XMLHttpRequest. Status attribute to determine whether it is 200 or 404 or another one.

In this regard, I think it is more advanced than common methods such as get/post. It is impossible to set the error of each get if you want to set the singular number. However, setting a global ajaxerror is also 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.