jQuery1.9.1 siri analisis kod sumber (16) ajax ajax framework_jquery

Pengenalan AJAX

AJAX ialah teknologi yang boleh mengemas kini bahagian halaman web tanpa memuatkan semula keseluruhan halaman.

Pengetahuan asas yang anda patut ada

Sebelum meneruskan belajar, anda perlu mempunyai pemahaman asas tentang pengetahuan berikut:

HTML/XHTML
CSS
JavaScript/DOM

Jika anda ingin mempelajari projek ini dahulu, sila lawati tutorial ini di halaman utama kami.

Apakah itu AJAX?

AJAX = JavaScript dan XML Tak segerak.

AJAX ialah teknologi untuk mencipta halaman web yang pantas dan dinamik.

AJAX membenarkan halaman web dikemas kini secara tidak segerak dengan menukar sejumlah kecil data dengan pelayan di latar belakang. Ini bermakna bahagian halaman web boleh dikemas kini tanpa memuatkan semula keseluruhan halaman.

Untuk halaman web tradisional (tidak menggunakan AJAX), jika kandungan perlu dikemas kini, keseluruhan halaman web mesti dimuat semula.

Terdapat banyak kes aplikasi menggunakan AJAX: Sina Weibo, Peta Google, Kaixin.com, dll.

Cadangan Google

Pada tahun 2005, Google menjadikan AJAX popular dengan Google Suggestnya.

Google Suggest menggunakan AJAX untuk mencipta antara muka web yang sangat dinamik: apabila anda memasukkan kata kunci dalam kotak carian Google, JavaScript menghantar aksara ini ke pelayan dan pelayan mengembalikan senarai cadangan carian.

Mula menggunakan AJAX hari ini

AJAX adalah berdasarkan piawaian sedia ada. Piawaian ini telah digunakan oleh kebanyakan pembangun selama bertahun-tahun.

Memandangkan ia adalah rangka kerja ajax, mari kita bincangkan tentang idea pemprosesan ajax jQuery.

Penyemak imbas semasa menyokong ajax, tetapi pelayar yang berbeza mungkin menggunakannya secara berbeza (IE menggunakan tetingkap baharu.ActiveXObject("Microsoft.XMLHTTP"), pelayar standard menggunakan tetingkap baharu.XMLHttpRequest()). Jika anda mengikuti idea ini, nampaknya jQajax hanya perlu serasi?

Tidak, ajax asli mempunyai kelemahan besar atau kecil - ia tidak menyokong merentas domain (strategi asal yang sama telah wujud sejak sekian lama, Baidu sendiri). Jadi jQajax telah menambah aspek pemprosesan ini. Bagaimanakah jQajax menyelesaikan masalah merentas domain?

　f2e9319f9e2612a8a57a649bb03d8216

Anda boleh mendapatkan gambar Jelas sekali, laluan gambar tidak berada dalam domain yang sama dengan pelayan anda. Anda boleh cuba melihat bahawa semua teg dengan atribut src tidak dipengaruhi oleh dasar asal yang sama. Oleh itu, jQuery menggunakan atribut ini dan menggunakan src tag skrip untuk meminta laluan untuk permintaan merentas domain.

Kemudian jQuery menambah tiga cara untuk memantau acara ajax:

1. Acara global: $(document).on(‘ajaxStart’,func);

2. item panggilan balik tetapan ajax: $.ajax({url: "php.html", lengkap: func });

3. kaedah pengikatan tertunda: $.ajax(…).done(func);

Pada asasnya inilah yang dilakukan oleh jQajax.

Sebelum masuk ke teras rangka kerja ajax, mari kita analisis dahulu beberapa fungsi yang disediakan oleh jQuery untuk menyiri dan menyerahkan borang.

a. Siri borang

Siri borang yang dipanggil adalah untuk mengarang kandungan yang perlu diserahkan ke dalam rentetan dalam bentuk "key=value&key=value...".

Pensirian menggunakan tiga fungsi:

jQuery.fn. serialize() (fungsi siri, menapis data yang perlu diserahkan dalam borang dan mengembalikannya sebagai rentetan bersiri, dalam bentuk: "key=value&key=value...")

jQuery.fn. serializeArray() (tapis data yang perlu diserahkan dalam borang dan kembalikan dalam format tatasusunan objek pasangan kunci/nilai, kembalikan [{name:'key',value:'select1 '},{ name:'selectM',value:'selectM1'}, {name:'selectM',value:'selectM2'}, { name:'key2',value:0}…])

jQuery.param(serializeArray, traditional) (mensiri tatasusunan objek pasangan kunci/nilai menjadi rentetan "key=value&key=value...").

Serialize boleh terus memanggil jQuery.param( this.serializeArray() ).

Kod sumber serializeArray adalah seperti berikut: Terdapat tiga langkah utama: mengekstrak elemen borang, menapis elemen borang yang memenuhi syarat penyerahan dan menggabungkannya ke dalam tatasusunan objek pasangan kunci/nilai

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

Perlu diingatkan bahawa hasil penapisan jQuery mematuhi keputusan penyerahan borang biasa: //Tapis elemen borang yang perlu diserahkan (nama, elemen tidak dilumpuhkan, butang tidak dihantar dan elemen lain, ditandai elemen kotak semak/radio) )

Kod sumber fungsi param adalah seperti berikut: Terdapat dua proses utama: pengekodan kunci/nilai sebagai komponen URI (memastikan bahawa tiada simbol khas akan muncul dalam kunci dan nilai, iaitu, memastikan ketepatan "=" pemisahan), menggunakan "&" Pautan dan gantikan aksara ruang putih dengan " "

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;