什么是 Ajax ?

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()方法来取消异步操作:

xhr.abort()

Ajax 的缺点就目前来看,主要是破坏了浏览器的前进和后退功能。在浏览器日趋强大的的今天,兼容性问题其实不是特别大了。