李大仁博客

详细 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);
}

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;
}
});
}