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