jQuery1.9.1 ソースコード解析シリーズ (16) ajax ajax Framework_jquery

AJAX の概要

AJAX は、ページ全体をリロードせずに Web ページの一部を更新できるテクノロジーです。

知っておくべき基礎知識

学習を続ける前に、次の知識の基本を理解しておく必要があります:

HTML/XHTML
CSS
JavaScript/DOM

これらのプロジェクトを最初に学習したい場合は、当社のホームページにあるチュートリアルにアクセスしてください。

AJAX とは何ですか?

AJAX = 非同期 JavaScript および XML。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) の場合、コンテンツを更新する必要がある場合は、Web ページ全体を再ロードする必要があります。

AJAX を使用したアプリケーション ケースは数多くあります: Sina Weibo、Google Maps、Kaixin.com など。

Google サジェスト

2005 年、Google は Google サジェストによって AJAX の人気を高めました。

Google サジェストは、AJAX を使用して非常に動的な Web インターフェイスを作成します。Google の検索ボックスにキーワードを入力すると、JavaScript がこれらの文字をサーバーに送信し、サーバーは検索候補のリストを返します。

今すぐ AJAX を使い始めましょう

AJAX は既存の標準に基づいています。これらの標準は、ほとんどの開発者によって長年使用されてきました。

ajax フレームワークなので、jQuery の ajax 処理のアイデアについて話しましょう。

現在のブラウザーは ajax をサポートしていますが、ブラウザーによって使用方法が異なる場合があります (IE は new window.ActiveXObject("Microsoft.XMLHTTP") を使用し、標準ブラウザーは new window.XMLHttpRequest() を使用します)。この考え方に従うと、jQajax が互換性を持っていればよいように思えますが?

いいえ、ネイティブ Ajax には大なり小なり欠点があります。クロスドメインをサポートしていません (同一オリジン戦略は長い間存在しており、Baidu 自体も同様です)。そこで、jQajax はこの領域に処理を追加しました。jQajax はクロスドメインの問題をどのように解決するのでしょうか?

f2e9319f9e2612a8a57a649bb03d8216

明らかに、画像のパスはサーバーと同じドメインにありません。 src 属性を持つすべてのタグが同一生成元ポリシーの影響を受けないことを確認してみてください。したがって、jQuery はこの属性を使用し、script タグの src を使用してクロスドメイン リクエストのパスを要求します。

次に、jQuery は、ajax イベントを監視する 3 つの方法を追加します。

1. グローバル イベント: $(document).on(‘ajaxStart’,func);

2.ajax 設定コールバック項目: $.ajax({url: "php.html", complete: func });

3.遅延バインディングメソッド: $.ajax(…).done(func);

基本的にこれが jQajax の動作です。

ajax フレームワークの核心に入る前に、まずフォームをシリアル化して送信するために jQuery によって用意されたいくつかの関数を分析しましょう。

a. フォームのシリアル化

いわゆるフォームシリアル化とは、送信する必要があるコンテンツを「key=value&key=value...」の形式の文字列に組み立てることです。

シリアル化では 3 つの関数を使用します:

jQuery.fn.serialize() (シリアル化関数、フォームで送信する必要があるデータをフィルターし、「key=value&key=value...」の形式でシリアル化された文字列として返します)

jQuery.fn.serializeArray() (フォームで送信する必要があるデータをフィルタリングし、キーと値のペアのオブジェクト配列形式で返します。return [{name:'key',value:'select1 '},{ 名前:'selectM',value:'selectM1'}, {name:'selectM',value:'selectM2'}, { name:'key2',value:0}…])

jQuery.param(serializeArray, traditional) (キー/値ペアのオブジェクト配列を「key=value&key=value...」文字列にシリアル化します)。

Serialize は jQuery.param( this.serializeArray() ) を直接呼び出すことができます。

SerializeArray のソース コードは次のとおりです。 3 つの主なステップがあります: フォーム要素を抽出し、送信条件を満たすフォーム要素をフィルターで除外し、それらをキーと値のペアのオブジェクト配列に結合します

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

jQuery のフィルタリング結果は、通常のフォーム送信結果に準拠していることに注意してください。 //送信する必要があるフォーム要素 (名前、無効になっていない要素、送信されていないボタン、その他の要素、チェックが入っている) をフィルタリングします。チェックボックス/ラジオの要素) )

param 関数のソース コードは次のとおりです。 主要なプロセスは 2 つあります。 キーと値を URI コンポーネントとしてエンコードする (キーと値に特殊な記号が表示されないことを確認する、つまり "= が正しいことを確認する)"分離)、「&」を使用してリンクし、空白文字を「 "

に置き換えます」

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;