使用XMLHttpRequest对象完成原生的AJAX请求

1.你们眼中的Ajax

说到Ajax，只要有过前端开发经验的童鞋必定都不陌生，大都知道它就是一种与后端之间的通讯技术，经过这个神奇的家伙，咱们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了。Ajax最大的一个优点就是经过异步请求达到局部刷新的目的，这样就大大提升了用户体验。但是Ajax就是咱们平时使用得最多的jQuery中的$.ajax()吗？答案确定不是的，那咱们就来一块儿看看原生的Ajax究竟长啥样把！

2.获取XMLHttpRequest

• 2.1 为何要获取XMLHttpRequest对象

  Ajax技术的核心是XMLHttpRequest对象（简称XHR）

• 2.2 如何获取XMLHttpRequest对象

  • 因为IE5是第一款引入XHR对象的浏览器，因此在IE7以前其实都不是叫XMLHttpRequest，具体要兼容IE7以前浏览器的话能够查阅一下《高级程序设计》本文重点是讨论如何实现Ajax请求，因此，默认在内置了XHR的IE7+和其余现代浏览器下，因此：

  function getXhr(){
       if (typeof XMLHttpRequest != 'undefined') {
           return new XMLHttpRequest();
       }
   }

  • 这样就获得了一个XHR的实例对象

3.大致的流程

• 3.1 初始化请求

  • 使用XHR对象时，使用的第一个方法就是open()，这个方法不会发送请求，但会初始化一个请求准备发送，第三个参数默认是true，也就是异步的

  xhr.open('get', 'example.php', false);

• 3.2 发送请求

  • GET请求:发送的值为空，通常写上null，适配有些浏览器

  xhr.open('GET', url);
  xhr.send(null);

  • POST请求,要模拟表单提交请求的话就将Content-type头部信息设置为application/x-www-form-urlencoded，而且发送的是一个通过序列化以后的字符串

  xhr.open('POST', url);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(stringData);

• 3.3 监控请求状态，处理请求数据

  • xhr对象有且仅有一个事件onreadystatechange，注意全部字母都是小写的，javascript和Java同样都是区分大小写的。
  • 每一次xhr对象的readyState状态值改变都会触发该事件，可是该方法不能为单独的一个xhr对象绑定多个事件处理逻辑，即onreadystatechange只能绑定一个事件处理的function，若是你想处理多件事情，那么只能在绑定的function中进行多事件处理的逻辑调用。

  xhr.onreadystatechange = function(){  
    if(xhr.readyState == 4){  
        if(xhr.status == 200){  
            document.getElementById("unInfo").innerHTML = xhr.responseText;  
        }  
    }  
  }

4.重要属性

• 4.1 readyState属性，这个属性可能的取值以下：

  • 0：未初始化，还没有调用open()方法
  • 1：启动。已经调用open()方法，但还没有调用send()方法
  • 2：发送：已经调用send()方法，但还没有收到响应
  • 3：接收。已经接收到部分响应数据。
  • 4：完成。已经接收到所有响应数据，并且已经能够在客户端使用了。

• 4.2 响应的数据会自动填充XHR对象的属性，包含如下属性

  • responseText：做为响应主题被放回的文本
  • responseXML：若是响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XMLDOM文档
  • status：响应的HTTP状态
  • statusText：HTTP状态的说明

5.一次完整的XHR请求

• GET

function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
  return new XMLHttpRequest();
}
}
var xhr = getXhr();
//GET请求
xhr.open('GET', '/user/checkLogin');
xhr.send(null);
xhr.onreadystatechange = function(res) {
if (xhr.readyState == 4) {
  if (xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText))
  }
}
}

• POST

function getXhr(){
    if (typeof XMLHttpRequest != 'undefined') {
      return new XMLHttpRequest();
    }
  }
  var xhr = getXhr();
  var stringData = {
    uname: '123',
    password: '123',
    code: ''
  }
  stringData = JSON.stringify(stringData);
  //POST请求
  xhr.open('POST', '/user/login');
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(stringData)
  xhr.onreadystatechange = function(res) {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  }

参考文章：

• 【AJAX】XmlHttpRequest对象详解（API）
• XMLHttpRequest API 使用指南
• 《JavaScript高级程序设计》第21章