Ajax的使用~~~整理
之前对于ajax没有详细的学习，只是碰到的时候，就记一点，不是很有条理。虽然常用的都会用，但真经不起询问，知其然而不知其所以然，所以专门看了一下《JavaScript高级程序设计》中对ajax的讲解。
本文基本都摘抄自《JavaScript高级程序设计》
ajax其实就是使用window对象的XMLHttpRequest对象，这个对象和其他的Date，Array一样，都是window对象自带的，所以声明一个XMLHttpRequest实例对象也和声明Date，Array对象一样。
声明对象
var xhr = new XMLHttpRequest();
此处没有考虑IE，因为在实际开发过程中，一般不会使用原生的js，都是用jquery，所以不用考虑兼容性，我们只需要知道原理即可。
设置请求参数
xhr.open("请求的方法","请求的URL","是否以异步方式请求")
请求的方法可以使get、post、put、delete等，http协议支持的应该都是可以的，只不过最常用的是get和post，并且这里不区分大小写。
请求的URL，需要注意的是，不要跨域，即只能请求和当前脚本在同一个域下面的资源，也就是请求的host:port和当前的执行脚本的host:port必须相同。如果想跨域请求的话，就另当别话，后面会提。
是否以异步方式请求，同步和异步就不说了，推荐使用异步，即这里设为true。如果使用同步的话，浏览器会出现警告，不过会继续运行，可以忽略警告。
设置http头部信息
xhr.setRequestHeader("key","value");
实际开发中，请求接口可能需要请求方携带者颁发给自己的token或者cert，很多时候就是通过将这些token或者cert添加在header中的。
发送的header，可以在浏览器的network中，选择对应的请求文件，查看header一栏，找到Request Header。
发送请求
xhr.send();
send方法可以接受参数，当然也可以不传，《js高程》中说即使不需要发送数据，也必须传入null。
执行完这条语句后，就真的是发起请求了，可以在浏览器控制台查看network。
需要注意的是：
send方法传递非null参数的情况只适用于post方法。如果是以get方式请求，此时即使传递给send方法的参数，传递的参数也不会发送。
如果是以get方式请求，不要将数据写在send方法中，可以在请求的URL后面增加查询参数，就像host:port/index.php?name="abc"。需要注意的是，像老一点的IE，是不会自动编码URL的，所以一定要使用encodeURIComponent(string)编码后再连接到URL中。
如果是以post方式发送，那么可以在send方法中传递要发送的数据，但是，必须制定header，比如设置Content-Type为x-www-form-urlencoded，然后在将数据写在send方法中，如果不指定header，那么数据也是能发送的，如果后端是PHP，虽然不能使用$_POST来接收send中发送的数据，但是可以使用下面的方法来获取数据：
$post_data = file_get_contents('php://input');
但是，强烈推荐，设置header，这样后端处理比较方便。
另外，
如果不加header，在浏览器中console中可以看到发送数据的格式是Request Payload；
加上header，比如Content-Type为x-www-form-urlencoded，发送的数据就是Form Data;
关于Request PayLoad和Form Data的区别，网上很多博客讲解，这里就不抄了。
对返回值进行接收处理
可以通过console.log(window)来找到XMLHttpRequest对象，以及XMLHttpRequest对象下面的各种属性和事件方法。
常用的属性如下：
responseText -> 作为响应主体被返回的文本；
responseXML -> 如果后端程序在返回的数据是，设置Content-Type为text/xml或者application/xml，那么就用这个属性接收xml格式的响应内容。
status -> http状态码；
readyState -> 反映出xhr对象请求数据进行哪个阶段，注意并不是调用send之后，他的值才变。
0 -> 尚未初始化，未调用open方法；
1 -> 调用了open方法；
2 -> 调用了send方法；
3 -> 接收到部分数据；
4 -> 数据全部接收完成，可以使用了。
而对于处理结果，常用的事件有 readyStateChange，对应的事件处理程序是onreadyStateChange，从名称就能想出来它和readyState的关系吧。
所以通常为该事件处理程序绑定一个函数。做法如下：
var xhr = new window.XMLHttpRequest();
xhr.open("post","recieve.php?id=name",true);
xhr.setRequestHeader("myToken","abcdefghti");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=abc&age=10");
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if((xhr.status==200 && xhr.status<300) || xhr.status==304){
console.log(xhr.responseText);
} else {
console.log("请求失败，响应码：" + xhr.status)
}
}
}
超时设定
xhr对象有一个timeout属性，表示在发起请求后，多少毫秒内还没有收到结果，就会触发timeout事件，对应的是ontimeout事件处理程序。
注意，一旦超过设定的超时时间，就会canceled（取消请求），即不会再关注响应的结果，已经将此次请求认定为失败了。
var xhr = new XMLHttpRequest();
xhr.open("get","recieve.php",true);
xhr.send();
xhr.timeout = 1000;//1秒超时
xhr.ontimeout = function(){
console.log("Request Timeout")
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if((xhr.status==200 && xhr.status<300) || xhr.status==304){
console.log(xhr.responseText);
} else {
console.log("请求失败，响应码：" + xhr.status)
}
}
}
