Ajax实现异步交互

试想一个场景，你正在某个网站上上传几张照片，分别有几个上传的地方，如果上一张没有传完，你就不能点击下一个上传按钮，这样的等待体验是不是很糟糕呢。再试想一个场景，当你在淘宝购物的时候，如果点击了某个提交按钮，整个页面都跟着刷新，这样的感觉想必也不是好。如何解决这些问题呢？没错，接下来就请出我们今天的主角，Ajax！

什么是Ajax呢，Ajax是Asynchronous Javascript And Xml的缩写，译为异步的Javascript和Xml。它不是一种技术，更不是一个新的技术，它是将几项技术包含起来的有一种异步交互方式，它的核心对象是XMLHttpRequest对象。

接下来我们就来看看如何创建并使用Ajax

首先我们要先创建一个XMLHttpRequest对象，代码如下：

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){               //其他浏览器
      xhr = new XMLHttpRequest();
   }else{                                   //IE浏览器
      xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}

var xhr=getXhr();

这样我们就创建好了XMLHttpRequest对象，接下来就是与服务器进行连接了

一、GET请求类型

与服务器连接的方法为open（method,url,async）;该方法有三个参数，含义如下：

method—设置请求类型（GET或POST）

url—设置请求地址

asynd—设置是否异步，默认值为true，表示异步

了解了open（）方法参数的含义，我们就可以与服务器连接了，如下：

xhr.open("get","01.php?user=zhangwuji&pwd=12345");

GET方法请求时，参数以键值对的方式添加在请求url后面，中间用问号隔开

连接服务器以后，我们就可以发送请求了，方法为send（），使用GET方法请求时，send（）里面的参数要设置为null（虽然该send方法实际上无效，但是该步骤不能省略），如果是POST方法的请求，send（）的参数直接写要传给服务器的参数就好。

xhr.send(null);

接下来就是客户端接收服务器端的响应数据了

（1）使用onreadystatechange事件来进行监听

（2）判断readyState属性是否等于4，等于4表示服务器响应完毕

（3）判断status是否等于200，等于200的话表示成功接收到服务器端相应数据

成功接收到相应数据后，我们就可以对数据进行操作了，代码如下：

xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
      // 成功地接收服务器端的响应数据
      var data = xhr.responseText;
      console.log(data);
   }
}

返回的收据有两种基本的类型，如下：

1、responseText    返回字符串类型的数据

2、responseXML   返回XML格式的数据

这样我们就拿到了服务器返回的数据，就可以对数据进行后续的处理了。

二、POST请求类型

1、与服务器连接

xhr.open("post","01.php");

2、设置请求头信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

使用POST方法请求服务器，必须在发送请求前设置请求头信息。

3、发送请求

xhr.send("user=zhangwuji&pwd=12345");

这里我们将请求的参数直接写到send方法里就行，与GET方法稍有不同，需要注意。

4、监听服务器响应状态及响应数据

xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
      var data = xhr.responseText;
      console.log(data);
   }
}

至此，我们就手动创建了XMLHttpRequest对象，并实现了向服务器发送Ajax请求，以及返回响应数据。