【javascript】Ajax 与 Comet

1、XMLHttpRequest 对象

在浏览器中创建XHR 对象

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        //兼容IE7以下浏览器
        if (typeof arguments.callee.activeXString != "string"){
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
            "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 (ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}

var xhr = createXHR();

1.1 XHR 的用法

在使用XHR 对象时，要调用的第一个方法是open()，它接受3个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。
调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。要发送特定的请求,需要调用send(),它接受一个参数，即要作为请求主体发送的数据。
如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。

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

由于请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR 对象的属性。
(1)responseText:作为响应主体被返回的文本。
(2)responseXML:如果响应的内容类型是“text/xml”或者“application/xml”，这个属性将保存包含响应数据的XML DOM 文档。
(3)status:响应的HTTP状态
(4)statusText:HTTP 状态的说明

一般来说，可以将HTTP状态代码为200 作为成功的标志。
状态代码为304 表示请求的资源并没有被修改。

xhr.open("get", "example.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

发送异步请求时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
- 0：未初始化。尚未调用open()方法。
- 1：启动。已经调用open()方法，但尚未调用send()方法。
- 2：发送。已经调用send()方法，但尚未收到响应。
- 3：接收。已经接收到部分响应数据。
- 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

在接收到响应之前还可以调用abort()方法来取消异步请求。

xhr.abort();

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

1.2 HTTP头部信息

每个HTTP 请求和响应都会带有相应的头部信息。XHR对象也提供了操作这两种头部信息的方法。
默认情况下，在发送XHR请求的同时，还会发出下列头部信息。
- Accept：浏览器能够处理的内容类型。
- Accept-Charset：浏览器能够显示的字符集。
- Accept-Encoding：浏览器能够处理的压缩编码。
- Accept-Language：浏览器当前设置的语音。
- Connection：浏览器与服务器之间连接的类型。
- Cookie：当前页面设置的任何Cookie。
- Host：发出请求的页面所在的域。
- Referer：发出请求的页面的URI。
- User-Agent：浏览器的用户代理字符串。
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。
要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get","example.php",true);
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null);

调用XHR 对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。
调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

1.3 GET 请求

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便将信息发送给服务器。
对XHR 而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。
查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号（&）分隔。

xhr.open("get", "example.php?name1=value1&name2=value2", true);

//向现有URL 的末尾添加查询字符串参数
function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);

1.4 POST 请求

POST请求通常用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交，主体可以包含非常多的数据，而且格式不限。
可以使用XHR 来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。

