AJAX学习笔记——使用方式、readyState以及简单封装

一、AJAX使用步骤（以post请求为例，此时需要设置请求头，get请求参数放url后面）

1. var xhr = new XMLHttpRequest();
2. xhr.open(‘POST’,‘test.php’); //若参数为false，则堵塞后面的代码执行，状态码改变也不会被监听到
3. xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4. xhr.send();
5. xhr.onreadystatechange() = function() {}

二、readyState状态码

AJAX的readystate一共有五种类型0-4，在JS高程中和网上博客看到的状态说明都不一样，最终找到了一个结合《Pragmatic AJAX中文问题 A Web 2.0 Primer 》和JS高程得出的观点，即XMLHttpRequest对象的生命周期如下：
创建－初始化请求－发送请求－接收数据－接收完成 - 解析数据－解析完成
其中初始化请求到接收数据部分readyState的值为1

(0)：未初始化
此阶段属于未初始化阶段，同时会确认XMLHttpRequest对象是否已创建

(1)：启动阶段
已经调用open()方法，但还没有调用send()方法

(2)：正在发送
已经调用send()方法，但还没有接收到响应

(3)：正在接收
已经接收到部分响应数据

(4)：接收完成
已经接收到全部的响应数据，且可以在客户端使用了

三、封装AJAX

 function ajax(type, url, params, success) {
    type = type.toUpperCase();
    let arr = [];
    let xhr = new XMLHttpRequest();
    if (typeof params === Object) {
      for (let key in params) {
        let value = params[key];
        arr.push(key + '=' + value);
      }
      params = arr.join('&');
    }
    if (type === 'GET') {
      url += '?' + params;
    }
    let data = null;
    if (type === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      data = params;
    }
    xhr.open(type, url);
    xhr.send(data);
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return;
      success(res);
    }
  }