the introduction of Ajax is not much to say, click to see .
Since it is the AJAX framework, then chat about the AJAX approach to jquery.
Browsers now support Ajax, except that different browsers may use different methods (ie uses the new window. ActiveXObject ("Microsoft.XMLHTTP"), the standard browser uses the new window. XMLHttpRequest ()). If you follow this idea, it seems that jqajax only need to do a good deal with the compatibility of the line?
No, the original Ajax has a big not to say small shortcomings-not support cross-domain (same-origin strategy for a long-standing, self-Baidu). So Jqajax added this aspect of processing, how does Jqajax solve cross-domain problems?
is able to take pictures, it is obvious that the path of the picture and your server is not a domain. You can try all the tags with the SRC attribute are not affected by the same-origin policy. Therefore , jquery uses this attribute to request a path for cross-domain requests using the SRC of the script tag .
Then jquery is adding three ways to listen to Ajax events:
1. Global Event: $ (document). On (' Ajaxstart ', func);
2.ajax Set Callback entry: $.ajax ({url: "php.html", Complete:func});
3.deferred Binding method: $.ajax (...). Done (func);
Basically that's what Jqajax is doing.
Before you really get into the core of the AJAX framework, let's analyze a few of the jquery-prepared functions that serialize the submitted form.
A. Serialization of forms
The so-called form serialization is the form of a string that will need to be submitted in the form of something like: "Key=value&key=value ...".
Serialization uses three functions:
Jquery.fn. Serialize ()(a serialization function that filters out data that needs to be submitted in a form and returns it as a serialized string, such as: "Key=value&key=value ...")
Jquery.fn. Serializearray ()(filters out the data that is required to be submitted in the form and returns as an array of objects in the Key/value key-value pair, returns [{name: ' key ', Value: ' Select1 '},{name : ' SELECTM ', Value: ' SelectM1 '}, {name: ' SELECTM ', Value: ' SelectM2 '}, {name: ' Key2 ', value:0} ...] )
Jquery.param (Serializearray, Traditional)(serializes an array of objects Key/value key-value pairs into a "key=value&key=value ..." string).
Serialize directly calls Jquery.param (This.serializearray ()).
Serializearray's source code is as follows : main three steps: extracting form elements, filtering out form elements that meet the submission criteria, and grouping objects into an array of Key/value key-value pairs
Serializearray:function() { //takes form-related elements out of the form to form an array return This. Map (function(){ //the form node has the elements feature varelements = Jquery.prop ( This, "Elements" ); returnElements? Jquery.makearray (elements): This; }) //Filters out the elements of the form that need to be submitted (elements with name name, non-disabled element, non-commit button, Checkbox/radio checked). Filter (function(){ varType = This. Type; //use. Is (":d isabled") to filter out unavailable table cells return This. Name &&!jquery ( This). Is (":d isabled") &&Rsubmittable.test ( This. NodeName) &&!rsubmittertypes.test (type) && ( This. checked | | !manipulation_rcheckabletype.test (type)); }) //an array of objects that comprise the form submission elements name and value. Map (function(i, elem) {varval = JQuery ( This). Val (); returnval = =NULL?NULL: Jquery.isarray (val)?Jquery.map (Val,function(val) {return{name:elem.name, Value:val.replace (Rcrlf, "\ r \ n" ) }; }): {name:elem.name, Value:val.replace (Rcrlf,"\ r \ n" ) }; }). get ();}
It is important to note that jquery's filtering results are consistent with the normal form submission results://filter out the form elements that need to be submitted (elements with name name, non-disabled element, non-commit button, Checkbox/radio checked)
param function Source code is as follows: mainly for two processing: The Key/value as a URI component encoding (to ensure that key and value do not have a special symbol, that is, "=" to ensure the correctness of the split), using the "&" Link and replace whitespace with "+"
Jquery.param =function(A, traditional) {varprefix, s=[], add=function(key, value) {//if value is a function, execute him to get real valueValue = jquery.isfunction (value)? Value (): (Value = =NULL? "": Value); //The key and value are encoded as URI components to ensure that key and value do not appear special symbols, which guarantees the correctness of the "=" segmentations[S.length] = encodeURIComponent (key) + "=" +encodeURIComponent (value); }; ... //An array is passed in, assuming that he is a form form key value array if(Jquery.isarray (a) | | (A.jquery &&!)Jquery.isplainobject (a))) { //Serializing table CellsJquery.each (A,function() {Add ( This. Name, This. Value); }); } Else { ... } //returns the serialization result, note: The whitespace character is replaced with "+" returnS.join ("&"). Replace (R20, "+") );};
Where encodeuricomponent detailed click to view
B. Event snooping for Ajax
There are three ways to bind events to Ajax
1. Global Event: $ (document). On (' Ajaxstart ', func);
2.ajax Set Callback entry: $.ajax ({url: "php.html", Complete:func});
3.deferred Binding method: $.ajax (...). Done (func);
Next we explain their implementation.
Global Events (Ajaxstart/ajaxstop/ajaxcomplete/ajaxerror/ajaxsuccess/ajaxsend)
With the. On event binding, we can no doubt be able to bind Ajax listener events, in addition to the direct use of $ (...). Ajaxstart (func) to bind the event. Their implementation is also bound with. On.
function (i, type) { function(FN) { returnthis. On (type, FN); };}) ;
Triggering events are relatively straightforward and are directly triggered using JQuery.event.trigger at the right time during AJAX processing. Taking Ajaxstart as an example
// Trigger the Ajaxstart event if there are no requests executing at this time if (fireglobals && jquery.active++ = = = 0 ) { JQuery.event.trigger ("Ajaxstart"); }
Ajax Settings Callback Entry (BEFORESEND/COMPLETE/SUCCESS/ERROR)
There are two types of trigger set callback: Beforesend is called directly at the appropriate time. Source
// Call the Beforesend callback if the callback returns a failure or abort returns abort if False | | state = = = 2 ) ) {// abort if not ready for return jqxhr.abort (); }
Complete/success/error uses the deferred feature to add callbacks to the delay queue and wait for the delay state to be processed. Source
//creating a final option objects =Jquery.ajaxsetup ({}, Options) ... deferred=jquery.deferred (), completedeferred= Jquery.callbacks ("Once Memory"),...//Add delay EventsDeferred.promise (JQXHR). Complete=COMPLETEDEFERRED.ADD;JQXHR. Success =JQXHR.DONE;JQXHR. Error =Jqxhr.fail;//install callback on Deferreds for(Iinch{Success: 1,Error: 1, Complete: 1}) {jqxhr[i] (s[i]);}//execution of the completedeferred delay list in the processing function completed by the AJAX requestfunctionDone () {...//perform complete processing completedeferred.firewith(Callbackcontext, [JQXHR, StatusText]);
Deferred method Binding callback
The deferred-mode binding event is not specifically explained, because Ajax itself is a time-lapse object. Use $.ajax directly (...). Done (FN). Fail (FN). Progress (FN). Always (FN). Then (FN). Source
deferred = jQuery. Deferred= Jquery.callbacks ("Once memory"= completedeferred.add; return jqxhr;
If you feel this article is good, please click on the bottom right "recommended"!
jQuery-1.9.1 Source Analysis Series (16) Ajax--ajax frame