Jquery Ajax learning Example 7 Ajax all process event analysis example

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)
	AjaxStartGlobal events Start a new Ajax request, and no other ajax request is in progress.
BeforeSendLocal events Triggered when an Ajax request starts. If necessary, you can set the XHR object here.	AjaxSendGlobal events Global events triggered before the request starts.
SuccessLocal events Triggered when the request is successful. That is, the server does not return errors, and the returned data is not.	AjaxSuccessGlobal events The global request is successful.
ErrorLocal events Triggered only when an error occurs. You cannot execute the success and error callback functions at the same time.	AjaxErrorGlobal events Triggered when a global error occurs.
CompleteLocal events Whether your request succeeds or fails, you can trigger this event when the request is complete even if the request is synchronized.	AjaxCompleteGlobal events Triggered when a global request is complete.
	AjaxStopGlobal events 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.jb51.net/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.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 ("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>