ywork2020.com

Title

ajax 通信のデフォルト設定を変更する

目次 (INDEX)

ajaxSetup とは

ここで説明する ajaxSetup とは次の語句からなる jQuery の関数です。
ajax
読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。
setup
読み: セットアップ
意味: 設定、組み立て、配置

目次に戻る

$.ajaxSetup 関数の概要

この関数は、実行したページにおける ajax 通信のデフォルト設定値を変更します。

これは、あくまでもデフォルト値の設定なので、通信毎にコードの後記述による変更は可能です。 ただし、通信毎の設定に省略したプロパティやメソッドは このデフォルト値を採用して実行されることになります。

関数の引数には Object 、またはオブジェクト型による キー と 設定値 のペアが必要です。

このデフォルト値の設定を行っておくことによってコードの記述を削減できる可能性は多いにあります。

目次に戻る

構文

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

$.ajaxSetup(options)

options については、このページに一覧表を設けています。

目次に戻る

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

ここでは、$.ajaxSetup() にを使って ajax 通信のデフォルト設定を 3項目変更しました。

  • url: 通信先ページの URL
  • type: 通信に使用される通信メソッド
  • success: 通信が成功したときに実行される関数

data: は送信毎に送られるデータなので ajax() を実行する毎に設定しています。


サンプルコード: 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: 1.5em 0;
	}
	button{
		cursor: pointer;
	}
	#idReceive{
		display: block;
		background-color: ##white;
		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>
	<div><button id="idHello"> send Hello </button></div>
	<div><button id="idWorld"> send World </button></div>
	<div><output id="idReceive"> Waiting for send </output></div>
	<script>...</script>
</body>
  • 06: button id="idHello" (このボタンがクリックされると script コードの 09 ~ 13 行目が実行されます。)
  • 07: button id="idWorld" (このボタンがクリックされると script コードの 14 ~ 18 行目が実行されます。)
  • 08: output id="idReceive" (この要素のコンテンツに ajax 通信の結果が表示されます。)
サンプルコード: script 
<script>
	$.ajaxSetup({
		type: "POST",
		url: "php-post-response.php",
		success: function(receives){
			$("#idReceive").html(receives);
		}
	});
	$("#idHello").click(function(){
		$.ajax({
			data: {"sendData" : "Hello"}
		});
	});
	$("#idWorld").click(function(){
		$.ajax({
			data: {"sendData" : "World"}
		})
	});
</script>
  • 02-08: $.ajaxSetup({ key : value [, key : value ]... }) (ajax の初期設定を行っています。)
実行結果:
送信:
送信:
受信: id="idReceive"
Waiting for send

目次に戻る

ajax 通信の設定 options 一覧

設定 [デフォルト]概要
url
[現在のページ]		リクエストの送信先 URL を設定します。
acceptsリクエストヘッダーで送信される MIME タイプに対して指定されたタイプをマップするキーと値ペアのセットです。
async
[true]		非同期するかどうかを true または false で設定します。
beforeSendリクエストの実行前に呼び出されるコールバック関数です。
cache
[true ( dataType が 'script' と 'jsonp' の場合は false )]		通信結果のキャッシュを true または false で設定します。
completeリクエストが完了したときに呼び出される関数です。
contentsレスポンスを解析する方法を決定する文字列、または正規表現です。
contentType
['application/x-www-form-urlencoded; charset=UTF-8']		サーバーにデータを送信する場合のコンテンツタイプです。この項目は特に設定する必要はありません。
contextAjax 関連のすべてのコールバックのコンテキストです。
converters
[{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}]		データ型の変換を含むオブジェクト。各コンバータの値はレスポンスの変換された値を返す関数です。
crossDomain
[true]		同じドメインでクロスドメインリクエストを強制する場合は、crossDomain の値を true に設定します。
data送信するキーと値のペアを設定します。値にはオブジェクト型、または文字列型か配列を使用できます。
dataFilterXMLHttpRequest の生の応答データを処理するために使用される関数です。これはレスポンスをサニタイズするためのフィルタリング機能です。
dataType
[自動判別 ( xml, json, script, html )]		サーバーから戻ってくるデータの種類です。設定しない場合、jQuery は応答の MIME タイプに基づいてそれを推測しようとします。
errorリクエストが失敗したときに呼び出される関数です。
global
[true]		リクエストに対してグローバル Ajax イベントハンドラーをトリガーするかどうかを真偽値で設定します。
headers
[{}]		XMLHttpRequest トランスポートを使用してリクエストと共に送信する追加のヘッダーをキーと値ペアで設定します。ヘッダーは常に追加されますが、既定値をここでは変更することができます。関数内から設定の上書きをすることもできます。
ifModified
[false]		最後のリクエスト以降に応答が変更された場合にのみ、リクエストが成功することを許可します。これは最終変更ヘッダーをチェックすることによって行われます。
isLocal
[現在のロケーションプロトコル]		jQuery がデフォルトで認識しない場合に、現在の環境をローカルなファイルシステムなどで認識できるようにします。
jsonp
[{jsonp:'onJSONPLoad'}'onJSONPLoad=?'jsonpfalsejsonpCallback{ jsonp: false, jsonpCallback: "callbackName" }jsonpfalse]		JSONP リクエストでコールバック関数名をオーバーライドします。
jsonpCallbackJSONP リクエストのコールバック関数名を文字列か関数で指定します。この値は、jQuery によって自動的に生成されるランダムな名前の代わりに使用されます。
method
[GET]		リクエストに使用する HTTP メソッドを設定します。
mimeTypeXHR MIME タイプをオーバーライドする文字列を指定します。
passwordHTTP アクセス認証リクエストに応答して XMLHttpRequest で使用されるパスワードを文字列で設定します。
processData
[true]		オプションにオブジェクトとして渡されたデータです。特に設定する必要はありません。
scriptAttrs"script" または "jsonp" リクエストで使用される追加の属性を持つオブジェクトを定義します。キーは属性の名前を表し、値は属性の値です。このオブジェクトが指定されている場合、スクリプト タグ トランスポートの使用が強制されます。
scriptCharsetリクエストで使用されるスクリプトタグの属性を設定します。ローカルページの文字セットがリモートスクリプトの文字セットと同じでない場合に使用されます。
statusCode
[{}]		レスポンスに対応するコードがある場合に呼び出される数値 HTTP コードと関数のセットをオブジェクト型で設定します。例えば、応答の状態が 404 の場合、404 キーとなり、それに対応する関数を指定することで "page not found" などのメッセージを表示することができます。
successリクエストが成功した場合に呼び出される関数です。
timeoutリクエストのタイムアウトをミリ秒単位で設定します。0 はタイムアウトがないことを意味します。これにより、$.ajaxSetup()で設定されたグローバルタイムアウトがオーバーライドされます。
traditional従来のパラムシリアル化を使用するかどうかを設定します。
type
[GET]		method と等価です。1.9.0 より前のバージョンの jQuery を使用している場合は、これを使用します。
usernameHTTP アクセス認証リクエストに応答して XMLHttpRequest で使用されるユーザー名を文字列で設定します。
xhr
[IE において ActiveXObject が利用可能な場合はそれを、それ以外の場合は XMLHttpRequest ]		オブジェクトを作成するためのコールバックです。使用可能な場合は ActiveXObject (IE)、それ以外の場合は XMLHttpRequest に設定されます。オーバーライドして XMLHttpRequest の独自の実装、またはファクトリの拡張を提供します。
xhrFields
[withCredentialsXHR]		ネイティブオブジェクトに設定するフィールド名とフィールド値のペアのオブジェクトです。

目次に戻る