自己动手封装的 ajax-前端开发

请允许我为您详细讲解一下如何自己动手封装的 Ajax。

请允许我为您详细讲解一下如何自己动手封装的 Ajax。

概述

Ajax 是一种使用异步技术实现网页无需刷新就能与服务器进行数据交互的技术。在开发实际项目中，我们可能会频繁使用到 Ajax 技术。而现成的库和框架往往过于笨重，我们可以自己动手封装一个轻量级的 Ajax。

原理

封装 Ajax 的原理也很简单，实际上就是利用原生的 XMLHttpRequest 对象实现异步请求。我们只需封装 XMLHttpRequest 对象、定义请求、处理响应等方法，即可实现一个自己的 Ajax 库。

封装过程

1. 创建 XMLHttpRequest 对象

在浏览器端使用 Ajax 技术，需要用到 XMLHttpRequest 对象发送请求。我们可以创建一个函数 createXHR，返回一个新建的 XMLHttpRequest 对象。

function createXHR() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else {
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}

2. 定义请求

我们可以封装一个函数 ajax，用来发送 Ajax 请求。

function ajax(method, url, data, success) {
  var xhr = createXHR();
  xhr.open(method, url, true);
  if (method === 'POST') {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        success(xhr.responseText);
      } else {
        console.log('Error: ' + xhr.statusText);
      }
    }
  };
}

其中，ajax 函数接受四个参数：

method：请求方法，可以是 GET 或 POST；
url：请求的地址；
data：请求的参数，可以是字符串、对象或 formData；
success：请求成功后的回调函数。

我们先使用 createXHR 创建一个 XMLHttpRequest 对象，然后使用 open 方法打开一个异步的请求。如果是 POST 请求，需要设置 Content-type 请求头部，然后发送请求。

在请求状态改变时，我们可以处理响应的数据。如果请求成功，则调用传入的 success 回调函数，并将服务器返回的数据作为参数传递进去。如果请求失败，则打印错误信息。

3. 使用示例

ajax('GET', 'test.php', null, function(data) {
  console.log(data);
});

var formData = new FormData();
formData.append('username', 'john');
ajax('POST', 'test.php', formData, function(data) {
  console.log(data);
});

上面的示例中，我们首先发送一个 GET 请求，并在控制台输出服务器返回的数据。然后创建一个 formData 对象，向服务器发送 POST 请求，并在控制台输出服务器返回的数据。