获取 URL 响应 - JavaScript

在前端开发中，经常需要通过 JavaScript 获取 URL 的响应。这可以通过 AJAX 或 Fetch API 来实现。在本文中，我们将介绍这两种方法以及它们的使用示例。

AJAX

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是一种在无需重新加载整个页面的情况下更新网页的技术。大多数 AJAX 应用程序使用 XMLHttpRequest（XHR）对象实现。以下是使用 AJAX 获取 URL 反应的示例代码：

const xhr = new XMLHttpRequest();
const url = 'https://example.com'; // URL to fetch

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText); // Display the response
    } else {
      console.log('Error:', xhr.statusText);
    }
  }
};

xhr.open('GET', url, true);
xhr.send(null);

首先，我们创建了一个 XMLHttpRequest 对象，并指定了要获取的 URL。然后，我们使用 onreadystatechange 事件监听器来检查请求状态的变化。当 readyState 变为 XMLHttpRequest.DONE（即 4）时，我们检查状态代码以确定请求是否成功。如果状态代码为 200，我们将响应文本打印到控制台中。

Fetch API

Fetch API 是一个基于 Promise 的标准化 Web API，用于替代 XMLHttpRequest。它提供了一种简单和更加强大的方式来发起网络请求。以下是使用 Fetch API 获取 URL 反应的示例代码：

const url = 'https://example.com'; // URL to fetch

fetch(url)
  .then(response => {
    if (response.ok) {
      return response.text(); // Return the response as text
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(text => console.log(text)) // Display the response
  .catch(error => console.error('Error:', error));

在这个示例中，我们使用 fetch() 函数来获取 URL。它返回一个 Promise 对象，我们可以使用 then() 方法来访问响应对象。如果响应状态为 ok，我们将响应作为文本返回。否则，我们将抛出错误。

总结

通过使用 AJAX 或 Fetch API，我们可以轻松地获取 URL 的响应。如果您需要执行更高级的操作，例如在请求期间添加标头或检查响应的类型，请参考相关文档。