Ajax
Webブラウザ内でWebサーバと非同期通信を行う仕組みです。JavaScriptに組み込まれているXMLHttpRequestというAPIを使って行います。XMLHttpRequest自体はIE5の時代からありましたが、特に注目を集めるようになったのはGoogleによるGmailがリリースされたタイミングからだと思います。
使い方
XMLHttpRequestは仕組みがWebブラウザ間における差異があるため、それらを吸収した外部ライブラリを使って行うのが一般的です。例えばjQueryの場合、$.ajaxというメソッドを使って行います。
url: "/url",
type: "GET",
data: params,
dataType: "json",
success: function (data) {
// データ取得が成功した時の処理
},
error: function (data) {
// データ取得が失敗した時の処理
}
});
非同期処理
Ajaxの処理は基本的に非同期で行われます。そのため、
:
success: function (data) {
alert("2")
},
});
alert("1");
などと実行すると、まず 1 が先にアラートが出ます。そしてネットワーク上の処理が終わったら 2 というアラートが出ます。
もし同期処理にしたい場合、jQueryを使っているのであれば、 async = false にすると処理を待つようになります。
:
async: false,
success: function (data) {
alert("2")
},
});
alert("1");
こうすると 2 が先に出ます。上から処理されていくプログラミングに慣れているとこちらの方が分かりやすいかも知れませんが、ネットワーク通信が終わるまでは処理がロックされてしまうので注意が必要です。
データフォーマット
Ajaxで良く使われるデータフォーマットはXML/JSONが多いようです。例えばXMLの場合は次のようにパースします。
:
dataType: "xml",
success: function (xml) {
$(xml).find("posts").each(function(){
$("li").append($(this).find("title"));
});
},
});
JSONの場合はJavaScriptオブジェクトなのでもう少し扱いが容易です。
:
dataType: "json",
success: function (json) {
json.posts.each(function(){
$("li").append(this.title);
});
},
});
使いどころ
Ajaxの利用場面は実に多いです。特にローカルアプリケーションのようにWebブラウザ上で表現するWebアプリの場合、画面遷移を少なくするために情報をAjaxでやり取りして描画をJavaScriptで行います。これによりHTMLレンダリングを少なくすることができるのでスムーズな操作が実現できます。
サーバにとってもHTMLレンダリング処理というのが負荷が大きいので、それをJavaScriptに任せられるのはメリットが大きいです。
デメリット
AjaxはJavaScriptで行うものなので、当然ながらJavaScriptがオフになっているブラウザでは動作しません。また、前述の通りXMLHttpRequestではブラウザ間の実装差異が大きいので何らかのライブラリを用いる必要があるでしょう。
また、Ajaxにおいてはセキュリティ上の問題からクロスドメイン（別ドメイン間）でのデータ授受に制限があります。そのためサブドメインを含む別ドメインの場合、GET以外のメソッドは使えいません。また、GETにおいても別ドメインの場合はJSONではなくJSONPを使うのが一般的です（サーバの設定次第ではクロスドメインでもPOSTやJSONが使えます）。