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

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

連載目次

　$.postメソッドは、HTTP POSTによる非同期通信を行います。loadメソッドにも似ていますが、あくまで$.postメソッドはHTTP POSTによる通信を行うのみで、結果の反映までを自動的に行うわけではありませんので、注意してください（結果を反映するには、コールバック関数を定義する必要があります）。

　$.postメソッドで利用できる引数は、以下のとおりです。

引数	概要
url	アクセスするURL
data	サーバに送信するデータ（「キー: 値」の形式。詳細はloadメソッドも参照）
fnc	処理成功時に実行するコールバック関数
type	応答データの種類（詳細は後日公開の$.ajaxメソッドを参照）
$.postメソッドの引数

　なお、$.postメソッドの戻り値は、（ほかの多くのjQueryメソッドとは異なり）XMLHttpRequestオブジェクトである点に注意してください。

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

* CurrentFormat.aspxのコードは、「サーバサイド・スクリプトにポスト・データを送信するには？」を参照してください。

<script type="text/javascript">

$(function() {

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

    // HTTP POSTによる非同期通信を実行
    $.post(
      './CurrentFormat.aspx', // アクセスするURL
      { format : 'yyyy年MM月dd日 HH時mm分ss秒'}, // 送信データ

      function(data, status, XHR) {
        $('#result').html(data);
      } // 処理結果を<div>要素に反映
    );
  });
});

</script>

  ……中略……

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

リスト113 サーバ側から取得した現在時刻を非同期に反映（Post.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト113の実行結果

　コールバック関数（引数fnc）は引数として、以下の情報を受け取ります。

• レスポンス本体（テキスト）
• 通信結果ステータスを表すテキスト（success、notmodifiedなど）
• XMLHttpRequestオブジェクト

　ここではサーバサイド・スクリプトから受け取ったレスポンス本体を、htmlメソッドで<div>タグに反映させているわけです。

　ここでは便宜上、$.postメソッドを利用していますが、サーバサイドから得た結果をそのままページに反映させるだけであれば、（コールバック関数を書かなくてよい分だけ）loadメソッドの方が便利です。なにかしらコールバック関数での処理が必要であるケースで$.postメソッドを利用するとよいでしょう。