Ajaxとは非同期通信を行う仕組みのことです。
Asynchronous JavaScript + XML の略だそうです。
Asynchronous は非同期という意味なので、JavaScript を使って非同期通信を行うということです。XMLは分かりません(笑)
非同期通信というのは、WEBページをリロードせずにHTTP通信を行うということです。
通常のHTTP通信は、リンクなどで画面遷移を行うときですが、このとき一度画面が一瞬消えて次の画面のHTMLをロードしページが開きます。
このときchromeだったら更新ボタンが×になったりタブのファビコンの部分がくるくる回っていたりします。
これをせずにHTTP通信を行い結果を得るということです。
jQueryでAjaxを使う場合の基本
jQueryでAjaxを使う場合、用途ごとにいくつかメソッドが用意されています。
例えばGETリクエストによってAjax送信する場合は $.get(); を使い、外部のHTMLを読み込む場合は $.load(); などがあります。
しかし、汎用的に全てのことに対応する $.ajax(); というのがあるのでこれだけ知っていれば僕は充分だと思います。
$.ajax(オプション);
オプション部分も入れたサンプルは次に説明します。
Ajaxのサンプルコード
$.ajax({
type: "POST",
url: 'sample.php',
data: {"yourname": "田中"},
dataType: html, //通信結果を受け取らない場合はfalse
async: true,
beforeSend: function(xhr, settings) {
// ajax送信前の処理
},
complete: function(xhr, status) {
// ajax応答後の処理
},
success: function(data) {
// ajax通信成功時の処理
},
error: function(xhr, status, error) {
// ajax通信成失敗の処理
}
});
Ajaxは基本的にはこのような形で動きます。
解説は次に。
サンプルコードの解説
type
typeはHTTP通信の種類を指定します。
FormをAjaxで送信する場合はPOSTを指定します。
何も指定しないと “GET” になります。
url
送信先のURLです。
data
urlで指定した送信先へ送るデータです。
[aside type=”normal”]{プロパティ:値, プロパティ:値,・・・}[/aside]
このように{}で囲みカンマ区切りでデータを指定して送ります。
formの入力データをそのままセットする場合には、$(“form”).serialize() のように書けば通常のPOST送信のように遅れます。
dataType
Ajaxを実行後に受け取るデータのタイプを指定します。
[aside type=”normal”]text, html, xml, script, json, false[/aside]
データのタイプには上記のようなものがあります。
何も指定しなければAjaxが自動的に判断します。
何も受け取らない場合には false を指定します。
async
非同期通信をするかどうかの指定が出来ます。
何も指定しないと true (非同期通信) になります。
Ajaxを利用する場合は通常非同期通信だと思いますし、僕はこの行すらいつも省略しています。
beforeSend
Ajax送信を開始する前に行う処理を記載します。
例えばボタンの二重押下防止に、ボタンをロックしたりします。
complete
応答結果が正常・エラーに関係なく実行されます。
例えばロックしたボタンを元に戻す処理などを行います。
success
正常にAjax通信が行われた場合の処理です。
何かしらAjax処理後のデータを受け取った場合はここで処理します。
error
Ajax通信が異常終了した場合の処理です。
この場合のエラーは入力チェックなどのシステム仕様的なエラーでは無く、システムの不具合により正常に処理が終了できなかった場合のエラーのことです。
システム管理者にエラーログをメール送信したりします。
外部HTMLを読み込みページに埋め込むサンプル
別のHTMLファイルに定義したHTMLを読み込み、読み込み元ページに埋め込むサンプルを作成しました。
HTML
<section>
<input type="button" id="btna" value="ボタンA" />
<div id="idname">
<div id="inner"></div>
</div>
</section>
JS
$('#btna').click(function() {
$.ajax({
url: "sample020sub.html",
success: function(data) {
$('#idname').html(data);
}
});
});
sample020sub.html
<div id="idname2"> <p>別ファイル読み込み</p> </div>
[btn class=”simple”]サンプルページ[/btn]
#btna のボタンを押すと sample020sub.html を読み込み、#idname の中に埋め込みます。
このとき、#inner は消えてなくなります。
まとめ
AjaxとはJavaScriptを使い非同期で通信する仕組みのことです。
Ajaxの実行には以下の ajax() を利用します。
[aside type=”normal”]$.ajax({オプション});[/aside]
コメント