連載
» 2010年06月25日 00時00分 公開

連載:jQuery逆引きリファレンス:第8回 Ajax編(前編) (7/11)

[山田祥寛(http://www.wings.msn.to/),著]



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

連載目次


 $.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メソッドを利用するとよいでしょう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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