手写创建一个 ajax 请求

Question

手动创建一个 ajax 请求

一般来说，我们可以使用 XMLHttpRequest 对象来创建 Ajax 请求，其流程如下：

1. 创建 XMLHttpRequest 对象，通过调用其构造函数来实现。
2. 使用 open()方法指定请求的方法、URL 以及是否异步请求。
3. 使用 setRequestHeader()方法设置请求头，例如设置请求的 Content-Type。
4. 设置响应的回调函数，一般有 onreadystatechange 和 onload 两种方式。
5. 使用 send()方法发送请求。

实现如下：

var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject) {
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }

    var client = new XMLHttpRequest();
    //如果是 IE 的内核 ActiveXObject('Microsoft.XMLHTTP');
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    //如果是 post 请求：client.setRequestHeader('Content-Type','application/X-WWW-form-urlencoded')
    client.send();
  });
  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error(' 出错了 ', error);
});

xhr.open() 第一个参数是请求的方法，可以是 GET、POST、PUT 等；第二个参数是请求的 URL；第三个参数表示是否异步请求。

setRequestHeader() 方法用于设置请求头，例如设置 Content-Type，常见的值有 application/json、application/x-www-form-urlencoded 等

onreadystatechange 回调函数 会在 XMLHttpRequest 对象的状态发生变化时触发

最后，调用 send()方法发送请求。

回调函数一般有哪些？

设置响应的回调函数，一般有 onreadystatechange 和 onload 两种方式；在 XMLHttpRequest 对象中，onreadystatechange 和 onload 是两种不同的事件回调函数。

onreadystatechange :事件会在 readyState 的值改变时被触发，它会在请求过程中的每个状态改变时都被触发，从而可以通过 readyState
的值来判断请求的过程。一般来说，onreadystatechange 回调函数需要根据 readyState 的不同值做出不同的处理，如：

• readyState 为 1 （UNSENT）：代理被创建，但尚未调用 open() 方法；
• readyState 为 1 （已经调用 open() 方法）时，可以做一些请求初始化的工作；
• readyState 为 2 （已经调用 send() 方法）时，可以获取响应头信息；
• readyState 为 3 （正在接收数据）时，可以获取响应的部分数据；
• readyState 为 4 （已经接收到全部响应数据）时，可以对响应的数据进行处理。

onload: 而 onload 事件则是在整个请求过程完成后被触发，表示整个请求已经完成。这个回调函数通常用来处理响应数据，如将响应数据渲染到页面中等。

因此，onreadystatechange 和 onload 这两种回调函数的作用是不同的，需要根据不同的场景进行选择和使用。