jQuery: $.ajaxPrefilter (エイジャックスプレフィルター) の解説

ajaxPrefilter とは

ajax: 読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。
prefilter: 読み: プレフィルター
意味: 前置フィルター

$.ajaxPrefilter 関数の概要

この関数は、ajax 通信が開始される前にコールバック関数を使った条件分岐による通信設定の変更を行うことができます。

これに似たメソッドとして、グローバルイベントハンドラーの ajaxStart() がありますが、ajaxStart() では ajax 通信の設定を参照したコールバック関数が実行できません。しかし、$.ajaxPrefilter() は引数に ajax 通信の設定を参照したコールバック関数を実行することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$.ajaxPrefilter([dataTypes,] handler(options, originalOptions, jqXHR))

dataTypes: レスポンスで返ってくるデーター形式を文字列で指定します。複数のタイプを指定する場合は各タイプを半角スペースで区切ります。
handler: dataTypes が一致した場合に実行される関数を指定します。

目次に戻る

サンプルコードと実行結果

ここでは、 ajax 通信が開始される前に $.ajaxPrefilter() を使って条件分岐による通信設定の変更を見て下さい。

分岐の条件には select 要素で選択した "GET" 、または "POST" の値を利用しています。この条件の違いにより、通信の type プロパティと url プロパティの値を通信前に変更します。

サンプルコード: PHP ( php-get-response.php )

<?php
	$get = $_GET['sendData'];
	if(strlen($get) > 0){
		echo('GET メソッドで ' . $get . ' という値を受け取りました。');
	}
?>

ここでは、 PHP のコードの説明は割愛させていただきます。
動作内容としては、この php ファイルに GETメソッドを使って sendData というキーと値をセットで送信すると、その受信した値を php の実行により出力するというものです。

サンプルコード: PHP ( php-post-response.php )

<?php
	$post = $_POST['sendData'];
	if(strlen($post) > 0){
		echo('POST メソッドで ' . $post . ' という値を受け取りました。');
	}
?>

ここでは、 PHP のコードの説明は割愛させていただきます。
動作内容としては、この php ファイルに POSTメソッドを使って sendData というキーと値をセットで送信すると、その受信した値を php の実行により出力するというものです。

サンプルコード: CSS

<style>
	div{
		margin: 4em 0;
	}
	#idResult{
		display: block;
		background-color: ##lightblue;
		border: thin solid ##gray;
		padding: 0 1em;
	}
</style>

サンプルコード: HTML

<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<select id="idType">
		<option value="GET" label="GET"></option>
		<option value="POST" label="POST"></option>
	</select>
	<div><button id="idButton"> Start ajax communication (ajax 通信を始めます) </button></div>
	<div><output id="idResult"> The result is output here. (ここに結果が出力されます。) </output></div>
	<script>...</script>
</body>

06-09: select id="idType" (選択式の入力要素です。)
07: option value="GET" (select の選択肢です。value は "GET" です。)
08: option value="POST" (select の選択肢です。value は "POST" です。)
10: button id="idButton" (ボタンです。クリックされると ajax 通信を開始します。具体的には script コードの 18 ~ 20 行目が実行されます。)
11: output id="idResult" (出力要素です。ajax 通信により得られた結果をここに出力します。)

サンプルコード: script

<script>
	$.ajaxSetup({
		data: {"sendData": "Hello"},
		success: function(response, error){
			$("#idResult").html(error + "<br>" + response);
		}
	});
	$.ajaxPrefilter(function(options){
		if($("#idType").val() == "GET"){
			options.type = "GET",
			options.url = "./php-get-response.php"
		}
		if($("#idType").val() == "POST"){
			options.type = "POST",
			options.url = "./php-post-response.php"
		}
	});
	$("#idButton").click(function(){
		$.ajax();
	});
</script>

02-07: $.ajaxSetup() (ajax 通信の初期設定を行います。data プロパティに送信されるキーと値のペアを設定しています。また、success メソッドに通信成功時に実行される関数を設定しています。)
08-17: $.ajaxPrefilter(handler(options){ 処理 }) (ajaxPrefilter() により、ajax 通信を開始する前に条件による通信設定の変更を行っています。内容としては select 要素の選択肢によって type プロパティと url プロパティの値を設定します。)
18-20:$("#idButton").click(function(){$.ajax();}); (idButton の要素がクリックされると ajax 通信を開始を開始します。)

実行結果:
Please select a communication method. (通信メソッドを選択してください。) The result is output here. (ここに結果が出力されます。)

目次に戻る

Title

ajax 通信を開始する前に条件により設定の変更をする

目次 (INDEX)

ajaxPrefilter とは

$.ajaxPrefilter 関数の概要

構文

サンプルコードと実行結果