jQuery1.9.1 Source Analysis Series (16) AJAX AJAX Framework _jquery

Introduction to AJAX

AJAX is a technology that can update parts of a Web page without reloading the entire page.

The basics you should have

Before continuing your study, you need to have a basic understanding of the following knowledge:

Html/xhtml
Css
Javascript/dom

If you would like to learn these items first, please visit these tutorials on our home page.

What is AJAX?

AJAX = asynchronous JavaScript and XML.

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update your content, you must overload the entire page face.

There are many application cases using AJAX: Sina Weibo, Google maps, happy net and so on.

Google suggest

In 2005, Google made AJAX popular through its Google suggest.

Google suggest uses AJAX to create a Dynamic Web interface: When you enter a keyword in Google's search box, JavaScript sends the characters to the server, and the server returns a list of search suggestions.

I started using AJAX today.

AJAX is based on existing standards. These standards have been used by most developers for years.

Since it's an AJAX framework, chat about jquery's ajax approach.

Today's browsers support Ajax, but different browsers may use different methods (ie use the new window.) ActiveXObject ("Microsoft.XMLHTTP"), the standard browser uses the new window. XMLHttpRequest ()). If according to this kind of thought, seemingly jqajax only need to do the compatibility processing on the line?

No, native Ajax has a big not to say small shortcomings-not support cross-domain (homologous strategy for a long, own Baidu). So Jqajax added this aspect of the processing, Jqajax is how to solve the cross-domain problem?

is able to get to the picture, it is obvious that the path of the picture and your server is not a domain. You can try it. All labels with the SRC attribute are not affected by the homology policy. So jquery uses this attribute to request a path for Cross-domain requests using the SRC of the script label.

jquery then adds three ways of listening to Ajax events:

1. Global Events: $ (document). On (' Ajaxstart ', func);

2.ajax Set Callback entry: $.ajax ({url: "php.html", Complete:func});

3.deferred Binding method: $.ajax (...). Done (func);

Basically this is what Jqajax does.

Before you actually go into the AJAX framework core, analyze several of the functions of a jquery-prepared serialization submission form.

A. Serialization of forms

The so-called form serialization will consist of what the form needs to submit: A string in the form of "Key=value&key=value ...".

Serialization uses three functions:

Jquery.fn. Serialize () (serialization function that filters out the data that needs to be submitted in the form and returns in a serialized string, in the form of: "Key=value&key=value ...")

Jquery.fn. Serializearray () (filters out the data that needs to be submitted in the form and returns 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 the object array of the Key/value key value pair to the "Key=value&key=value ..." string).

Serialize directly call Jquery.param (This.serializearray ()).

Serializearray's source code is as follows: The main three steps: Extract form elements, filter out the form elements that meet the submission criteria, the array of objects combined into Key/value key value pairs

Serializearray:function () {///Remove the form-related elements in form to form an array return This.map (function () {//form node has elements this feature var elem
    Ents = Jquery.prop (This, "elements"); return elements?
  Jquery.makearray (elements): this; //filter out the elements of the form that need to be submitted (with the name name, disabled element, non-submit button, Checkbox/radio checked). Filter (function () {var type = This.typ
    E Use the. is (":d isabled") to filter out the unavailable table cells return this.name &&!jquery (This). Is (":d isabled") && Rsubmitta Ble.test (this.nodename) &&!rsubmittertypes.test (type) && (this.checked | |!manipulation_rcheckab
  Letype.test (type));
    /////The form submits elements to the object array of name and value. map (function (i, elem) {var val = jQuery (This). Val ();
    return val = 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 ();  }

Note that the jquery filter results conform to the normal form submission result://filtered out for the form elements that need to be submitted (elements such as name, disabled, non-submit buttons, Checkbox/radio checked)

param function Source code is as follows: The main two processing: will be key/value as a URI component encoding (guarantee key and value will not appear special symbols, that is to ensure the "=" The correctness of the split), the use of "&" link and the blank is replaced by "+"

Jquery.param = function (A, traditional) {
  var prefix,
  s = [],
  add = function (key, value) {
      //if value is a letter Number, execute he gets the true value
      value = 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, that is, the correctness of "=" segmentation is guaranteed
      s[s.length] = encodeURIComponent (key) + "=" + encodeURIComponent (value);
    };
  ...
  Incoming is an array, assuming that he is a form form a single key value array
  if (Jquery.isarray (a) | | (A.jquery &&!jquery.isplainobject (a))) {
    //serialization of table cell element
    Jquery.each (A, function () {
      Add (this.name, this.value);
    });
  } else {
    ... c18/>}
  //Returns serialization results, note: whitespace is replaced with "+" return
  s.join ("&"). Replace (R20, "+");

Where encodeuricomponent detailed click to view

B. Ajax Event Monitoring

There are three ways to bind events to Ajax

1. Global Events: $ (document). On (' Ajaxstart ', func);

2.ajax Set Callback entry: $.ajax ({url: "php.html", Complete:func});

3.deferred Binding method: $.ajax (...). Done (func);

Next, we'll explain their implementation.

Global Events (Ajaxstart/ajaxstop/ajaxcomplete/ajaxerror/ajaxsuccess/ajaxsend)

Use. On event binding This is a common way we can no doubt bind Ajax listener events, and in addition to using $ (...) directly. Ajaxstart (func) to bind events. Their implementation is also bound with. On.

Jquery.each (["Ajaxstart", "Ajaxstop", "Ajaxcomplete", "Ajaxerror", "ajaxsuccess", "ajaxsend"], function (i, type) {
   
    jquery.fn[Type] = function (FN) {return
      This.on (type, fn);
    

   

Trigger event is relatively simple, in the process of AJAX processing in the right time to directly use JQuery.event.trigger direct trigger. Taking Ajaxstart as an example

   If there are no executing requests at this time, the Ajaxstart event is triggered if
      (fireglobals && jquery.active++ = 0) {
        JQuery.event.trigger (" Ajaxstart ");
      }

Ajax Settings Callback Item (BEFORESEND/COMPLETE/SUCCESS/ERROR)

Trigger settings callback items are divided into two types: Beforesend are invoked directly at the appropriate time. Source

Invokes the Beforesend callback and returns the Abort if
(s.beforesend && s.beforesend.call (Callbackcontext, JQXHR, s) if the callback returns a failure or abort = = False | |　　state = = 2)) {
        //abort if not ready to return
        Jqxhr.abort ();
      } 
Complete/success/error uses the deferred feature to add the callback to the delay queue, waiting for the delay state to be processed. SOURCE
//Create final option object
s = Jquery.ajaxsetup ({}, Options)
...
deferred = Jquery.deferred (),
completedeferred = Jquery.callbacks ("Once Memory"),
...
Add delay Event
deferred.promise (JQXHR). Complete = Completedeferred.add;
jqxhr.success = Jqxhr.done;
Jqxhr.error = Jqxhr.fail;
Install callback to Deferreds
for (i in {success:1, error:1, complete:1}) {
jqxhr[i] (s[i]);
Execute completedeferred delay list function done
() {
...
) in the processing function that the AJAX request completes. Perform complete processing
completedeferred.firewith (Callbackcontext, [JQXHR, StatusText]);
...

Deferred binding callback

The deferred method of binding events is not specifically explained, because Ajax itself is a deferred object. Direct use of $.ajax (...). Done (FN). Fail (FN). Progress (FN). Always (FN). Then (FN). Source

 deferred = Jquery.deferred (), completedeferred = Jquery.callbacks ("Once Memory"), ... Defe
Rred.promise (JQXHR). Complete = Completedeferred.add; 
... return jqxhr;