怎么用原生js实现Ajax

=

Ajax概述

Ajax是Asynchronous JavaScript And XML的简称，它允许我们在不刷新整个页面的情况下，就可以异步获取数据，并更新页面的部分内容。那么Ajax的工作流程是怎样的呢？大体来说，可以分为四步：页面当中的事件或者函数触发Ajax请求的时候，建立XMLHttpRequest对象，以进行接下来的Ajax请求。调用XMLHttpRequest的open函数XMLHttpRequest向服务器发送请求服务器处理请求之后，会把响应返回到网页，此时，XMLHttpRequest会监听到这个响应，并执行响应的代码。接下来，根据上面的四步，我们实现自己的Ajax。第一步：创建XMLHttpRequest对象Ajax实际是使用XMLHttpRequest对象来发送请求的。所有现代浏览器都支持XMLHttpRequest对象，我们可以使用如下代码创建一个XMLHttpRequest对象：var xhttp = new XMLHttpRequest();
不过，需要处理老版本浏览器的朋友们就没有那么幸运了，IE6当中就没有内置XMLHttpRequest这个对象。不过IE6中有一个ActiveX对象可供我们使用，我们可以使用if条件来处理兼容性：var xhttp;
if (window.XMLHttpRequest) {
// 现代浏览器
xhttp = new XMLHttpRequest();
} else {
// IE6等老版本浏览器
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
第二步：调用XMLHttpRequest的open函数XMLHttpRequest对象上有open这个函数来声明请求的方法：open(method, url, async)这个方法有三个参数：第一个参数method说明了使用哪种请求方法，是GET还是POST，还是其他方法。对于已经熟悉使用插件发送ajax的我们，无需赘述。第二个参数是url，请求文件的地址。第三个参数是async，这是一个boolean值，表明是否要发送异步请求，应该被设置成为true（true也是默认值），false非必要时不要使用，因为会阻塞JS执行，直到收到响应为止。目前，我们的代码如下：

var xhttp;
if (window.XMLHttpRequest) {
    // 现代浏览器
    xhttp = new XMLHttpRequest();
 } else {
    // IE6等老版本浏览器
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xhttp.open('GET', '/smileyFace');

第三步：XMLHttpRequest向服务器发送请求这一步很简单：xhttp.send();
send方法首先连接到了服务器，然后把请求发送到服务器。不过如果使用的是POST方法，则需要把请求body传入send中作为参数。第四步：处理响应XMLHttpRequest上有一个方法，名叫onreadystatechange，当请求接收到响应的时候便会触发，在这个方法内部，我们来定义对响应的处理：

xhttp.onreadystatechange = function() {
  if (xhttp.readyState === 4) {
  	if (xhttp.status === 200) {
      // successFunc(xhttp.responseText)
    } else {
    	// failFunc(xhttp.responseText)
    }
  } 
};

其中，readyState存储XMLHttpRequest的五种状态：0：UNSENT：代理被创建，但尚未调用open()方法1：OPENED：open() 方法已经被调用2：HEADERS_RECEIVED：send() 方法已经被调用，并且头部和状态已经可获得3：LOADING：下载中； responseText 属性已经包含部分数据4：DONE：下载操作已完成readyState这五个状态是顺序执行的，每次都会触发onreadystatechange。readyState变为4之后，整个响应就接收完成了。XMLHttpRequest的status属性是HTTP状态码，我们应该都比较熟悉，200代表请求成功。responseText：得到字符串形式的响应数据。（responseXML则是XML格式的响应数据）代码封装可以把以上代码封装成一个函数，这样我们可以通过：ajax(’/smileyFace’, mySuccessFunc, myFailFunc)
来调用。最终代码如下：

function ajax(url, fnSucc, fnFaild) {
  var xhttp;
 
  // 第一步：创建XMLHttpRequest对象
  if (window.XMLHttpRequest) {
      // 现代浏览器
      xhttp = new XMLHttpRequest();
   } else {
      // IE6等老版本浏览器
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

// 第四步：处理响应

 xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4) {
      if (xhttp.status === 200) {
        fnSucc(xhttp.responseText)
      } else {
      	if (fnFaild) fnFaild(xhttp.responseText)
      }
    } 
  };

// 第二步：初始化XMLHttpRequest方法
xhttp.open(‘GET’, url);
// 第三步：XMLHttpRequest向服务器发送请求
xhttp.send();

}