<计算机与网络篇> AJAX

2023-12-25  本文已影响0人  Max_Law

AJAX（Asynchronous JavaScript and XML）是一种 web 开发技术，它允许网页在不进行整体刷新的情况下与服务器进行异步数据交换和更新部分内容。这个词在 2005 年由 Jesse James Garrett 提出。

AJAX 的核心原理是利用浏览器内置的 XMLHttpRequest （XHR）对象或 Fetch API，这些接口可以发送 HTTP 请求到服务器，并接收服务器的响应。以下是一些 AJAX 技术的关键特性：

  1. 异步通信：这意味着用户可以在等待服务器响应时继续与其他页面元素交互，提高了应用的响应性和用户体验。

  2. 无刷新更新：通过 AJAX，开发者可以更新网页的部分内容，而无需重新加载整个页面，这使得应用感觉更加流畅和快速。

  3. 多种数据格式：虽然名为 AJAX，但并不限于只使用 XML。实际上，JSON（JavaScript Object Notation）已经成为更常用的数据交换格式，此外还可以处理 HTML、文本和其他格式的数据。

  4. JavaScript 和 DOM：AJAX 应用程序通常结合使用 JavaScript 和 Document Object Model (DOM) 来动态修改网页内容。当从服务器接收到新数据时，JavaScript 可以解析这些数据，并通过操作 DOM 元素来更新页面。

XMLHttpRequest （XHR）

XHR 是 AJAX 技术的核心组成部分。虽然名为 XMLHttpRequest，但它不仅可以处理 XML，还可以处理各种数据格式，如 JSON、HTML、文本等。现代 Web 开发中，JSON 已经成为主流的数据交换格式。

在 JavaScript 中，可以通过创建一个新的 XMLHttpRequest 对象来发起请求，然后使用其提供的方法和属性（如 open(), send(), addEventListener(), responseText 等）来配置请求、发送数据、接收响应以及处理各种请求状态变化。

使用 XMLHttpRequest （XHR）对象实现 HTTP 请求通常涉及以下步骤：

  1. 创建 XMLHttpRequest 对象：

    var xhr = new XMLHttpRequest();

  2. 配置请求参数：
    使用 open() 方法设置请求的类型（GET、POST 等）、请求的 URL 和是否异步执行请求。通常情况下，你会希望请求是异步的，以便在等待服务器响应时不会阻塞用户的其他操作。

    xhr.open('GET', 'https://example.com/api/data', true);

  3. 设置请求头（可选）：
    如果需要，可以使用 setRequestHeader() 方法设置自定义的请求头信息。

    xhr.setRequestHeader('Content-Type', 'application/json');

  4. 注册回调函数：
    为了处理服务器的响应，需要为 XHR 对象的不同状态变化注册事件监听器。最常见的事件是 onreadystatechange，当请求的状态改变时，这个事件会被触发。

    xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 处理成功的响应
    console.log(xhr.responseText);
  } else if (xhr.readyState === XMLHttpRequest.DONE) {
    // 处理错误或非200状态码的响应
    console.error('Error occurred: ' + xhr.status);
  }
};

  5. 发送请求：
    使用 send() 方法发送请求。如果请求方法是 POST、PUT 或者 PATCH，通常需要传递一个请求体作为参数。

    xhr.send(null); // 对于 GET 请求，通常不需要传递请求体

    对于 POST 请求，如果需要发送 JSON 数据，可以这样做：

    xhr.open('POST', 'https://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  // ...
};
const data = { key: 'value' };
xhr.send(JSON.stringify(data));

以上就是一个基本的使用 XMLHttpRequest 实现 HTTP 请求的示例。根据实际需求，你可能需要对错误处理、超时设置、以及响应数据的解析进行更详细的处理。

Fetch API

Fetch API 是一种现代的、基于 Promise 的网络请求接口，它被设计用来替代传统的 XMLHttpRequest (XHR) API 进行 AJAX 异步通信。Fetch API 提供了一个更加简洁和灵活的方式来发送 HTTP 请求并处理响应，它是 JavaScript 中的一个内置功能，已在大多数现代浏览器中得到支持。

