AJAX ( Asynchronous JavaScript and XML )

AJAX是一种利用 JavaScript 和 XML 进行异步数据交互的技术。它通过在后台与服务器进行数据交换，更新页面的局部内容，而不需要重新加载整个页面。这种技术可以极大地提高网页的响应速度和用户体验。

实现思路

在函数内部，我们首先创建了一个 XMLHttpRequest 对象，并设置其 onreadystatechange 事件回调函数。当 readyState 属性的值为 4 时，表示响应已经完成，我们根据响应的状态码调用相应的回调函数。如果状态码大于200且小于300 或者 等于304，表示请求成功，我们调用 success 回调函数，并将响应的内容作为参数传递给它。如果状态码不为 200，表示请求失败，我们调用 fail 回调函数，并将状态码作为参数传递给它。

示例

const ajax = (method, url, data, success, fail) => {
  var request = new XMLHttpRequest()
  request.open(method, url);
  request.onreadystatechange = function () {
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304) {
        success(request)
      }else{
        fail(request)
      }
    }
  };
  request.send();
}

补充说明

request.onreadystatechange 是 XMLHttpRequest 对象的一个事件回调函数，它会在 XMLHttpRequest 对象的状态发生改变时被触发，即当 readyState 属性的值发生变化时会调用该函数。

XMLHttpRequest 对象的 readyState 属性表示当前请求的状态，它是一个整数值，可能的取值及其含义如下：

• 0（UNSENT）：XMLHttpRequest 对象已创建，但尚未调用 open 方法。
• 1（OPENED）：open 方法已被调用，但 send 方法尚未被调用。
• 2（HEADERS_RECEIVED）：send 方法已被调用，并且响应头已经被接收。
• 3（LOADING）：响应正文正在被接收。此时，responseText 属性已经包含部分数据。
• 4（DONE）：响应已经完成。此时，responseText 属性包含完整的响应数据。

通常情况下，我们在监听 readyState 属性的变化，并在其值为 4 时处理响应数据。