Home > 移动互联, 语言编程 > 使用Jquery原理实现一个简单的Ajax的支持JS类

使用Jquery原理实现一个简单的Ajax的支持JS类

详细Ajax技术对于一个Web开发者来说应该是很熟悉的东西了,Ajax的出现让web页面交互有了革命化的变化。对于Ajax来说,JQuery是一个不可多得的好JS库,但是很多朋友并不了解Jquery对Ajax的实现过程,或者说不太了解,这点CG在此是不提倡的,CG写下面代码一方面是为了解决一位网友的疑问,同时也希望那些如果想在Jquery技术上有深入提高的朋友能够多看看Jquery源代码。


下面是简单实现的一个Ajax支持类,有不明白的话可以发起提问和留言。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/**
 * 名称: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的朋友觉得很类似吧?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
        }
    });
}
  1. No comments yet.
  1. No trackbacks yet.