Jquery Ajax Learning Example 7 Ajax All Process Event Analysis sample _jquery

I. AJAX all PROCESS Event analysis

jquery triggers many events in the process of executing Ajax.
These events can be divided into two types of events, one being local and the other a global event.
Local event: You can call it through $.ajax, you can set Global:false if an AJAX request does not want to produce a global event.
Global events: Similar to click events, you can bind to every DOM element.
The sequence of events triggered by these events is described as follows:

Partial events (local)	Global events
	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 The global event that is 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.
Note: In addition to 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.

II. Ajax All Process events sample

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

Partial event (local) instance

Global instance of event (global)

<script language= "javascript" type= "Text/javascript" > $.ready (function Btnspareclick () { $.ajax ({ Type: "Get", URL: "Http://www.jb51.net/windy2008/rss", Data: {}, Global:false, Beforesend:function (data, status, settings) { $ ("#Process"). Text ("Before the part Request begins"); 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 the part Request succeeds"); Alert ($ ("#Process"). Text ()); }, Complete:function (data, status, settings) { $ ("#Process"). Text ("When the part Request completes"); 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.jb51.net/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 ("Start a new Ajax request"); }); $ ("#Process"). Ajaxstop (function () { $ (this). Text ("When there is no Ajax in progress"); Alert ($ (this). text ()); }); $ ("#Process"). Ajaxsend (function () { $ (this). Text (before "request starts"); Alert ($ (this). text ()); }); $ ("#Process"). Ajaxsuccess (function () { $ (this). Text ("successful request"); Alert ($ (this). text ()); }); $ ("#Process"). Ajaxcomplete (function () { $ (this). Text ("Upon completion of request"); Alert ($ (this). text ()); }); $ ("#Process"). Ajaxerror (function () { $ (this). Text (when "error requested"); Alert ($ (this). text ()); }); }); </script>