使用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章