手写创建一个 ajax 请求

## 手动创建一个 ajax 请求

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

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

实现如下：

```javascript
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 这两种回调函数的作用是不同的，需要根据不同的场景进行选择和使用。

yanleweb/interview-question

内容风险标识

评论 (0)

yanleweb/interview-question .gitee-modal { width: 500px !important; }

内容风险标识