/**以查询字符串的格式输出序列化之后的字符串**/
function serialize(form){
    var parts = [],field = null,i,len,j,optLen,option,optValue;
    for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if (field.name.length){
                    for (j=0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if (option.selected){
                            optValue = "";
                            if (option.hasAttribute){
                            optValue = (option.hasAttribute("value") ?
                            option.value : option.text);
                        } else {
                            optValue = (option.attributes["value"].specified ?
                            option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" +
                        encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined: //字段集
            case "file": //文件输入
            case "submit": //提交按钮
            case "reset": //重置按钮
            case "button": //自定义按钮
                break;
            case "radio": //单选按钮
            case "checkbox": //复选框
                if (!field.checked){
                    break;
                }
                /* 执行默认操作 */
            default:
                //不包含没有名字的表单字段
                if (field.name.length){
                parts.push(encodeURIComponent(field.name) + "=" +
                encodeURIComponent(field.value));
            }
        }
    }
    return parts.join("&");
}

function submitData(){
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) 
            || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    xhr.open("post", "postexample.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var form = document.getElementById("user-info");
    xhr.send(serialize(form));
}

与GET 请求相比，POST 请求消耗的资源会更多一些。从性能角度来看，以发送
相同的数据计，GET 请求的速度最多可达到POST 请求的两倍。

2、XMLHttpRequest 2 级

并非所有浏览器都完整地实现了XMLHttpRequest2级规范，但所有浏览器都实现了它规定的部分内容。

2.1 formData

XMLHttpRequest 2 级定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR 传输）提供了便利。

var data = new FormData();
data.append("name", "Nicholas");

这个append()方法接受两个参数：键和值。分别对应表单字段名和字段中包含的值。
通过formData构造函数传入表单元素，也可以用表单元素的数据预先向其中填入键值对。

var data =  new FormData(document.forms[0]);

创建了FormData 的实例后，可以将它直接传给XHR 的send()方法。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传入的数据类型是FormData 的实例，并配置适当的头部信息。
支持FormData 的浏览器有Firefox 4+、Safari 5+、Chrome 和Android3+版WebKit。

2.2 超时设定

IE8 为XHR 对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout 事件，进而会调用ontimeout 事件处理程序。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        try {
            if ((xhr.status >= 200 && xhr.status < 300) 
                || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        } catch (ex){
            //假设由ontimeout 事件处理程序处理
        }
    }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为1 秒钟（仅适用于IE8+）
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
};
xhr.send(null);

2.3 overrideMimeType()方法

Firefox 最早引入了overrideMimeType()方法，用于重写XHR 响应的MIME 类型。
因为返回响应的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME 类型是很有用的。

var xhr = createXHR();
xhr.open("get", "text.php", true);

//强迫XHR 对象将响应当作XML 而非纯文本来处理
xhr.overrideMimeType("text/xml");
xhr.send(null);

支持overrideMimeType()方法的浏览器有Firefox、Safari 4+、Opera 10.5 和Chrome。

3、进度事件

具有6个进度事件
loadstart：在接收到响应数据的第一个字节时触发。
progress：在接收响应期间持续不断的触发。
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止连接时触发。
load：在接收到完整的响应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。

3.1 load 事件

Firefox 实现中引入了load事件，用以替代readystatechange事件。响应接收完毕后将触发load事件，因此也就没有必要去检查readyState 属性了。

var xhr = createXHR();
xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

3.2 progress 事件

Mozilla 对XHR 的另一个革新是添加了progress事件，这个事件会在浏览器接收新数据期间周期性地触发。
onprogress 事件处理程序会接收到一个event 对象，其target 属性是XHR 对象，但
包含着三个额外的属性：lengthComputable、position 和totalSize。
lengthComputable是一个表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize 表示根据Content-Length 响应头部确定的预期字节数。

var xhr = createXHR();
xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
//每次触发progress 事件，都会以新的状态信息更新HTML 元素的内容。
xhr.onprogress = function(event){
    var divStatus = document.getElementById("status");
    if (event.lengthComputable){
        divStatus.innerHTML = "Received " + event.position + " of " +
        event.totalSize +" bytes";
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

4、跨源资源共享

通过XHR 实现Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。
CORS定义了在必须访问跨源资源时，浏览器与服务器应该怎么沟通。其背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应应该是成功还是失败。
比如一个简单的使用GET或POST发送的请求，它没有自定义的头部，而主体内容是text/plain。在发送该请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。

//Origin 头部的一个示例：
Origin: http://www.nczonline.net

//如果服务器认为这个请求可以接受
Access-Control-Allow-Origin: http://www.nczonline.net

4.1 IE 对CORS 的实现

微软在IE8 中引入了XDR（XDomainRequest）类型。这个对象与XHR类似，但能实现安全可靠的跨域通信。
- XDR 与XHR 有一些不同之处。
- cookie 不会随请求发送，也不会随响应返回。
- 只能设置请求头部信息中的Content-Type字段。
- 不能访问响应头部信息
- 只支持GET和POST请求
XDR对象的使用方法与XHR对象非常相似。也是创建一个XDomainRequest的实例，调用open()方法，再调用send()方法。但与XHR对象的open()方法不同，XDR对象的open()方法只接收两个参数：请求的类型和URL。
所有XDR 请求都是异步执行的，不能用它来创建同步请求。请求返回之后，会触发load 事件，响应的数据也会保存在responseText 属性中。

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror = function(){
    alert("An error occurred.");
};
xdr.timeout = 1000;
xdr.ontimeout = function(){
    alert("Request took too long.");
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

为支持POST 请求，XDR对象提供了contentType属性，用来表示发送数据的格式,这个属性是通过XDR 对象影响头部信息的唯一方式。

xdr.open("post", "http://www.somewhere-else.com/page/");
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send("name1=value1&name2=value2");

4.2 其它浏览器对CORS的实现

Firefox 3.5+、Safari 4+、Chrome、iOS 版Safari 和Android 平台中的WebKit 都通过XMLHttpRequest对象实现了对CORS 的原生支持。
要请求位于另一个域中的资源，使用标准的XHR 对象并在open()方法中传入绝对URL 即可。

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send(null);

跨域XHR 对象也有一些限制，但为了安全这些限制是必需的。
- 不能使用setRequestHeader()设置自定义头部。
- 不能发送和接收cookie。
- 调用getAllResponseHeaders()方法总会返回空字符串。

4.3 Preflighted Reqeusts

CORS 通过一种叫做PreflightedRequests的透明服务器验证机制支持开发人员使用自定义的头部、GET 或POST 之外的方法，以及不同类型的主体内容。
在使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求。这种请求使用OPTIONS 方法，发送下列头部。
- Origin：与简单的请求相同。
- Access-Control-Request-Method：请求自身使用的方法。
- Access-Control-Request-Headers：（可选）自定义的头部信息，多个头部以逗号分隔。

//一个带有自定义头部NCZ 的使用POST 方法发送的请求。
Origin: http://www.nczonline.net
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器进行沟通。
- Access-Control-Allow-Origin：与简单的请求相同。
- Access-Control-Allow-Methods：允许的方法，多个方法以逗号分隔。
- Access-Control-Allow-Headers：允许的头部，多个头部以逗号分隔。
- Access-Control-Max-Age：应该将这个Preflight请求缓存多长时间（以秒表示）。
支持Preflight 请求的浏览器包括Firefox 3.5+、Safari 4+和Chrome。IE 10 及更早版本都不支持。

4.4 带凭据的请求

默认情况下，跨源请求不提供凭据（cookie、HTTP认证及客户端SSL证明等）。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。如果服务器接受带凭据的请求，会用下面的HTTP 头部来响应。

Access-Control-Allow-Credentials: true

如果发送的是带凭据的请求，但服务器的响应中没有包含这个头部，那么浏览器就不会把响应交给JavaScript.（于是，responseText 中将是空字符串，status 的值为0，而且会调用onerror()事件处
理程序）

4.5 跨浏览器的CORS

有必要实现一个跨浏览器的方案。检测XHR 是否支持CORS 的最简单方式，就是检查
是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在，就可以兼顾所有浏览器。

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        vxhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
        return xhr;
}

var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if (request){
    request.onload = function(){
        //对request.responseText 进行处理
    };
    request.send();
}

Firefox、Safari 和Chrome 中的XMLHttpRequest 对象与IE 中的XDomainRequest 对象类似，都提供了够用的接口，这两个对象共同的属性/方法如下。
- abort()：用于停止正在进行的请求。
- onerror：用于替代onreadystatechange 检测错误。
- onload：用于替代onreadystatechange 检测成功。
- responseText：用于取得响应内容。
- send()：用于发送请求。

5、其它跨域技术

利用DOM 中能够执行跨域请求的功能，在不依赖XHR对象的情况下也能发送某种请求。

5.1 图像Ping

第一种跨域请求技术是使用标签。
动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204 响应。
通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候接收到的。

var img = new Image();
img.onload = img.onerror = function(){
    alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";

图像Ping 最常用于跟踪用户点击页面或动态广告曝光次数
图像Ping 有两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。因此，图像Ping 只能用于浏览器与服务器间的单向通信。

5.2 JSONP

JSONP 是JSON with padding（填充式JSON 或参数式JSON）的简写，是应用JSON 的一种新方法。
JSONP 看起来与JSON 差不多，只不过是被包含在函数调用中的JSON。

callback({ "name": "Nicholas" });

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

http://freegeoip.net/json/?callback=handleResponse

JSONP 是通过动态

【javascript】Ajax 与 Comet

你可能感兴趣的:(【javascript】Ajax 与 Comet)