Ajax 与 Comet

Ajax 与 Comet

目录

Ajax-Asynchronous Javascript + XML
Ajax通信与数据格式无关，是无刷新页面即可从服务器取得数据部分或全部页面。

1. Ajax

1.1 XMLHttpRequest 对象

创建XMLHttpRequest对象xhr：

function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();  //支持IE7+,ff,opera,chrome,safari
    }else if(typeof ActiveXObject != "undefined"){//兼容IE7-
        if(typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.3",
                            "MSXML2.XMLHttp"],
                i,len;
            for(i=0,len=versions.length; i<len; i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch(e){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("no XHR object available.");
    }
}

1.2. XHR用法

只能向同一个域中使用相同端口和协议的URL发送请求。

1）准备发送：并不会真正发型请求，而是启动一个请求以备发送

（1） xhr.open(type,url,async);
type: “get” 或 “post”,
url : 请求的URL，
async : 表示是否异步请求的布尔值

2）发送请求：请求分派到服务器

xhr.send(data);
data : 请求所发送的数据，如果没有则必须置为null

3）接收响应：

收到响应后，响应数据会自动填充xhr对象的属性。
接收响应后，第一步检查status属性，以确定响应已经成功返回。
XHR对象属性：
（1）responseText : 请求返回的主体文本；
（2）responseXML : 如果响应的内容类型是“text/xml”或“application/xml”，这个属性保存包含响应数据的XML DOM文档；
（3）status : 响应的HTTP状态；

①200：表示responseText属性的内容已经就绪，内容类型正确情况下，reponseXML也能访问；
②304：表示请求的资源并没有被修改，可以直接使用浏览器缓存版本；
③400：无法找到请求的资源；
④401：访问资源的权限不够；
⑤403：没有权限访问资源；
⑥404：访问的资源不存在；
⑦405：访问的资源被禁止；
⑧407：访问的资源需要代理认证；
⑨414：请求的url太长；
⑩500：服务器内部错误；

（4）statusText : HTTP状态说明。
（5）readyState : 请求/响应过程的当前活动阶段，且其值的改变会触发readystatechange事件。必须在调用open方法之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

①0 ：未初始化。尚未调用open()方法；
②1 ：启动。已经调用open()方法，但尚未调用send方法；
③2 ：发送。已经调用send()方法，但尚未接收到响应；
④3 ：接收。已经接收部分响应数据；
⑤4 ：完成。已经接收全部响应数据，而且已经可以在客户端使用。

    同步请求：
    var xhr = new XMLHttpRequest();
    xhr.open("get",url,false);
    xhr.send(null);
    if((xhr.status >= 200 || xhr.status < 300) || xhr.status == 304){
        //请求响应成功
        alert(xhr.responseText);
    }else{
        //请求失败
        alert("请求失败："+xhr.status);
    }

    异步请求：
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readystate == 4){
            if((xhr.status >= 200 || xhr.status < 300) || xhr.status == 304){
                //请求响应成功
                alert(xhr.responseText);
            }else{
                //请求失败
                alert("请求失败："+xhr.status);
            }
        }
    }
    xhr.open("get",url,true);
    xhr.send(null);

---