詳細な Ajax 技術は、Web 開発者にとっては非常に馴染みのあるものであり、Ajax の登場により、Web ページのインタラクティブ性が革命的に変化しました。Ajax に関しては、JQuery は非常に優れた JS ライブラリですが、多くの人々は Jquery による Ajax の実装プロセスを理解していないか、あまり理解していないかもしれません。CG は、以下のコードを書いた理由の一つは、あるユーザーの疑問を解決するためであり、同時に Jquery のテクニックをより深く理解したいと思っている人々にも参考になることを願っています。
以下は、シンプルな Ajax サポートクラスの実装です。わからないことがあれば、質問やコメントを投稿してください。
/**
* 名称：Ajax サポート javascript クラス
* 機能：ページに Ajax サポートを実装するためのもので、Ajax リクエストを簡単にラップします
* 作成日：2010-01-14
* 作者：CG
*/
// 以下は共通の関数またはオブジェクトです
//IE かどうか
var isIE = (document.all) ? true : false;
//$ id セレクター
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//Class クラスオブジェクト
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
};
// イベント関数のバインド
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
};
// グローバル Ajax オブジェクト
//AjaxSupport オブジェクトから呼び出されます
var $ajax = function(obj){
// エラーメッセージ
if(undefined == obj.error){
obj.error = ajaxError;
}
// 新しいオブジェクトを作成します。ここではシングルトンを使用してリソースの消費を減らすことができます
new AjaxSupport(obj);
};
// 共通の Ajax エラー表示
function ajaxError(msg){
alert(msg);
}
var AjaxSupport = Class.create();
AjaxSupport.prototype ={
/** 初期化メソッド
* パラメータ: obj 呼び出しオブジェクト
*/
initialize: function(obj){
this._xmlHttp = null;
//URL オブジェクト
this._url = obj.url;
// リクエストメソッドオブジェクト
this._method = obj.method;
// リクエスト方式
this._asyn= obj.asyn;
// リクエストデータ
this._data= obj.data;
// リクエスト成功
this._success = obj.success;
// エラー
this._error = obj.error;
//HttpRequest の初期化
this._initHttpRequest();
// リクエストの開始
this._ajaxRequest();
},
// リクエストステータスの変化
_readyStateChange: function() {
//4 の場合のみ判断し、他の場合は別途設定する必要があります
if(4 == this._xmlHttp.readyState){
// リクエスト成功
if(200 == this._xmlHttp.status){
if(undefined != this._success){
// リクエストを呼び出し元に送信します
this._success(this._xmlHttp.responseXML);
}
}
// エラー、または結果が 200 以外の場合
else{
if(undefined != this._error){
this._error("Error Internal Error!");
}
}
}
},
//Ajaxリクエストの開始
\_ajaxRequest: function() {
//リクエストを開く
try{
//リクエストを開く
this.\_xmlHttp.open(this.\_method , this.\_url ,this.\_asyn);
}catch(e){
//リクエストを開くエラー
if(undefined != this.\_error){
this.\_error("Error:Openning Ajax Request Error!");
}
}
try{
//リクエストを送信する
this.\_xmlHttp.send(this.\_data);
}
catch(e){
//データ送信エラー
if(undefined != this.\_error){
this.\_error("Error:Sending Ajax Request Error!");
}
}
},
//HttpRequestオブジェクトの初期化
\_initHttpRequest: function(){
//HTTPReqestの初期化
if(!isIE){//FF opera safari
this.\_xmlHttp = new XMLHttpRequest();
}else{//IE
try{//IE6+
this.\_xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{//IE5.5+
this.\_xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
//ブラウザがサポートされていません
if(undefined != this.\_error){
this.\_error("Sorry! Your Browser dose not Support Ajax!");
}
}
}
}
//イベントのバインド
if(null != this.\_xmlHttp) {
//ステータス変更イベントをバインドします
this.\_xmlHttp.onreadystatechange = Bind(this, this.\_readyStateChange);
}else{
//イベントのバインドエラーメッセージをバインドします
if(undefined != this.\_error){
this.\_error("Error: init Ajax Object Error!");
}
}
}
}
以下はシンプルな呼び出しコードです。Jquery を使用したことがある人は、非常に似ていると思います。
function testAjax() {
var req = "text=" + $("txtName").value;
// オブジェクトを呼び出して Ajax をテストします
$ajax({
url:"AjaxTest",
method:"post",
asyn,
data,
success: function(obj){
// ここではデータをテスト出力し、XML 解析は行いません
$("msg").innerHTML = obj;
},
error: function(msg){
// エラーメッセージの表示
$("msg").innerHTML = msg;
}
});
}