Movable Type 備忘録

 jQueryで非同期通信(Ajax)やってみる

  • Jun222007
  • Vote:
    http://bizcaz.com/archives/2007/06/22-171010.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんにちわ^^

昨日から prototype.js -> jQuery 移行作業などやってるのですが、思うように進んでないです （つω-`｡）

早い者勝ちといいますか、わたしのサイトでは prototype.js が深く根付いてまして、prototype.js を併用したいろんなエフェクト系ライブラリや Ajax などと干渉しちゃうんです (´Д｀；) 困った。

ホントはチョビッとずつ差し替えていこうと思ってたのですが、prototype.js と jQuery は共存できないみたい!? なんです。
だから、移行するときは一気にやってしまわないとダメみたい（つω-`｡）ホント困った

prototype.js は ver1.5.1.1 のサイズが 96KB 以上あります。
これに各エフェクト・ライブラリ(scriptaculous.js など)をあわせると余裕で 100KB を超えます。

もぅこんな重たいライブラリ使いたくないよ･･･と思いつつも、やっぱり Ajax フレームワークとしては prototype.js は外せない位置づけにあるのかなぁ。
まるで、どっかの、ダメダメなブラウザみたいです (^▽^;)

とりえあず、まだ作業中ですけど jQuery を使った非同期通信(Ajax)について分かったことをメモしておきます。

jQuery で非同期通信

jQuery では、Ajax でもカンタンに使うことができました。
諸事情によりサンプルは載せませんが、 以下のサンプル・ページ中の「非同期通信開始」というリンクをクリックしてください。そうすると、Ajax による非同期通信を確認することができます。
サンプル

以降で prototype.js と jQuery による Ajax を比較してみたいと思います。

こちらのAjaxでIFRAME的な表示をやってみるで紹介してる、外部ファイルを Ajax で読み込むコードをベースにして説明します。

prototype.js

  1. function ajax_content_onload_get(url, params)
  2. {
  3.     /* 'ajax_block' で示すエリアをクリアします */
  4.     document.getElementById('ajax_block').innerHTML = '';
  5.  
  6.     /* 'ajax_progress' で示す Ajax Loader イメージを表示して、
  7.      * 処理中を促します
  8.      */
  9.     document.getElementById('ajax_progress').style.display = '';
  10.  
  11.     /* 引数 'params' を伴って、引数 'url' へ GET による
  12.      * 非同期通信します
  13.      * 処理完了後 'ajax_content_complete' を呼び出します
  14.      */
  15.     var myAjax = new Ajax.Request(url, {
  16.                                         method: 'get',
  17.                                         parameters: params,
  18.                                         onComplete: ajax_content_complete
  19.                                         });
  20.     return false;
  21. }
  22.  
  23. function ajax_content_complete(req)
  24. {
  25.     /* Ajax Loader を非表示します */
  26.     document.getElementById('ajax_progress').style.display = 'none';
  27.  
  28.     /* 取得したデータを 'ajax_block' に反映します */
  29.     document.getElementById('ajax_block').innerHTML = req.responseText;
  30. }

上記は、従来の prototype.js を使用した Ajax による非同期通信のコードになります。 ざっくりですがコメント入れてみました。

次に jQuery を使用した Ajax による非同期通信のコードを以下に記します。

jQuery

  1. function ajax_content_onload_get(url, params)
  2. {
  3.     /* '#ajax_block' で示すエリアをクリアします */
  4.     $('#ajax_block').html('');
  5.  
  6.     /* '#ajax_progress' で示す Ajax Loader イメージを表示して、
  7.      * 処理中を促します
  8.      */
  9.     $('#ajax_progress').css('display', 'block');
  10.  
  11.     /* 引数 'params' を伴って、引数 'url' へ GET による
  12.      * 非同期通信します
  13.      * 処理完了後 インライン関数(function)を実行します
  14.      */
  15.     $.get(url, params, function(message, status) {
  16.  
  17.         /* Ajax Loader を非表示します */
  18.         $('#ajax_progress').css('display', 'none');
  19.  
  20.         /* 正常終了(success)した場合に限り、取得したデータを
  21.          * '#ajax_block' に反映します
  22.          */
  23.         if ('error' != status)
  24.             $('#ajax_block').html(message);
  25.     });
  26.  
  27.     return false;
  28. }

同じくコメント入れましたので詳しいことは省きますが、一目瞭然ですね。
やっぱり jQuery の方がスッキリしてますし、コードをみて直感的にどのタグに対して何の処理をしようとしているのか分かります。

また、XHTML 側で渡すパラメータの記述も prototype.js と jQuery とでは異なります。

prototype.js

  1. <a href="javascript:void(0)" onclick="ajax_content_onload_get('http://●●●/▲▲▲.php', 'blogid=1&amp;type=2')">非同期通信開始</a>

青い字の部分が通信したいサーバサイド側のファイルだったり、プログラムの URL になります。
そして、赤い字の部分がパラメータになります。

次に jQuery の場合を以下に記します。

jQuery

  1. <a href="javascript:void(0)" onclick="ajax_content_onload_get('http://●●●/▲▲▲.php', {blogid: 1, type: 2})'>非同期通信開始</a>

青い字の部分は prototype.js と同じです。
赤い字の部分がパラメータになりますが、'Key: value' を対とする MAP による指定になっています。
参考：API/1.1.2/Ajax

このように、prototype.js と jQuery ではだいぶ違うことが分かりました。
また、前でもチョビッと触れましたが、わたしのサイトに限ったことなのか、場合によっては両者の共存ができないことがありました。

以上です。

 Trackback Pings(1)

from イヌワシネット

jQueryを利用したAjaxサンプル：JSON形式のデータを受け取る。

Tracked on March 19, 2009

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード