什么是 Ajax ？

By Noxxxx from https://www.noxxxx.com/?post_type=post&p=478
欢迎分享与聚合，尊重版权，可以联系授权

Ajax的全称为Asynchronous JavaScript And Xml，是一种web客户端与服务器端异步通信的技术。

异步的直观表现就是：当前页面发送一个请求给服务器，当前页面不需要等待服务器响应也可以继续操作网页。

XMLHttpRequest对象

1、创建xhr对象

var xhr = new XMLHttpRequest();

2、发送请求

xhr.open("get","example.php",false);
xhr.send(null);

open方法接受三个参数：要发送的请求类型(常用的有get和post)，请求的url和表示是否异步的布尔值。send()方法接受一个参数，即要作为请求主体发送的数据。但是 不需要通过请求主体发送数据时，必须给send()方法传入 null 。

3、异步请求
多数情况下，我们是需要发送异步请求，JavaScript可以继续执行而不必等待响应。这时，可以检测XHR对象的readyState属性，它有以下几个可能的值：

0：未初始化。尚未调用open()
1: 启动。已调用open()，未调用send()
2: 发送。已调用send()，为未收到响应
3：接受。已接受到部分数据
4：完成。已接受全部数据

readyState的值每次变化都会触发一次readystatechange事件。通常，我们只对最后一个状态感兴趣，只要readyState变为4，我们就可以开始处理响应了。因此可以这样写代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
	if(xhr.readyState == 4){
		//处理
	}
};
xhr.open("get","example.php",true);
xhr.send(null);

因为调用open方法时也会触发readystatechange事件，所以 在调用open前就要注册eadystatechange事件 。

4 、异步请求
在收到响应后，响应的数据会自动填充xhr对象的相关属性，因此我们只需判断处理这些属性即可。相关属性如下：

responseText：作为响应被返回的主体
responseXML：如果响应的类型是”text/xml”或”application/xml”，这个属性将保存着响应的xml文档
status：响应的http状态
statusText：http状态的说明

收到响应后，我们首先应根据http的状态判断是否成功，一般状态码status = 200,被是做成功状态码为304表示内容未被修改，可使用本地缓存。可像下面这样检测这两种状态码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
	if(xhr.readyState == 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
			//响应成功返回
		}else{
			console.log("Request was unsuccessful " + xhr.status);
		}
	}
};
xhr.open("get","example.php",true);
xhr.send(null);

在接收到响应之前还可以调用abort()方法来取消异步操作：