第9回 Ajax編(後編)連載:jQuery逆引きリファレンス(3/10 ページ)

» 2010年07月30日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 $.ajaxメソッドでは、asyncパラメータを指定することで同期通信/非同期通信のどちらで通信を行うかを切り替えることができます。

 以下のサンプルで具体的な挙動を確認してみましょう。リスト121は、[スクリプト実行]ボタンをクリックしたタイミングでサーバサイド・スクリプト(Progress.aspx*)に対して通信を行い、その結果をページ末尾に反映させるコードです。

* Progress.aspxのコードは、「Ajax通信にかかわるイベント・リスナを登録するには?」を参照してください。


<script type="text/javascript">

$(function() {

  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {

    // Ajax通信を実行
    $.ajax({
      url: './Progress.aspx', // アクセス先のURL
      async: false, // 非同期通信を行うか
      success: function(data) {
        $('body').append(data + "<br />");
      } // 成功時にサーバからの応答をページ末尾に追加 (1)
    });

    // ページ末尾に文字列を追加 (2)
    $('body').append("JavaScriptの出力です。<br />");
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="通信実行" />
</form>

リスト121 $.ajaxメソッドで同期通信/非同期通信を実行(AjaxAsync.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

async=true(非同期)の場合

async=false(同期)の場合

リスト121の実行結果


 リスト121の太字部分を書き換えて、結果の違いを確認してみましょう。

 asyncパラメータをtrue(非同期)にした場合には、(2)のコードが非同期に実行されて先に表示され、その後、遅れて取得した(1)の結果が表示されることが確認できます。

 一方、asyncパラメータをfalse(同期)とした場合には、Ajax通信の間、後続の処理は待ち状態になりますので、(1)(2)の順で文字列が表示されることが確認できます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。