Jquery Ajax Example 7: Examples of event analysis in all Ajax Processes

I. Ajax process event analysis

JQuery triggers many events during Ajax execution.
These events can be divided into two types: Local and Global ).
Partial event: it can be called through $. ajax. If an Ajax request does not want to generate a global event, you can set global: false.
Global events: similar to click events, they can be bound to each DOM element.
The trigger sequence of these events is described as follows:

Local Global events)
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 the request starts.
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
The global request is 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.
Note: Except for ajaxStart and ajaxStop, all 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.

Ii. Examples of all Ajax process events

2.1. HTML code

<Div>
<Input type = "button" onclick = "BtnSpareClick ();" value = "PartEvents"/>
<Input type = "button" onclick = "BtnGlobalClick ();" value = "GlobalEvents"/>
</Div>

<Div id = "Result"> Result </div>
<Div id = "Process"> Process </div>

2.2 Jquery Ajax script Local instance Global event instance
<Script language = "javascript" type = "text/javascript">
$. Ready (function BtnSpareClick (){
$. Ajax ({
Type: "get ",
Url: "http://www.cnblogs.com/windy2008/rss ",
Data :{},
Global: false,
BeforeSend: function (data, status, settings ){
$ ("# Process"). text ("before Part request starts ");
Alert ($ ("# Process"). text ());
},
Success: function (data, status, settings ){
$ ("Item", data). each (function (I, domEle ){
$ ("# Result"). append ("<div>" + $ (domEle). children ("title"). text () + "</div> ");
});
$ ("# Process"). text ("When Part request is successful ");
Alert ($ ("# Process"). text ());
},
Complete: function (data, status, settings ){
$ ("# Process"). text ("When Part request is completed ");
Alert ($ ("# Process"). text ());
},
Error: function (data, status, settings ){
$ ("# Process"). text ("Part request error ");
Alert ($ ("# Process"). text ());
}
});
});

</Script>
<Script language = "javascript" type = "text/javascript">

$. Ready (function BtnGlobalClick (){
$. Get ("http://www.cnblogs.com/windy2008/rss", {}, function (data, status, settings)

{
$ ("Item", data). each (function (I, domEle ){
$ ("# Result"). append ("<div>" + $ (domEle). children ("title"). text () + "</div> ");
});
});
$ ("# Process"). ajaxStart (function (){
Alert ($ (this). text ());
$ (This). text ("starting a new Ajax request ");
});
$ ("# Process"). ajaxStop (function (){
$ (This). text ("when no Ajax is in progress ");
Alert ($ (this). text ());
});
$ ("# Process"). ajaxSend (function (){
$ (This). text ("Before Request start ");
Alert ($ (this). text ());
});
$ ("# Process"). ajaxSuccess (function (){
$ (This). text ("request successful ");
Alert ($ (this). text ());
});
$ ("# Process"). ajaxComplete (function (){
$ (This). text ("when the request is completed ");
Alert ($ (this). text ());
});
$ ("# Process"). ajaxError (function (){
$ (This). text ("request error ");
Alert ($ (this). text ());
});
});
</Script>