用纯js实现ajax请求

2023-10-10 00:11:05

AJAX：打造交互式网页应用的利器

在当今快节奏的互联网世界中，流畅无缝的网页交互至关重要。AJAX（异步 JavaScript 和 XML）应运而生，旨在为网页应用程序带来革命性的提升。借助 AJAX，你可以轻松构建出响应迅速、富有吸引力的应用，无需重新加载整个页面。

XMLHttpRequest：开启 AJAX 之门的关键

使用 AJAX 的第一步是创建一个 XMLHttpRequest 对象。这是 JavaScript 中一个内置对象，赋予你与服务器通信的超能力。只需几行代码，你就可以轻而易举地创建这个对象：

var xhr = new XMLHttpRequest();

设置请求：指定目标和规则

创建 XMLHttpRequest 对象后，下一步是配置请求的详细信息。这包括设置请求的方法（如 GET 或 POST）、目标 URL 以及必要的标头。例如，你可以这样设置一个 GET 请求：

xhr.open('GET', 'https://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

发送请求：敲响服务器之门

配置好请求后，点击发送按钮即可向服务器发出请求。这会触发一个后台进程，从服务器获取数据：

xhr.send();

处理响应：聆听服务器的答复

服务器返回响应后，你就可以处理它了。这包括检查响应状态代码和内容，看看服务器是否理解并正确处理了你的请求。一个成功的请求通常会返回 200 状态代码，表示一切顺利：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败
    console.error('请求失败');
  }
};

示例：从 JSON 文件中获取数据

让我们用一个具体的例子来展示 AJAX 的强大功能。假设你有一个名为 "data.json" 的 JSON 文件，其中包含一些数据。你可以使用以下代码从该文件中获取数据：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('请求失败');
  }
};
xhr.send();