XML HTTP 请求 - JavaScript

XML HTTP 请求是一种在客户端编写 JavaScript 的 Web 技术，它允许你发出对服务器端的请求并接收响应，而无需刷新整个页面。这使得我们能够创建更加现代化、交互式和动态的 Web 应用程序。

创建一个 XML HTTP 请求对象

在 JavaScript 中，我们可以使用 XMLHttpRequest 构造函数创建一个 XML HTTP 请求对象。这个对象可以用来发出对服务器的请求，并且可以监听服务器返回的响应数据。

const request = new XMLHttpRequest();

发送请求和处理响应

XML HTTP 请求对象有一个 open() 方法用于指定请求方法和 URL，以及一个 send() 方法用于向服务器发送请求。此外，我们还可以使用 onreadystatechange 属性来监听服务器响应的变化并执行自定义操作。

const request = new XMLHttpRequest();
request.open('GET', '/api/get-data');
request.send();

request.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    const data = JSON.parse(this.responseText);
    // 处理响应数据
  }
};

处理错误和超时

当 XML HTTP 请求发生错误或超时时，我们可以使用 onerror 和 ontimeout 属性来进行处理。通常，我们会捕获这些错误并在界面上向用户显示一些错误信息。

const request = new XMLHttpRequest();
request.open('GET', '/api/get-data');
request.send();

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    if (this.status === 200) {
      const data = JSON.parse(this.responseText);
      // 处理响应数据
    } else {
      console.error('请求出错');
    }
  }
};

request.onerror = function () {
  console.error('请求失败');
};

request.ontimeout = function () {
  console.error('请求超时');
};

使用 Promise 封装 XML HTTP 请求

为了更好地处理异步请求，在 JavaScript 中我们通常会使用 Promise 来封装 XML HTTP 请求。这使得代码更加简洁并便于维护。

function request(method, url, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject('请求出错');
        }
      }
    };
    xhr.onerror = function () {
      reject('请求失败');
    };
    xhr.ontimeout = function () {
      reject('请求超时');
    };
    xhr.send(JSON.stringify(data));
  });
}

request('POST', '/api/add-data', { name: 'Alice' })
  .then((data) => {
    // 处理响应数据
  })
  .catch((error) => {
    // 处理错误信息
  });

总结

XML HTTP 请求是一种常用的 Web 技术，它使得我们能够在 JavaScript 中发出对服务器的请求并处理响应数据。我们可以使用 XMLHttpRequest 构造函数创建一个 XML HTTP 请求对象，并使用其方法和属性来控制请求行为和监听响应状态。在使用过程中，我们还应该注意错误处理和超时问题，以免影响用户体验。最后，我们还可以使用 Promise 来封装 XML HTTP 请求，以使代码更简洁和易于维护。