Série d'analyses de code source jQuery1.9.1 (16) ajax ajax framework_jquery

Présentation d'AJAX

AJAX est une technologie qui permet de mettre à jour des parties d'une page Web sans recharger la page entière.

Connaissances de base que vous devriez avoir

Avant de continuer à étudier, vous devez avoir une compréhension de base des connaissances suivantes :

HTML/XHTML
CSS
Javascript/DOM

Si vous souhaitez d'abord découvrir ces projets, veuillez visiter ces tutoriels sur notre page d'accueil.

Qu'est-ce qu'AJAX ?

AJAX = JavaScript et XML asynchrones.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet aux pages Web d'être mises à jour de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Pour les pages web traditionnelles (n'utilisant pas AJAX), si le contenu doit être mis à jour, la page web entière doit être rechargée.

Il existe de nombreux cas d'application utilisant AJAX : Sina Weibo, Google Maps, Kaixin.com, etc.

Google Suggérer

En 2005, Google a popularisé AJAX avec son Google Suggest.

Google Suggest utilise AJAX pour créer une interface Web hautement dynamique : lorsque vous saisissez des mots-clés dans le champ de recherche de Google, JavaScript envoie ces caractères au serveur, et celui-ci renvoie une liste de suggestions de recherche.

Commencez à utiliser AJAX dès aujourd'hui

AJAX est basé sur des standards existants. Ces normes sont utilisées par la plupart des développeurs depuis de nombreuses années.

Puisqu'il s'agit d'un framework ajax, parlons des idées de traitement ajax de jQuery.

Les navigateurs actuels prennent en charge ajax, mais différents navigateurs peuvent l'utiliser différemment (IE utilise new window.ActiveXObject("Microsoft.XMLHTTP"), les navigateurs standards utilisent new window.XMLHttpRequest()). Si vous suivez cette idée, il semble que jQajax n'ait besoin que d'être compatible ?

Non, l'ajax natif a un gros ou un petit défaut - il ne prend pas en charge le cross-domain (la stratégie de même origine existe depuis longtemps, Baidu lui-même). JQajax a donc ajouté cet aspect du traitement. Comment jQajax résout-il les problèmes inter-domaines ?

　f2e9319f9e2612a8a57a649bb03d8216

Vous pouvez récupérer l'image. Évidemment, le chemin de l'image n'est pas dans le même domaine que votre serveur. Vous pouvez essayer de voir que toutes les balises avec l'attribut src ne sont pas affectées par la même politique d'origine. Par conséquent, jQuery utilise cet attribut et utilise le src de la balise de script pour demander le chemin pour les requêtes inter-domaines.

Ensuite, jQuery ajoute trois façons de surveiller les événements ajax :

1. Événement global : $(document).on('ajaxStart',func);

2.élément de rappel de réglage ajax : $.ajax({url : "php.html", complet : func });

3. méthode de liaison différée : $.ajax(…).done(func);

En gros, c'est ce que fait jQajax.

Avant d'entrer dans le cœur du framework ajax, analysons d'abord plusieurs fonctions préparées par jQuery pour sérialiser et soumettre des formulaires.

a. Sérialisation du formulaire

La sérialisation de formulaire consiste à composer le contenu qui doit être soumis dans une chaîne sous la forme de "key=value&key=value...".

La sérialisation utilise trois fonctions :

jQuery.fn.sérialize() (fonction de sérialisation, filtre les données qui doivent être soumises dans le formulaire et les renvoie sous forme de chaîne sérialisée, sous la forme de : "key=value&key=value...")

