jquery.jsを読み解く

第11回 jQueryライブラリ(2365行目~2529行目)

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

今回は,Ajax関連の処理を取り扱う部分の解説になります。

IEメモリリーク対策

2365: // Prevent memory leaks in IE
2366: // And prevent errors on refresh with events like mouseover in other browsers
2367: // Window isn't included so as not to unbind existing unload events
2368: jQuery(window).bind("unload", function() {
2369:   jQuery("*").add(document).unbind();
2370: });

2368行目から2370行目は,Internet Explorerのメモリリーク対策のための処理です。window.unloadイベント発生時に,イベントを一括解除します。既に存在するunloadイベントを解除してしまわないようにwindowオブジェクトは含めません。

jQuery.fn.load()

2371行目からは,外部からHTMLの断片を読み込み表示するload()メソッドの定義部分になります。

2371: jQuery.fn.extend({
2372:   load: function( url, params, callback ) {
2373:     if ( jQuery.isFunction( url ) )
2374:       return this.bind("load", url);
2375: 
2376:     var off = url.indexOf(" ");
2377:     if ( off >= 0 ) {
2378:       var selector = url.slice(off, url.length);
2379:       url = url.slice(0, off);
2380:     }
2381: 
2382:     callback = callback || function(){};
2383: 

2372行目にあるように引数として,url,外部サーバに渡すparams,そしてコールバック関数callbackが渡されてきます。次に2373行目ですが,もし引数urlが関数オブジェクトであれば,現在要素のonloadイベントに割り当てます。これは,load(fucntion(){..})の書式で,このイベント定義もここで行っていることが分かります。

2376行目から2380行目は,urlの後にセレクタ式が続く場合の処理で,この場合はスペースまでをurl変数,スペース以降をselector変数に格納します。

2382行目,callback変数が定義されていなければ,何もしないダミー関数を設定します。

2384:     // Default to a GET request
2385:     var type = "GET";
2386: 
2387:     // If the second parameter was provided
2388:     if ( params )
2389:       // If it's a function
2390:       if ( jQuery.isFunction( params ) ) {
2391:         // We assume that it's the callback
2392:         callback = params;
2393:         params = null;
2394: 
2395:       // Otherwise, build a param string
2396:       } else {
2397:         params = jQuery.param( params );
2398:         type = "POST";
2399:       }
2400: 

外部サーバに対するリクエストメソッドのデフォルトは,2385行目にあるように"GET"です。

2388行目以降は,第2引数paramsが設定されていて,それが関数であればcallback関数に割り当てます。そうでなければ,2836行目で定義されているjQuery.param()メソッドを使ってクエリーパラメータを組み立てます。また,リクエストメソッドを"POST"に設定します。

2401:     var self = this;
2402: 

2401行目は,self変数に自身を設定しています。

2403:     // Request the remote document
2404:     jQuery.ajax({
2405:       url: url,
2406:       type: type,
2407:       dataType: "html",
2408:       data: params,
2409:       complete: function(res, status){
2410:         // If successful, inject the HTML into all the matched elements
2411:         if ( status == "success" || status == "notmodified" )
2412:           // See if a selector was specified
2413:           self.html( selector ?
2414:             // Create a dummy div to hold the results
2415:             jQuery("<div/>")
2416:               // inject the contents of the document in, removing the scripts
2417:               // to avoid any 'Permission Denied' errors in IE
2418:               .append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))
2419: 
2420:               // Locate the specified elements
2421:               .find(selector) :
2422: 
2423:             // If not, just inject the full result
2424:             res.responseText );
2425: 
2426:         self.each( callback, [res.responseText, status, res] );
2427:       }
2428:     });
2429:     return this;
2430:   },
2431: 

2404行目からは,jQuery.ajax()メソッドを使って,実際のリクエストを行う部分になります。引数として,先ほど設定したurl,type,paramsを利用します。また2409行目以降で,Ajaxリクエストが完了した場合の処理を定義しています。2411行目,もしstatusが"success"もしくは"notmodified"ならば取得した結果を挿入します。ここで,取得した結果から絞り込みを行うためのselectorが指定されている場合は,ダミーの<div />要素を作成して一旦その中に挿入してからfilter()メソッドを適用します。ただし,Internet Explorerで発生する"Permission Denied"エラーを抑制するために予めscriptタグは除去しておきます。

最後に2426行目でcallback関数を呼び出して,戻り値として自身を返して終了です。

著者プロフィール

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

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

ブログWeboo! Returns.

コメント

コメントの記入