javascript高级程序设计第三版 第21章 Ajax与Comet

21.1 XMLHttpRequest对象

21.1.1 XHR的用法

var xhr = new XMLHttpRequest();

//接受3个参数：要发送的请求的类型（"get"，"post"等）、请求的URL和表示是否异步发送请求的布尔值
xhr.open("get","example.php",false);

//接受一个参数：即要作为请求主体发送的数据，无则传入null
xhr.send(null);

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);
        }
    }
};

//接收响应之前还可以调用abort()方法来取消异步请求
xhr.abort();

在收到响应后，响应的数据会自动填充XHR对象的属性
responseText：作为响应主体被返回的文本
responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档
status：响应的HTTP状态
statusText：HTTP状态的说明

由于内存原因，不建议重用XHR对象。

21.1.2 HTTP头部信息

setRequestHeader() 设置自定义的请求头部信息，必须在调用open()方法之后且调用send()方法之前调用
getReponseHeader() 传入头部字段名称
getAllReponseHeaders()

21.1.3 GET请求

URL末尾的查询字符串必须经过正确的编码
encodeURIComponent()

21.1.4 POST请求

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

21.2 XMLHttpRequest 2级

21.2.1 FormData

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

xhr.send(data);

//var form = document.getElementById("user-info");
//xhr.send(new FormData(form));

21.2.2 超时设定

略

21.2.3 overrideMimeType()方法

略

21.3 进度事件

loadstart，progress，error，abort，load，loadend

21.3.1 load事件

略

21.3.2 progress事件

略

21.4 跨源资源共享

CORS定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或相应是应该成功，还是应该失败。

在发送请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的源信息（协议，域名和端口），以便服务器根据这个头部信息来决定是否给予响应。
Origin: http://www.nczonline.net

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）
Access-Control-Allow-Origin: http://www.nczonline.net

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。注意，请求和响应都不包含cookie信息。

其余略

21.5 其它跨域技术

21.5.1 图像Ping

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

21.5.2 JSONP

function handleResponse(response){
    alert(response);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

其余略