ajax的理解与工作流程

一、什么是ajax

ajax是一种异步通信技术。在ajax出现之前，客户端与服务端之间直接通信。引入ajax之后，客户端与服务端加了一个第三者--ajax。有了ajax之后，通过在后台与服务器进行少量数据交换，可以达到在不刷新整个页面的情况下实现局部刷新。其原理如图

二、XHR对象

ajax技术的核心是XMLHttpRequest对象(简称XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR对象，创建XHR对象可以这样写

var xhr = new XMLHttpRequest();

那如果要兼容IE6、7又该怎么写

var xhr = new ActiveXObject("MSXML2,XMLHTTP");

因此兼容写法如下

1 if(window.ActiveXObject) {
2     var xhr = new ActiveXObject("MSXML2,XMLHTTP");
3 } else {
4     var xhr = new XMLHttpRequest();
5 }

三、XHR用法

创建完XHR对象后，要调用open()方法创建请求，open()方法接受三个参数：

1.要发送的请求的类型(如"get"、"post"等)

2.请求的URL

3.表示是否异步发送请求的布尔值(默认为true，表示异步)

xhr.open("get","index.php",true);

post()请求方法如下面代码

xhr.open("get","index.php",true);
//post()方法必须在send()方法之前加上下面这段代码
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

说明一点：URL相对于执行代码的当前页面，也可以用绝对路径

准备工作做好后，调用send()方法发送请求，

xhr.send(null);

这里get方法传输的数据已经放到url中，可以将参数设置为null

在调用send()方法后，请求就会被分派到服务器，onreadychange捕获请求的状态码，并进行检测

onreadychange对象有个readyState属性，该属性的值表示当前的活动阶段，其值有如下几个：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接受到部分响应数据

4：完成。已经接受到全部响应数据，并且可以在客户端使用

我们只需判断readyState的值是否为4就可以知道所有数据已经就绪。

 1 xhr.onreadystatechange = function(){
 2     if (xhr.readyState==4) {
 3         //判断状态码是否成功
 4         if (xhr.status>=200&&xhr.status<=207||xhr.status==304) {
 5             //调用ajax的responseText属性返回数据
 6             alert(xhr.responseText);
 7         }else{
 8             alert(xhr.status);
 9     }  
10 }      

四、总结

原生ajax的请求总结为一下六个步骤

1.创建XHR对象

2.调用open()方法创建请求

3.调用send()方法发送请求

4.onreadychange捕获请求的状态码

5.判断状态吗是否成功

6.调用ajax的responseText属性返回数据