jquery.jsを読み解く

第12回 jQueryライブラリ(2530行目~2833行目)

この記事を読むのに必要な時間:およそ 10.5 分

前回からの今回までの間にjQuery 1.2.4および1.2.5がリリースされました。開発者のJohn Resigによると,1.2.4にはビルド上の不具合があったために,1.2.5をリリースしたとのことで,1.2.4に関しては利用しないほうが賢明です。

大きな変更点としては,width,heightやoffsetsなどの扱いを拡張するDimensionsプラグインのコアライブラリへの統合とイベントハンドリングの改良によるスピード向上が図られています。この改良により,ドラッグアンドドロップの処理が今までよりも3倍速くなっているそうです。また,夏にはjQuery 1.3のリリースも予定されていて,こちらもセレクタとDOM操作の改善によりさらなるスピードアップが期待できそうです。

ところで,この「jQuery.jsを読み解く」では,連載開始時のバージョン1.2.2を前提に進めています。しかし,現在の最新版である1.2.5と共通の部分がほとんどですので,ぜひ最新版のソースコードを読む際にも本記事を参考にしていただければと思います。それでは,2530行目からのAjax関連処理を実装している部分の解説に入っていきましょう。

jQuery.ajax()

jQuery.ajax()メソッドは,jQueryで用意されている様々なAjaxリクエストを処理するための部分です。

2530:   // Last-Modified header cache for next request
2531:   lastModified: {},
2532: 
2533:   ajax: function( s ) {
2534:     var jsonp, jsre = /=\?(&|$)/g, status, data;
2535: 
2536:     // Extend the settings, but re-extend 's' so that it can be
2537:     // checked again later (in the test suite, specifically)
2538:     s = jQuery.extend(true, s, jQuery.extend(true, {}, jQuery.ajaxSettings, s));
2539: 
2540:     // convert data if not already a string
2541:     if ( s.data && s.processData && typeof s.data != "string" )
2542:       s.data = jQuery.param(s.data);
2543: 

2531行目では,次回のリクエストのためにLast-Modifiedヘッダを格納するための変数を用意しています。

そして,2533行目からがjQuery.ajax()メソッドの定義になります。2534行目では,変数の初期化を行っています。jsreとはJSONPのコールバック関数名を置換するための正規表現です。

2544:     // Handle JSONP Parameter Callbacks
2545:     if ( s.dataType == "jsonp" ) {
2546:       if ( s.type.toLowerCase() == "get" ) {
2547:         if ( !s.url.match(jsre) )
2548:           s.url += (s.url.match(/\?/) ? "&" : "?") + (s.jsonp || "callback") + "=?";
2549:       } else if ( !s.data || !s.data.match(jsre) )
2550:         s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?";
2551:       s.dataType = "json";
2552:     }
2553: 
2554:     // Build temporary JSONP function
2555:     if ( s.dataType == "json" && (s.data && s.data.match(jsre) || s.url.match(jsre)) ) {
2556:       jsonp = "jsonp" + jsc++;
2557: 
2558:       // Replace the =? sequence both in the query string and the data
2559:       if ( s.data )
2560:         s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
2561:       s.url = s.url.replace(jsre, "=" + jsonp + "$1");
2562: 
2563:       // We need to make sure
2564:       // that a JSONP style response is executed properly
2565:       s.dataType = "script";
2566: 
2567:       // Handle JSONP-style loading
2568:       window[ jsonp ] = function(tmp){
2569:         data = tmp;
2570:         success();
2571:         complete();
2572:         // Garbage collect
2573:         window[ jsonp ] = undefined;
2574:         try{ delete window[ jsonp ]; } catch(e){}
2575:         if ( head )
2576:           head.removeChild( script );
2577:       };
2578:     }
2579: 

2545~2552行目でJSONP形式でデータを受け取るための前処理を行います。リクエストメソッドがGETで,クエリー文字列に"=?"が含まれていない場合は"callback=?"形式のパラメータを追加します。jsonpプロパティが指定されていれば,引数名としてその値を利用し,指定されていなければデフォルトのcallbackを利用します。また,GET以外のメソッドでcallback関数名の指定がなければ,dataにcallback関数の指定を追加します。そして,2551行目でdataTypeを"json"に変更します。

2555~2578行目は,dataTypeが"json"かつパラメータに"callback=?"形式の指定がある場合の処理で,callback関数名の置換と実際のコールバック関数の登録を行います。2556行目にて"json1210664936115"のようなコールバック関数名を確保します。そして,2559行目でクエリー文字列と送信データ内の"=?"をコールバック関数名に置き換えます。そして,後ほどのためにdataTypeを"script"に置き換えておきます。

2568行目でwindowオブジェクトにコールバック関数を先ほど生成した名前で登録します。関数の処理内容としては,success(),complete()の順に処理を実行していき,最後に自身を削除しています。完全に削除できるように,2573行目でwindow[jsonp]にundefinedを設定した後に,deleteを実行,head内のscriptタグを除去しています。success, completeに関しては,それぞれ2752行目,2762行目で説明します。

2580:     if ( s.dataType == "script" && s.cache == null )
2581:       s.cache = false;
2582: 
2583:     if ( s.cache === false && s.type.toLowerCase() == "get" ) {
2584:       var ts = (new Date()).getTime();
2585:       // try replacing _= if it is there
2586:       var ret = s.url.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2");
2587:       // if nothing was replaced, add timestamp to the end
2588:       s.url = ret + ((ret == s.url) ? (s.url.match(/\?/) ? "&" : "?") + "_=" + ts : "");
2589:     }
2590: 

2580行目からは,ブラウザのキャッシュを抑制するためのパラメータを付加する処理になります。2580行目によりdataTypeが"script"でキャッシュに関する指定がない場合はキャッシュ不可とします。

また,リクエストメソッドがGETでキャッシュ不可の場合は,"_=1210664936115"形式のパラメータを付加します。もし,"_="のパラメータが既に存在していれば2586行目でそれを置換し,なければ2588行目で追加します。

著者プロフィール

山下英孝(やましたひでたか)

大学を卒業後,大手SIerに就職し,電機メーカーの研究所勤務を経て,ウノウに入社。1年半に渡ってWebサイトの開発,ディレクション,運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで,Linuxサーバ運用管理も得意。

ブログWeboo! Returns.

コメント

コメントの記入