jQuery.fn. serializeArray() (filtre les données qui doivent être soumises dans le formulaire et les renvoie au format de tableau d'objets de paires clé/valeur, renvoie [{name:'key',value:'select1 '},{ nom : 'selectM', valeur : 'selectM1'}, {nom : 'selectM', valeur : 'selectM2'}, { nom : 'key2', valeur : 0}…])

jQuery.param(serializeArray, traditional) (sérialise le tableau d'objets de paires clé/valeur en une chaîne "key=value&key=value...").

Serialize peut appeler directement jQuery.param( this.serializeArray() ).

Le code source de SerializeArray est le suivant : Il y a trois étapes principales : extraire les éléments du formulaire, filtrer les éléments du formulaire qui répondent aux conditions de soumission et les combiner dans un tableau d'objets de paires clé/valeur

serializeArray: function() {
  //将form中的表单相关的元素取出来组成数组
  return this.map(function(){
    //表单节点有elements这个特征
    var elements = jQuery.prop( this, "elements" );
    return elements ? jQuery.makeArray( elements ) : this;
  })
  //过滤出为需要提交的表单元素（有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素）
  .filter(function(){
    var type = this.type;
    //使用.is(":disabled")过滤掉不可用的表单元素
    return this.name && !jQuery( this ).is( ":disabled" ) &&
    rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
    ( this.checked || !manipulation_rcheckableType.test( type ) );
  })
  //将表单提交元素组成name和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();
} 

Il convient de noter que les résultats de filtrage de jQuery sont conformes aux résultats normaux de soumission de formulaire : //Filtre les éléments du formulaire qui doivent être soumis (noms, éléments non désactivés, boutons de non-soumission et autres éléments, cochés éléments de case à cocher/radio) )

Le code source de la fonction param est le suivant : Il existe deux processus principaux : encoder la clé/valeur en tant que composants URI (garantir qu'aucun symbole spécial n'apparaîtra dans la clé et la valeur, c'est-à-dire garantir l'exactitude de "=" séparation), en utilisant "&" Lien et remplacez les caractères d'espacement par " "

jQuery.param = function( a, traditional ) {
  var prefix,
  s = [],
  add = function( key, value ) {
      //如果value是函数，执行他得到真正的value
      value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
      //把key和value作为URI组件编码，保证key和value不会出现特殊符号，即保证了“=”分割的正确性
      s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
    };
  ...
  //传入的是数组,假设他是一个form表单键值对数组
  if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
    //序列化表单元素
    jQuery.each( a, function() {
      add( this.name, this.value );
    });
  } else {
    ...
  }
  //返回序列化结果，注意：空白符被替换成了"+"
  return s.join( "&" ).replace( r20, "+" );
}; 

　　其中encodeURIComponent详细点击查看

b. ajax的事件监听

　　给ajax绑定事件有三种方式

　　1.全局事件：$(document).on(‘ajaxStart',func);

　　2.ajax设置回调项：$.ajax({url: "php.html", complete: func }); 

　　3.deferred绑定方式：$.ajax(…).done(func);

　　接下来我们一一讲解他们的实现。

全局事件（ajaxStart/ajaxStop/ajaxComplete/ajaxError/ajaxSuccess/ajaxSend）

　　使用.on事件绑定这种通用方式我们毫无疑问是可以绑定ajax监听事件，除此之外还可以直接使用$(…).ajaxStart(func)来绑定事件。他们的实现也是用.on来绑定。

jQuery.each( [ "ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend" ], function( i, type ){
    jQuery.fn[ type ] = function( fn ){
      return this.on( type, fn );
    };
}); 

　　触发事件比较简单，在进行ajax处理过程中在合适的时机直接使用jQuery.event.trigger直接触发。以ajaxStart为例

   //如果此时没有正在执行的请求，则触发ajaxStart事件
      if ( fireGlobals && jQuery.active++ === 0 ) {
        jQuery.event.trigger("ajaxStart");
      } 　

ajax设置回调项(beforeSend/complete/success/error)

　　触发设置回调项分两种：beforeSend直接在适当的时机调用。源码

//调用beforeSend回调，如果回调返回失败或abort则返回中止
if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
        //中止如果没有准备好
        return jqXHR.abort();
      } 
　　complete/success/error则利用Deferred的特性将回调添加到延时队列，等待延时状态处理。源码
//创建最终选项对象
s = jQuery.ajaxSetup( {}, options )
...
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
...
//添加延时事件
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
//安装回调到deferreds上
for ( i in { success: 1, error: 1, complete: 1 } ) {
jqXHR[ i ]( s[ i ] );
}
//在ajax请求完成的处理函数中执行completeDeferred的延时列表
function done(){
...
//执行Complete处理
completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
...
} 

deferred方式绑定回调

　　Deferred方式绑定事件就不用特别说明了，因为ajax本身就是一个延时对象。直接使用$.ajax(…).done(fn).fail(fn). progress(fn).always(fn).then(fn)。源码

deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
...
deferred.promise( jqXHR ).complete = completeDeferred.add;
...
return jqXHR;