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);
其余略