第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（4/11 ページ）

ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　loadメソッドでは、引数dataを指定することでサーバサイド・スクリプトに対して、データを送信することができます*。

　具体的なサンプルも見てみましょう。以下では、［現在時刻］ボタンをクリックしたタイミングでサーバサイド（.aspxファイル）から現在時刻を取得し、ページに反映します。この際、クライアントサイド・スクリプトから時刻表示のための書式文字列をデータとして送信します。

* loadメソッドはデフォルトでHTTP GETによる通信を行いますが、引数dataが指定された場合にはHTTP POSTで通信します。

<%@ Page Language="VB" %>
<%=DateTime.Now.ToString(Request.Form("format"))%>

リスト109 指定されたポスト・データformatを基に現在時刻を整形（CurrentFormat.aspx）

<script type="text/javascript">

$(function() {

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

    // CurrentFormat.aspxの処理結果をページに反映
    $('#result').load('./CurrentFormat.aspx',

      // 送信するデータ
      { format : 'yyyy年MM月dd日 HH時mm分ss秒'} );
  });
});
</script>

  ……中略……

<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>

リスト110 サーバサイド・スクリプトにポスト・データを送信（LoadPost.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト110の実行結果