首页 > 代码库 > XHR工厂的实现

XHR工厂的实现

2024-07-06 05:07:23   225人阅读

　　ajax这种常见的开发模式已经遍布我们日常的开发之中了，ajax本质还是采用一种轮询的模式，就是隔一段时间去发送一次http请求，获取数据，然后显示在页面之上，当然，ajax比起新兴的WebScoket肯定是差了一截，WebScoket基于握手协议，是一种全双工的通信。

　　目前，很多javascript库都实现了对ajax完善的支持，像jQuery, Ext, Mootools, prototype等。平时是不是就简单的调用一下$.ajax()或者$.post()就轻松的实习了一次ajax请求了呢？如果你过于依赖jQuery等类库的话，你可能会忽略ajax的原生实现。下面我来谈谈ajax的原生实现。

　　ajax中的核心对象是XMLHttpRequest。像Firefox、 chrome、 opera、 safari等浏览器可以直接通过new XMLHttpRequest()创建，IE6及IE6以下不支持这种方式创建，但是可以通过new ActiveXObject()创建。常见的HTTP状态码中，200表示请求已经发送成功，readyState一共有5种状态，0表示未连接，1表示打开连接，2表示发送请求，3表示交互，4表示完成交互并接手响应。了解了这些预备知识，我们就可以实现一个XHR工厂了。

?
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
var AjaxHandler = new Interface("AjaxHandler",["request", "createXObject"]);
var XHRFactory = function() {};
XHRFactory.prototype = function() {
    request: function(method, url, callback, postvar) {
        var xhr = this.createXObject();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4) {
                (xhr.status == 200)?(callback.success(xhr.responseText,xhr.ResponseXML)):(callback.failuse(xhr.status));
                xhr.open(method, url, callback);
                if(method !== "POST") postvar = null;
                xhr.send(postvar);
            }
        }
    },
    createXObject: function(){
        var methods = [function(){return new XMLHttpRequest()},
                       function(){return new ActiveXObject("Microsoft.XMLHTTP")},
                       function(){return new ActiveXObject("Msxml2.XMLHTTP")}
                       ];
        for(var i = 0, len = methods.length; i < len; i++) {
            try{
                methods[i];
            }
            catch(e){
                continue;
            }
            this.createXObject() = methods[i];
            return methods[i];
        }
        throw new Error("Your explore dosen‘t support Ajax!‘");
    }
}

　　


联系
我们