AJAX和Comet的学习

IE5是第一个引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp.6.0、MSXML2.XMLHttp.3.0 MSXML2.XMLHttp.2.0 ，要使用库中的XHR对象要创建XML文档一样编写一个函数。

function createXHR(){
    if(typeof arguments.callee.activeXString!="string"{
        var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0"],i,len;
        for(i=0,len=versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i]);
                arguments.callee.activeXstring=version[i];
                break;
            }catch(ex){

            }
        }
    }
    return new ActiveObject(arguments.callee.activeXString);
}
//首先检测函数中保存的activeXString值是否为string类型，若不是，则判断是库中的哪一个版本，若是则返回当前的版本

IE7+和FireFox、Opera、Chrome、和Safari都支持原生的XHR对象，在这些浏览器中创建的XHR对象要像下面一样使用XMLHttpRequest()构造函数
var xhr=new XMLHttpRequest();

我们要创建一个惰性函数，可以解决浏览器兼容并且提高内存利用率

function createXHR(){
    if (typeof XMLHttpRequest!="undefined") {
        createXHR=function(){
            return new XMLHttpRequest();
        }
        return new XMLHttpRequest()
    }else if(typeof ActiveXObject!="undefined"){
        if (typeof arguments.callee.activeXString!="string") {
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0"];
            for(var i=0;i<versions.length;i++){
                try{
                    var xhr=new ActiveXObject(versions[i]);
                    var actXhr=versions[i];
                    createXHR=function(){
                        return new ActiveXObject(actXhr);
                    }
                    return xhr
                }catch(ex){

                }
            }
        }
        return ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("错误");
    }
}

这个函数先检测原生XHR对象是否存在，如果存在则返回新的实例，如果不存在就检测ActiveX对象，如果两者都不存在则抛出一个错误。

XMLHttpRequest

这个对象调用第一个方法是open() 它接受三个参数：要发送的请求类型(get、post)、请求的URL和是否异步发送请求的布尔值。第二个是send()，这个方法接收一个作为请求主体发送的数据作为参数。如果不需要通过请求主体发送数据则传入Null作为参数，调用send()后，请求就会被分配到服务器。
由于这次请求是同步的，javascript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性

xhr.open("get","example.php",false);
xhr.send(null);

相关属性

• responseText：作为响应主体被返回的文本
• responseXML：如果响应的内容类型时”text/xml’或者”application/xml”，这个属性中将保存着响应数据的XML DOM文档。
• status： 响应的HTTP状态
• statusText ：响应的HTTP状态的说明

收到响应后第一步是检查status属性，以确定响应是否成功返回了，一般来说可以将HTTP状态码作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

function createXHR(){
    if (typeof XMLHttpRequest!="undefined") {
        createXHR=function(){
            return new XMLHttpRequest()
        }
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject!="undefined"){
        if (typeof arguments.callee.activeXString!="string") {
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0"];
            for(var i=0,len=versions.length;i<len;i++){
                try{
                    var xhr=new ActiveXObject(versions[i]);
                    var actXhr=versions[i];
                    createXHR=function(){
                        return new ActiveXObject(actXhr);
                    }
                    return xhr;
                }catch(ex){
                    //skip
                }
            }
        };
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("错误")
    }
}
// var xhr=new XMLHttpRequest()
var xhr=new createXHR();
xhr.onreadystatechange=function(){
    // alert("yes")
    if(xhr.readyState==4){
        if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
            console.log(xhr.responseText);
        }else{
            alert("Request was unsuccessful"+xhr.status);
        }
    }
}
xhr.open("GET","http://www.burningay.top/ajax/demo1.html",true);
xhr.send(null);

我们在这里使用了XHR对象的readyState属性，这个属性表示请求的活动阶段，从0到4分别表示

• 0：尚未初始化。未调用open()；
• 1：启动。已经调用open()；
• 2：发送。send()方法执行完成，已经接收到全部响应内容
• 3：接收。正在解析响应内容
• 4：完成。已经接收到全部响应数据，并且可以在客户端使用

另外，在响应未完成期间，我们可以通过调用abort()方法来取消异步请求

xhr.abort();

在调用这个方法后，XHR对象会停止触发事件，而且也不再允许任何与响应有关的对象属性。在终止请求后，还应该对XHR对象进行解除引用操作，而且由于内存问题，最好不要重用XHR对象