使用Jquery原理實現一個簡單的Ajax的支持JS類

詳細 Ajax 技術對於一個 Web 開發者來說應該是很熟悉的東西了，Ajax 的出現讓 web 頁面交互有了革命化的變化。對於 Ajax 來說，JQuery 是一個不可多得的好 JS 庫，但是很多朋友並不了解 Jquery 對 Ajax 的實現過程，或者說不太了解，這點 CG 在此是不提倡的，CG 寫下面代碼一方面是為了解決一位網友的疑問，同時也希望那些如果想在 Jquery 技術上有深入提高的朋友能夠多看看 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);
}

//開始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 的朋友覺得很類似吧？