以下是一些 Fetch API 的关键组成部分和特性：

1.fetch() 函数

这是 Fetch API 的核心函数，用于发起网络请求。基本语法如下：

fetch(url, options)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

fetch() 接受两个参数：请求的 URL 和一个可选的配置对象（options），该对象可以包含诸如请求方法（GET、POST 等）、请求头、请求体等信息。

Response 对象

fetch() 函数返回一个 Promise，该 Promise 在解析过程中 resolve 为一个 Response 对象。Response 对象包含了服务器的响应信息，如状态码、响应头和响应体。通过调用 Response 对象的方法，如 .json(), .text(), .blob(), .arrayBuffer() 等，可以获取不同格式的响应数据。

2.Request 对象

在 Fetch API 中，可以创建一个 Request 对象来更详细地配置请求。Request 对象包含了请求的 URL、方法、头、 body 等信息。这个对象可以在 fetch() 函数中作为第一个参数直接使用，或者通过一个新的 Request 构造函数创建。

3.Headers 对象

Fetch API 使用 Headers 对象来表示 HTTP 头部信息。可以通过新建一个 Headers 对象，并使用其方法来添加、删除或修改头部字段。

4.AbortController

这是一个可选的控制器对象，用于在请求正在进行时取消它。通过创建一个 AbortController 实例，并将其信号传递给 fetch() 的选项，可以在需要时调用其 abort() 方法来取消请求。

5.Streams API

Fetch API 还与 Streams API 密切相关，允许开发者以流的形式处理大型响应，而不是一次性加载整个响应内容到内存中。

Fetch API 的优点包括更好的代码结构、基于 Promise 的异步处理、原生支持以及对现代 web 开发实践的更好适应。然而，需要注意的是，Fetch API 对错误处理和状态码的处理方式与 XHR 略有不同，可能需要一些额外的注意和调整。

XHR 与 Fetch API 错误处理的差异

  1. 错误处理：

    • XHR：在 XHR 中，通常通过检查 xhr.readyState 和 xhr.status 来处理错误。如果 readyState 为 4（表示请求已完成）且 status 不等于 200（表示成功），那么通常认为发生了错误。开发者可以使用 onreadystatechange 事件处理程序来捕获这些错误。

    • Fetch：Fetch API 基于 Promises，所以错误处理是通过 .catch() 方法来实现的。当请求遇到任何错误（如网络错误、服务器错误或解析错误）时，Promise 将会被拒绝，然后可以在 .catch() 中处理这些错误。

  2. 状态码处理：

    • XHR：在 XHR 中，可以通过 xhr.status 属性直接访问 HTTP 状态码。开发者可以在 onreadystatechange 事件处理程序中检查特定的状态码并进行相应的处理。

    • Fetch：在 Fetch API 中，虽然可以通过 response.ok 属性（布尔值）来检查请求是否成功（通常 ok 为 true 表示状态码在 200-299 范围内），但直接访问状态码需要调用 response.status。此外，由于 Fetch API 的设计，即使请求失败（例如，状态码为 404 或 500），fetch() 返回的 Promise 仍然会解析，只是解析的结果是一个错误的 Response 对象。因此，需要在 .then() 中检查 response.ok 或者在 .catch() 中处理错误。

以下是一个对比示例：

// XHR 错误处理和状态码检查
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error occurred: ' + xhr.status);
    }
  }
};
xhr.send(null);

// Fetch 错误处理和状态码检查
fetch('https://example.com/api/data')
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error occurred: ' + response.status);
    }
  })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

在这个示例中，可以看到 Fetch API 使用 .then() 和 .catch() 来处理成功和失败的情况，而 XHR 则是在一个事件处理程序中检查状态和处理结果。

常见的 HTTP 状态码

上一篇 下一篇

猜你喜欢

热点阅读