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

ｊQueryにおいて、Ajax関連操作のコアである「$.ajaxメソッド」についてまとめた、すぐに役立つ9本を一挙公開。

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

連載目次

　$.ajaxメソッドでは、beforeSendパラメータにコールバック関数を指定することでAjaxリクエストを送信する前に行うべき処理を定義できます。

　例えば以下は、Ajaxリクエスト前に現在時刻をチェックし、9時前19時以降である場合には、通信をキャンセルするという例です。ただし、ここでいう時刻とは、あくまでクライアント環境での時刻であり、クライアントの時刻設定に依存する点には注意してください*1。

*1 つまり、時間外にサービスにアクセスさせたくないという場合、サーバサイドでもきちんと時刻チェックを行う必要があるということです。

<script type="text/javascript">

$(function() {

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

    // Ajax通信を実行
    $.ajax({
      url: './CurrentFormat.aspx', // アクセス先のURL
      type: 'POST', // HTTP POSTで通信
      dataType: 'html', // 応答の型

      data: {
        format: 'yyyy年MM月dd日 HH時mm分ss秒' // ポスト・データ
      },

      // 通信前に時刻をチェックし、時間外である場合は通信を中止
      beforeSend: function(xhr) {
        var d = new Date();
        if (d.getHours() < 9 || d.getHours() > 18) {
          $('#result').html('サービス時間外です。');
          return false;
        }
      },

      // 通信成功時には応答データを<div>要素に反映
      success: function(data) {
        $('#result').html(data);
      }
    });
  });
});

</script>

  ……中略……

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

リスト122 指定時間外にはAjax通信を中断（AjaxBefore.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

特定時間内には通常の結果を表示

時間外には通信を中断したうえでエラー・メッセージ表示

リスト122の実行結果

　Ajaxリクエストを中止するには、beforeSendコールバック関数で戻り値としてfalseを返すだけです。

　beforeSendパラメータは、このほかにもAjaxリクエストに必要なデータやリクエスト・ヘッダを追加するのに利用できます。リクエスト・ヘッダを追加する方法については、「非同期に読み込んだコンテンツをそのままページに反映させるには？」の例も参考にしてください*2。

*2 ここで紹介しているのはajaxSendイベントの例ですが、記述の方法はほぼ同じです。