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

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:Server 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:true,
        data:req,
        success: function(obj){
        //这里测试输出数据，不作XML解析
            $("msg").innerHTML = obj;
        },
        error: function(msg){
        //错误信息显示
            $("msg").innerHTML = msg;
        }
    });
}