浏览器在XMLHttpRequest类上定义了他们的HTTP API
XMLHttpRequest类的每个实例表示了一个独立的请求/相应对
HTTP请求包括：HTTP请求方法（post还是get），请求URL，一个可选的请求头集合，一个可选的请求主体
HTTP响应包括：一个数字或者文字组策划过的状态吗（显示请求的成功失败），一个响应头集合，响应主体
步骤:
1.实例化XMLHttpRequest对象 ：
var request=new XMLHttpRequest();
2.指定请求
request.open("method","url");
第一个参数：指定HTTP方法或动作，“GET”适用于当URL完全猴子腚请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的。
“POST"常用语form表单，请求主体中包含额外数据（表单数据）且这些数据常存储到服务器上的数据库中（副作用）
第二个参数：url，如果使用绝对url，协议主机和端口常匹配所在文档的对象内容：跨域的请求常常会报错
3.设置请求头
request.setRequestHeader(“Content-Type”,"text/plain");
对相同请求头调用多次setRequestHeader并不会覆盖，而是赋予多次的值。
复制代码
/*以post方式发送数据给服务器*/
function postMessage(msg){
var request=new XMLHttpRequest();
request.open("post","handlerPost");
request.setRequestHeader('Content-Type','text/plain;charset=UTF-8');
request.send(msg);
}
复制代码
一个HTTP响应：状态吗，响应头集合，响应主体。
XMLHttpRequest对象的属性和方法中可以获得以上值：
1.status和statusText属性以数字和纯文本的格式赶回HTTP状态码。200：请求成功；404：URL不能匹配服务器上任何资源。
2.getResponseHeader()和getResponseHeaders()查询响应头
3.响应主体冲responseText属性中得到文本形式，从responseXML得到Document形式
XMLHttpRequest对象通常异步使用：发送请求之后，send()方法立即返回，之后再返回响应。为了在响应准备就绪是得到通知，必须使用readystatechange事件。
XMLHttpRequest的readyState属性指定了HTTP请求的状态，4：响应完成，3：接收到响应主体，2：接受到头信息。
复制代码
//postMessage("This is post message!");
//发送一个HTTP GET请求以获得指定URL内容
//当响应成功到达，验证它是否是纯文本
//如果是，把它传递给指定回调函数
function getText(url,callback){
var request=new XMLHttpRequest();
request.open("GET",url);
request.onreadystatechange=function(){
//如果请求完成，则它是成功的
if(request.readyState===4 && request.status===200){
var type=request.getResponseHeader("Content-Type");
if(type.match(/^text/)) //确保相应是文本
callback(request.responseText);
}
}
}
复制代码
同步响应：
复制代码
//同步响应
//发起同步的HTTP GET请求以获得指定URL的内容
//返回响应文本，或如果请求不成功或响应不是文本就报错。
function getTextSync(url){
var request=new XMLHttpRequest();
request.open("GET",url,false); //把fasle作为第三个参数传递给open()，那么send()方法将阻塞直到请求完成
request.send(null);
if(request.status!==200) throw new Error(request.statusText);
var type=request.getResponseHeader('Content-Type');
if(!type.match(/^text/)) throw new Error("Expected textual respomse;got:"+type);
return request.responseText;
}
复制代码
响应解码
复制代码
///发送HTTP GET响应以获取指定URL内心哦那个
//当响应到达时候，把它解析后的XML Document对象，解析后的JSON对象或字符串形式传递给回调
function get(url,callback){
var request=new XMLHttpRequest();
request.open('GET',url);
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200){
var type=request.getResponseHeader("Content-Type");
if(type.indexOf("xml") !== -1 && request.responseXML){
callback(request.responseXML); //Document对象响应
}else if(type=== 'application/json'){
callback(JSON.parse(request.responseText)) //JSON响应
}else {
callback(request.responseText);
}
}
};
request.send(null);
}
复制代码
不用考虑特殊编码的另一个相应类型application/javascript亦或text/javascript，如果你想使用XMLHttpRequest请求Javascript脚本，然后使用eval（）的话，因为<script>能发起跨域请求（JSONP就是运用了这一点），但是XMLHttpRequest API则禁止。
web服务器也可使用二进制数据（例如，图片文件）相应HTTP请求。
复制代码
//使用XMLHttpRequest下载Blob
//以Blob的形式获取URL指定的内容，并将其传递给指定的回调函数
function getBlob(url,callback){
var xhr=new XMLHttpRequest(); //创建一个新的XHR对象
xhr.open("GET",url); //指定要获取内容的URL
xhr.responseType="blob"; //以BLOB形式
xhr.onload=function(){ //onload比onstatechange更容易
callback(xhr.response); //注意，这里是response不是.responseText
};
xhr.send(null);
}
复制代码
服务器响应的正常解码是建立在服务器端发送的"Content-type"和MIME类型上的。
如果服务器端发送过的是XML文档，但是设置“Content-type”错误，将导致XMLHttpRequest对象将使用错误的编码来相应。
所以overrideMimeType方法将重写服务端返回的MIME类型，注意该方法要在send()之前调用
//无论服务器端设置的Content-type是什么类型，豆浆把它当作文本类型来处理
request.overrideMimeType("text/plain;charset=utf-8");
表单编码的请求
复制代码
//将对象{find:"pizza",zipcode:01234,radius:"1km"}变成表单编码的格式 find=pizza&zipcode=01234$radius=1km 的形式
function encodeFormData(data){
if(!data) return "";
var pairs=[];
for(var name in data){
if(!data.hasOwnProperty(name)) continue; //跳过继承方法
if(typeof data[name] === "function") continue;//跳过方法
var value=data[name].toString();
name=encodeURIComponent(name.replace("%20","+"));
value=encodeURIComponent(value.replace("%20","+"));
pairs.push(name+"="+value);
}
return pairs.join('&');
}
复制代码
HTTp POST请求包含一个请求主体，它包含客户端传递给服务端的数据。表单数据编码格式的正确MIME类型：
当POST方法提交这种顺序的表单数据时，必须设置“Content-type”请求头为这个值。
复制代码
//使用表单数据发起一个HTTP POST请求
function postData(url,data,callback){
var request=new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange=function(){
if(request.readyState===4 && callback)
callback(request);
};
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(encodeFormData(data)); //发送表单编码数据
}
复制代码
HTTP GET请求没有请求主体：
复制代码
//使用表单编码数据发起get请求
function getData(url,data,callback){
var request=new XMLHttpRequest();
request.open("GET",url+"?"+encodeFormData(data));
request.onreadystatechange=function(){
if(request.readyState===4 && callback) callback(request);
};
request.send(null);
}
复制代码
JSON编码请求
复制代码
//使用JSON编码主题发起HTTP POST请求
function postJSON(url,data,callback){
var request=new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange=function(){
if(request.readyState===4&&callback)
callback(request);
};
request.setRequestHeader("Content-Type","application/json");
request.send(JSON.stringify(data));
}
复制代码
HTTP进度事件
在XHR2规范中，XMLHttpRequest对象在请求的不同阶段将触发不同类型的事件，所以不再需要检查readyState属性
当调用send()事件时，触发单个loadstart事件，当正在加载服务器的相应时，XMLHttpRequest对象会发生progress事件，通常每隔50毫秒左右，所以可以使用这些事件给用户反馈请求进度。如果请求快速完成，它可能不会触发progress事件。当事件完成时，触发load事件。
一个完成的请求不一定是成功的请求，例如：load事件的处理程序应该检车XMLHttpRequest对象的status状态来确定收到的是“200 OK”而不是“400 Not Found”的HTTP响应。
HTTP请求无法完成有三种情况，对应三种事件
1.请求超时：timeout时间
2.请求中止：abort事件
3.阻止请求完成：比如太多重定向这样的网络错误：error事件
对于任何具体的请求，浏览器只会触发load,abort,timeout和error事件中的一个，一旦这些事件触发后，将触发loadend事件。需要在send()之前进行事件监听，下面是下载事件被触发：
复制代码
var req = new XMLHttpRequest();
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open();
...
// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
...
} else {
// Unable to compute progress information since the total size is unknown
}
}
function transferComplete(evt) {
alert("The transfer is complete.");
}
function transferFailed(evt) {
alert("An error occurred while transferring the file.");
}
function transferCanceled(evt) {
alert("The transfer has been canceled by the user.");
}
复制代码
下面是上传事件被触发：
复制代码
var req = new XMLHttpRequest();
req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);
req.open();
复制代码
判断是否支持progress事件
if("onprogress" in (new XMLHttpRequest())){
//支持progress事件
}
和progress事件相关联的事件对象上有三个有用的属性
1.loaded属性是目前传输的字节数值
2.total属性是自"Content-Length"头传输的数据的整体长度(单位字节)
3.知道上面的长度则lengthComutable为true，反之亦然。
request.onprogress=function(e){
if(e.lengthComputable){
progress.innerHTML=Math.round(100* e.loaded/ e.total)+"% Complete";
}
};
中止请求和超时
复制代码
///实现超时
//如果响应成功到达，传入responseText给回调函数
//如果响应在timeout毫秒内没有到达，中止这个请求
//浏览器可能在abort()后出发“readystatechange”
//如果是部分请求结果到达，设置可能设置status属性
//所以需要设置一个标记，当部分且超时的响应到达时不会调用回调函数
///如果使用load事件就没有这个风险
function timedGetText(url,timeout,callback){
var request=new XMLHttpRequest();
var timedout=false;
//启动计时器，在timeout毫秒之后将终止请求
var timer=setTimeout(function(){
timedout=true;
request.abort();
},
timeout);
request.open("GET",url);
request.onreadystatechange = function(){ //定义事件处理程序
if(request.readyState !== 4) return; //忽略未完成的请求
if(timedout) return; //忽略终止请求
clearTimeout(timer); //取消等待的超时
if(request.status === 200) //如果请求成功
callback(request.responseText); //把response传给回调
};
request.send(null);
}
复制代码
跨域请求
作为同源策略的一部分，XMLHttpRequest对象通常仅可以发起和文档具有相同服务器的HTTP请求，这个限制关闭了安全漏洞，但是同时也阻止了大量适合使用的跨域请求。
CORS支持的跨域请求工作不需要做任何的事情，但是安全细节要了解
1.给open()方法传递的用户名和密码将绝对不会通过跨域请求发送
2.跨域请求不会包含其他的任何用户证书：cookie和HTTP身份验证令牌（token）通常不会作为请求内容发送
View Code
出现的bug
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
XMLHttpRequest2 进行跨域访问时需要服务器许可，不是任何域都接受跨域请求的。先来看一下从 Yahoo YQL 域返回的响应头（Response Header ）：注意:
复制代码
1 HTTP/1.1 200 OK
2 Set-Cookie: AO="o=1&s=1&dnt=1"; Version=1; Domain=yahoo.com; Max-Age=630720000; Expires=Sat, 18-Jun-2033 10:07:41 GMT; Path=/
3 Access-Control-Allow-Origin: *
4 Cache-Control: public, max-age=899
5 Content-Type: text/xml;charset=utf-8
6 Content-Encoding: gzip
7 Vary: Accept-Encoding
8 Date: Sun, 23 Jun 2013 10:07:40 GMT
复制代码
注意里面有一条标识 Access-Control-Allow-Origin:* ，这就表示允许跨域访问，所以可以正常访问该域，而对于其他没有该标识的域就会出现禁止访问提示。
解决方法：
1.在服务器端设置response头，php是<?php header('Access-Control-Allow-Origin: *'); ?>，当然会让你的服务器网站变得很危险
2.在chrom浏览器中设置
1）安装Chrom插件（你得先翻了墙(￣▽￣)"）：点击这里
2）在windows中window+r打开运行，输入
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
还要注意的一点是：chrome不支持本地运行Access-Control-Allow-Origin，所以为了可以让chrome浏览器在头部发送Access-Control-Allow-Origin，你必须结合你的hosts文件将localhost指定成其他域名：127.0.0.1 localhost yourdomain.com
JSONP
复制代码
function foo(data)
{
// do stuff with JSON
}
var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'
document.getElementsByTagName('head')[0].appendChild(script);
复制代码
