jQuery1.9.1 Quellcode-Analysereihe (16) Ajax Ajax Framework_jquery

AJAX-Einführung

AJAX ist eine Technologie, die Teile einer Webseite aktualisieren kann, ohne die gesamte Seite neu laden zu müssen.

Grundkenntnisse, die Sie haben sollten

Bevor Sie mit dem Studium fortfahren, müssen Sie über grundlegende Kenntnisse der folgenden Kenntnisse verfügen:

HTML/XHTML
CSS
JavaScript/DOM

Wenn Sie diese Projekte zuerst kennenlernen möchten, besuchen Sie bitte diese Tutorials auf unserer Homepage.

Was ist AJAX?

AJAX = Asynchrones JavaScript und XML.

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Wenn bei herkömmlichen Webseiten (ohne AJAX) der Inhalt aktualisiert werden muss, muss die gesamte Webseite neu geladen werden.

Es gibt viele Anwendungsfälle, die AJAX verwenden: Sina Weibo, Google Maps, Kaixin.com usw.

Google Suggest

Im Jahr 2005 machte Google AJAX mit seinem Google Suggest bekannt.

Google Suggest verwendet AJAX, um eine hochdynamische Weboberfläche zu erstellen: Wenn Sie Schlüsselwörter in das Suchfeld von Google eingeben, sendet JavaScript diese Zeichen an den Server und der Server gibt eine Liste mit Suchvorschlägen zurück.

Beginnen Sie noch heute mit der Nutzung von AJAX

AJAX basiert auf bestehenden Standards. Diese Standards werden von den meisten Entwicklern seit vielen Jahren verwendet.

Da es sich um ein Ajax-Framework handelt, sprechen wir über die Ajax-Verarbeitungsideen von jQuery.

Aktuelle Browser unterstützen Ajax, aber verschiedene Browser verwenden es möglicherweise unterschiedlich (IE verwendet new window.ActiveXObject("Microsoft.XMLHTTP"), Standardbrowser verwenden new window.XMLHttpRequest()). Wenn Sie dieser Idee folgen, scheint es, dass jQajax nur kompatibel sein muss?

Nein, natives Ajax hat ein großes oder kleines Manko – es unterstützt keine domänenübergreifende Nutzung (Same-Origin-Strategie gibt es schon seit langem, Baidu selbst). Daher hat jQajax diesen Aspekt der Verarbeitung hinzugefügt. Wie löst jQajax domänenübergreifende Probleme?

　f2e9319f9e2612a8a57a649bb03d8216

Sie können das Bild abrufen. Offensichtlich befindet sich der Pfad des Bildes nicht in derselben Domäne wie Ihr Server. Sie können versuchen, sicherzustellen, dass nicht alle Tags mit dem src-Attribut von derselben Ursprungsrichtlinie betroffen sind. Daher verwendet jQuery dieses Attribut und verwendet den src des Skript-Tags, um den Pfad für domänenübergreifende Anforderungen anzufordern.

Dann fügt jQuery drei Möglichkeiten zur Überwachung von Ajax-Ereignissen hinzu:

1. Globales Ereignis: $(document).on(‘ajaxStart’,func);

2.Ajax-Einstellung Rückrufelement: $.ajax({url: "php.html", vollständig: func });

3. Methode der verzögerten Bindung: $.ajax(…).done(func);

Im Grunde ist es das, was jQajax macht.

Bevor wir uns mit dem Kern des Ajax-Frameworks befassen, analysieren wir zunächst einige von jQuery vorbereitete Funktionen zum Serialisieren und Senden von Formularen.

a. Formularserialisierung

Bei der sogenannten Formularserialisierung wird der Inhalt, der übermittelt werden muss, in einer Zeichenfolge in der Form „Schlüssel=Wert&Schlüssel=Wert…“ zusammengefasst.

Die Serialisierung verwendet drei Funktionen:

jQuery.fn. serialize() (Serialisierungsfunktion, filtert die Daten heraus, die im Formular übermittelt werden müssen, und gibt sie als serialisierte Zeichenfolge zurück, in der Form: „key=value&key=value...“)

jQuery.fn. serializeArray() (filtern Sie die Daten heraus, die im Formular übermittelt werden müssen, und geben Sie sie im Objektarray-Format von Schlüssel/Wert-Paaren zurück, geben Sie [{name:'key',value:'select1 '},{ name:'selectM',value:'selectM1'}, {name:'selectM',value:'selectM2'}, { name:'key2',value:0}…])

jQuery.param(serializeArray, Traditional) (serialisiert das Objektarray von Schlüssel/Wert-Paaren in eine „key=value&key=value...“-Zeichenfolge).

Serialize kann jQuery.param( this.serializeArray() ) direkt aufrufen.

Der Quellcode von serializeArray lautet wie folgt: Es gibt drei Hauptschritte: Formularelemente extrahieren, Formularelemente herausfiltern, die die Übermittlungsbedingungen erfüllen, und sie zu einem Objektarray aus Schlüssel/Wert-Paaren kombinieren

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();
} 

Es ist zu beachten, dass die Filterergebnisse von jQuery den normalen Formularübermittlungsergebnissen entsprechen: // Filtern Sie die Formularelemente heraus, die übermittelt werden müssen (Namen, nicht deaktivierte Elemente, Nicht-Übermittlungsschaltflächen und andere Elemente, überprüft). Elemente von Kontrollkästchen/Radio) )

Der Quellcode der param-Funktion lautet wie folgt: Es gibt zwei Hauptprozesse: Kodieren von Schlüssel/Wert als URI-Komponenten (sicherstellen, dass keine Sonderzeichen in Schlüssel und Wert erscheinen, d. h. Sicherstellen der Richtigkeit von „=" Trennung), mit „&“ Verknüpfen und ersetzen Sie Leerzeichen durch „ „

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;