原生Javascript封装的一个AJAX函数分享

下面我来详细讲解 “原生Javascript封装的一个AJAX函数分享”的完整攻略。

1. 什么是 AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。AJAX 不是一种新的编程语言，而是一种将现有的标准组合在一起使用的技术。它利用了 JavaScript 和 XML 的优点，在页面不需要重新加载的情况下向服务器发送和接收信息。

2. 实现 AJAX 的必要步骤

• 创建 XMLHttpRequest 对象
• 发送请求
• 接收响应
• 处理数据

3. 封装 AJAX 函数的思路

根据上面实现 AJAX 的步骤，我们可以将这些步骤功能分离，分别封装成函数。最终封装出一个 AJAX 函数。

4. AJAX 函数的详细实现

下面是一个封装的 AJAX 函数的示例：

function ajax(options) {
  var xhr = new XMLHttpRequest();
  xhr.open(options.method || 'GET', options.url, true);
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
      var status = xhr.status;
      if(status >= 200 && status < 300 || status == 304) {
        var contentType = xhr.getResponseHeader('Content-Type');
        var response = contentType.indexOf('xml') >= 0 ? xhr.responseXML : xhr.responseText;
        options.success && options.success(response);
      } else {
        options.error && options.error(status);
      }
    }
  };
  xhr.send(options.data || null);
}

这个封装的 AJAX 函数接收一个对象参数 options。其中，可以配置的参数有以下几个：

• method：请求方法，默认为 GET。
• url：请求地址。
• data：请求数据。
• success：请求成功回调函数，接收响应数据作为参数。
• error：请求失败回调函数，接收响应状态码作为参数。

5. AJAX 函数的示例应用

5.1 GET 请求

下面是一个使用 AJAX 函数发送 GET 请求的示例：

ajax({
  url: 'http://example.com/api/getUserInfo?id=123',
  success: function(response) {
    console.log(response);
  },
  error: function(status) {
    console.log('Error', status);
  }
});

上面的示例发送了一个 GET 请求，并在请求成功时打印了响应数据，请求失败时打印了错误状态码。

5.2 POST 请求

下面是一个使用 AJAX 函数发送 POST 请求的示例：

ajax({
  method: 'POST',
  url: 'http://example.com/api/login',
  data: {
    username: 'admin',
    password: 'password'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(status) {
    console.log('Error', status);
  }
});

上面的示例发送了一个 POST 请求，并在请求成功时打印了响应数据，请求失败时打印了错误状态码。

6. 总结

通过上面的介绍和示例，我们学习了如何原生 Javascript 封装一个 AJAX 函数。我们可以通过封装 AJAX 函数来方便地进行网络请求，解决网页加载过慢等问题。