jQuery逆引きリファレンス
Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
別稿「TIPS：一般的なAjax通信を実装するには？」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるbeforeSendについて解説します。beforeSendパラメーターを利用することで、Ajax通信を送信する前に任意の処理を実行できるようになります。
具体的な例も見てみましょう。以下の例は、Ajax通信を送信する前に、現在の日時を確認し、2016年11月でない場合に「キャンペーン期間外です！」というエラーメッセージを表示し、通信自体もキャンセルします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<input type="button" id="btn" value="現在時刻" />
<div id="result"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
// ボタンクリック時にサーバーからデータを取得
$('#btn').click(function() {
$.ajax('current.php',
{
type: 'get',
dataType: 'text',
// 今日がキャンペーン期間内（この例では2016年11月の間）であるかを判定
beforeSend: function(xhr, setting) {
var current = new Date();
if (current.getFullYear() !== 2016 || current.getMonth() !== 10) {
$('#result').text('キャンペーン期間外です！');
return false;
}
}
}
)
// 取得したデータを<div id="result">要素に反映
.done(function(data) {
$('#result').text(data);
});
});
});
</script>
</body>
</html>
|
※DateクラスのgetMonthメソッドは、0～11と「0」スタートの数値を返すので注意してほしい。
beforeSendパラメーターに設定したコールバック関数では、引数として
- 通信に利用する
XMLHttpRequestオブジェクト $.ajaxメソッドでの設定情報（オブジェクト）
を受け取ります。ここでは利用していませんが、これらの引数を利用して、設定情報に応じて処理を分岐したり、XMLHttpRequestオブジェクトのフィールド／ヘッダー情報を編集したり、といった処理を表すこともできるでしょう*1。
また、何らかの条件下でAjax通信そのものをキャンセルするならば（この例であれば、キャンペーン期間外である場合）、コールバック関数の戻り値としてfalseを返すようにします。
- *1 ただし、単純なフィールド／ヘッダー追加であれば、
xhrFields／headersパラメーターを利用すべきです。
以上を理解したら、サンプルも実行してみましょう。クライアント側の日付設定も変更して、2016年11月の場合は正しく通信が発生し、さもなければエラーメッセージが表示されること（図1）を確認してください。
上を見ても分かるように、本稿で解説した日付チェックはクライアント側の日付設定に依存します。クライアントでのこのような仕掛けは、あくまでサーバーへの余計なリクエストを減らすのが目的で、最終的なチェックはサーバーサイドで行う必要があります。
API：jQuery.ajax() カテゴリ：Ajax > Low-Level Interface（低レベルインターフェース）
※以下では、本稿の前後を合わせて5回分（第59回～第63回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
59. 一般的なAjax通信を実装するには？（$.ajax）
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。
60. 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
61. 【現在、表示中】≫ Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
62. Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
63. Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
