ajax とは
- ここで説明する ajax とは次の語句からなる jQuery の関数です。
- ajax
- 読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。
$.ajax 関数の概要
この関数は、HTML の form 要素内の input 要素 submit 型などを介して送信するGETメソッド、または POST メソッドを jQuery を使用して非同期に通信 (送信と受信) を行うことができます。 これは javascript で XMLHttpRequest (XHR) を使用して通信を行うのと同等であるため、 これを jQXHR という呼び方をすることがあります。
サーバーにリクエストを送信する際に使用する POST 送信と GET 送信という通信メソッドがありますが、 この $.ajax 関数は設定により、どちらかのメソッド選択することができます。
GET 送信は軽量のデータを送信することに向いています。
これは送信先の URL の末尾に ? から始まるパラメータを付加してデーターを送信する方法であるため、その他の情報を含めません。
一方、POST 送信は GET のように URL にパラメータを含めることはありません。
しかし、POST 送信は リクエスト元のヘッダー情報とパラメータを含めたボディ情報の両方を送信しますので、
リクエストの内容によってはサーバーへの負荷は多いかもしれません。
GET , POST のどちらを選択するかは、データーの種類や転送量で決めることになるかもしれませんが、 とりあえず、単純なテキストデーターの送信なら GET 、大容量のデータファイルの転送なら POST という具合に覚えておいてください。
構文
サンプルを見る前に構文を確認しておきます。
$.ajax(url [, settings]);
$.ajax([settings]);
サンプルコードと実行結果
ここでは $.ajax 関数を使って sql-select.php というファイルにリクエストします。
この php ファイルにはデータベースに SQL を発行し、テーブルデータを表示するためのコードが書かれています。
サンプルコード: PHP file ( sql-select.php )
<?php
error_reporting(0);
$hostName = "サーバー名";
$dbName = "データベース名";
$charSet = "utf8";
$userName = "ユーザー名";
$passWord = "パスワード";
$sql = "";
$dataSourceName = "mysql:host={$hostName}; dbname={$dbName}; charset={$charSet}";
$sql = $_POST['sql'];
if(strlen($sql) > 0){
try{
$objPDO = new PDO($dataSourceName,$userName,$passWord,null);
if ($objPDO == null){
print '接続に失敗しました。<br>';
}
else{
print "接続に成功しました。<br>";
print("sql > ".$sql."<br>");
}
$stmt = $objPDO -> query($sql);
$columns = array();
for ($i = 0; $i < $stmt->columnCount(); $i++) {
$meta = $stmt->getColumnMeta($i);
$columns[] = $meta['name'];
}
print("<table><tr>");
for($i=0;$i<count($columns);$i++){
print("<th>{$columns[$i]}</th>");
}
while($result = $stmt -> fetch(PDO::FETCH_BOTH)){
print("<tr>");
for($i=0;$i<count($columns);$i++){
print("<td>{$result[$columns[$i]]}</td>");
}
print("</tr>");
}
print("</table>");
}
catch(PDOException $e){
print("接続に失敗しました。<br>");
print("sql > ".$sql."<br>");
die();
}
finally{
$objPDO = null;
}
}
?>
- 10: $sql = $_POST['sql']; (この $_POST['sql'] の部分で ボタン に書かれた クエリ を受信しています。)
- その他の説明 (このコードは PHP のPDO オブジェクトを使ってデータベースに接続し、クエリーのレスポンスを表示するものです。PHPコード の細かな説明については、このページでは割愛させていただきます。)
サンプルコード: CSS
<style>
#idResponse{
padding: 0.5em;
border: thin solid ##darkgray;
width: 95%;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="button" value="SELECT * FROM japan;" id="idButton">
<br>
<div id="idResponse">ここに実行結果を表示します。</div>
<script>...</script>
</body>
- 06: input id="idButton" (このボタンをクリックすると ajax 通信が開始されます。 送信されるデーターは SELECT * FROM japan; という SQL になります。)
- 08: div id="idResponse" (送信の結果を この div コンテナーに表示します。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$.ajax({
type:"POST",
url:"./sql-select.php",
data:{"sql" : $("#idButton").val()}
})
.done(function(results){
//通信成功で実行される処理
$("#idResponse").html(results);
})
.fail(function(results){
//通信が失敗した時に実行される処理
})
.always(function(results){
//通信の成功と失敗に関わらず実行される処理
});
});
</script>
- 04: type:"POST" (リクエストに POST メソッドを使用します。)
- 05: url:"./sql-select.php" (リクエスト先の URL (ファイル名) です。)
- 06: data:{"sql" : $("#idButton").val()} ("sql" というキー と ボタン要素に記してある SQL をセットで送信します。)
- 08-11: done(function(results){ 関数の処理 } (通信成功時に実行される関数です。)
- 12-14: fail(function(results){ 関数の処理 } (通信失敗時に実行される関数です。)
- 15-17: fail(function(results){ 関数の処理 } (通信の成功と失敗に関わらず実行される関数です。)
実行:
応答: id="idResponse"
応答: id="idResponse"
ここに実行結果を表示します。
このページでは $.ajax 関数でデータベース接続ページに送信しましたが、form 要素から単純に POST 送信したものが、 SELECT文の基本的な使い方 のページになります。 リンク先にも同じようなボタンがありますので、参考になれば幸いです。
$.ajax 関数の設定 settings 一覧
| 設定 [デフォルト] | 概要 |
|---|---|
| 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'] | サーバーにデータを送信する場合のコンテンツタイプです。この項目は特に設定する必要はありません。 |
| context | Ajax 関連のすべてのコールバックのコンテキストです。 |
| converters [{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}] | データ型の変換を含むオブジェクト。各コンバータの値はレスポンスの変換された値を返す関数です。 |
| crossDomain [true] | 同じドメインでクロスドメインリクエストを強制する場合は、crossDomain の値を true に設定します。 |
| data | 送信するキーと値のペアを設定します。値にはオブジェクト型、または文字列型か配列を使用できます。 |
| dataFilter | XMLHttpRequest の生の応答データを処理するために使用される関数です。これはレスポンスをサニタイズするためのフィルタリング機能です。 |
| 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 リクエストでコールバック関数名をオーバーライドします。 |
| jsonpCallback | JSONP リクエストのコールバック関数名を文字列か関数で指定します。この値は、jQuery によって自動的に生成されるランダムな名前の代わりに使用されます。 |
| method [GET] | リクエストに使用する HTTP メソッドを設定します。 |
| mimeType | XHR MIME タイプをオーバーライドする文字列を指定します。 |
| password | HTTP アクセス認証リクエストに応答して 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 を使用している場合は、これを使用します。 |
| username | HTTP アクセス認証リクエストに応答して XMLHttpRequest で使用されるユーザー名を文字列で設定します。 |
| xhr [IE において ActiveXObject が利用可能な場合はそれを、それ以外の場合は XMLHttpRequest ] | オブジェクトを作成するためのコールバックです。使用可能な場合は ActiveXObject (IE)、それ以外の場合は XMLHttpRequest に設定されます。オーバーライドして XMLHttpRequest の独自の実装、またはファクトリの拡張を提供します。 |
| xhrFields [withCredentialsXHR] | ネイティブオブジェクトに設定するフィールド名とフィールド値のペアのオブジェクトです。 |
コールバック関数の呼び出し方
| 呼び出し条件 | 説明 |
|---|---|
| beforeSend | 通信が始まる前に呼び出される関数を設定します。 return falseで通信キャンセル |
| success | 通信成功時に呼び出される関数を設定します。 戻り値:(応答値, 通信成果, jQXHR) |
| error | 通信エラー時に呼び出される関数を設定します。 戻り値:(XHR, 失敗内容, 補足) |
| complete | 通信終了時に呼び出される関数を設定します。 戻り値:(XHR, 通信成果) |
サンプルコード: script (コールバック関数の使用例)
<script>
$.ajax({
type:"POST",
url:"./sample.php",
data:{"キー" : "値"},
beforeSend: function(xhr, setting){
//条件を指定して通信をキャンセルする
if(通信キャンセルの条件式){
return false;
}
},
success: function(results){
//通信成功時に実行される処理
},
error: function(results){
//通信が失敗した時に実行される処理
},
complete: function(results){
//通信の成功と失敗に関わらず実行される処理
}
});
</script>