アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » DEVELOPER STAGE » 特集 » jquery.jsを読み解く » 第11回 jQueryライブラリ(2365行目~2529行目)

jquery.jsを読み解く

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

今回は,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.

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス