ajax 原生js封装 - 深沟博客

> 以下是一个使用原生 JavaScript 封装 Ajax 的示例代码：

```javascript
function ajax(options) {
  var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
  xhr.open(options.method || 'GET', options.url);

// 设置请求头
  if (options.headers) {
    for (var header in options.headers) {
      xhr.setRequestHeader(header, options.headers[header]);
    }
  }

// 设置响应处理函数
  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      options.success && options.success(xhr.responseText);
    } else {
      options.error && options.error(xhr.statusText);
    }
  };

// 设置错误处理函数
  xhr.onerror = function () {
    options.error && options.error(xhr.statusText);
  };

// 发送请求
  xhr.send(options.data);
}

// 使用示例
ajax({
  method: 'POST',
  url: '/api/login',
  headers: {
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    username: 'example',
    password: 'password'
  }),
  success: function (response) {
    console.log('Login successful:', response);
  },
  error: function (error) {
    console.error('Error during login:', error);
  }
});
```
这个函数接受一个对象作为输入参数，其中包含以下属性：

- method：请求方法，默认为 'GET'。
- url：请求的 URL。
- headers：请求头对象，可选。
- data：请求体数据，可选。
- success：请求成功时的回调函数，传入响应文本作为参数。
- error：请求失败时的回调函数，传入错误信息作为参数。

在函数内部，我们首先创建了一个 `XMLHttpRequest` 对象，然后设置请求方法和 URL。接下来，我们根据 headers 属性设置请求头。然后，我们设置响应处理函数和错误处理函数，并发送请求。当服务器响应时，如果状态码在 `200` 到` 299` 之间，则调用 `success` 回调函数，否则调用` error` 回调函数。当发生错误时，也会调用 `error` 回调函数。

在使用该函数时，我们只需要传入一个包含所需属性的对象即可。例如，在上面的示例中，我们使用 ajax 函数发送了一个 POST 请求，传入了一个包含 `method`、`url`、`headers`、`data`、`success` 和 `error` 属性的对象。当请求成功时，会调用 success 回调函数打印响应文本，否则会调用 `error` 回调函数打印错误信息。

相关推荐

近期文章