测验

尽可能详细地解释 AJAX

主题
JavaScript网络
在GitHub上编辑

TL;DR

AJAX(异步 JavaScript 和 XML)促进客户端和服务器之间的异步通信,无需重新加载即可实现对网页的动态更新。它使用 XMLHttpRequestfetch() API 等技术在后台发送和接收数据。在现代 Web 应用程序中,fetch() API 更常用于实现 AJAX。

使用 XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed: ' + xhr.status);
}
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();

使用 fetch()

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error('Fetch error:', error));

AJAX(异步 JavaScript 和 XML)

AJAX(异步 JavaScript 和 XML)是一组 Web 开发技术,在客户端使用许多 Web 技术来创建异步 Web 应用程序。与每次用户交互都会触发完全页面重新加载的传统 Web 应用程序不同,使用 AJAX,Web 应用程序可以异步地(在后台)向服务器发送数据并从服务器检索数据,而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离,AJAX 允许网页(以及扩展的 Web 应用程序)动态更改内容,而无需重新加载整个页面。实际上,由于 JSON 具有 JavaScript 原生的优势,现代实现通常使用 JSON 而不是 XML。

传统上,AJAX 是使用 XMLHttpRequest API 实现的,但 fetch() API 更适合现代 Web 应用程序,也更容易使用。

XMLHttpRequest API

以下是其使用方式的一个基本示例:

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed: ' + xhr.status);
}
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();

fetch() API

或者,fetch() API 提供了一种基于 Promise 的现代方法来发出 AJAX 请求。它在现代 Web 应用程序中更常用。

以下是如何使用它:

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error('Fetch error:', error));

AJAX 如何工作?

在现代浏览器中,AJAX 使用 fetch() API 而不是 XMLHTTPRequest 完成,因此我们将解释 fetch() API 的工作原理:

  1. 发出请求fetch() 函数启动异步请求,从 URL 获取资源。它接受一个强制性参数——要获取的资源的 URL,并可以选择接受第二个参数——一个 options 对象,该对象允许使用 HTTP 方法、标头、正文等选项配置 HTTP 请求。

    fetch('https://api.example.com/data', {
    method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.
    headers: {
    'Content-Type': 'application/json',
    },
    });
  2. 返回一个 promisefetch() 函数返回一个 Promise,该 Promise 解析为表示来自服务器的响应的 Response 对象。此 Promise 需要使用 .then()async/await 进行处理。

  3. 处理响应Response 对象提供定义如何处理正文内容的方法,例如 .json() 用于解析 JSON 数据,.text() 用于纯文本,.blob() 用于二进制数据等。

    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error:', error));
  4. 异步性质 fetch API 是异步的,允许浏览器在等待服务器响应时继续执行其他任务。这可以防止阻塞主线程并提供更好的用户体验。当作为事件循环的一部分执行时,then()catch() 回调被放入微任务队列中。

  5. 请求选项 fetch() 的可选第二个参数允许配置请求的各个方面,例如 HTTP 方法、标头、正文、凭据、缓存行为等。

  6. 错误处理 请求期间的错误(例如网络故障或无效响应)通过使用 .catch() 方法或带有 async/await 的 try/catch 块在 Promise 链中捕获并传播。

fetch() API 提供了一种基于 Promise 的现代方法,用于在 JavaScript 中发出 HTTP 请求,取代了旧的 XMLHttpRequest API。它提供了一种更简单、更灵活的方式来与 API 交互并从服务器获取资源,同时集成了 CORS 等高级 HTTP 概念和其他扩展。

AJAX 的优缺点

虽然 AJAX 很有用,但使用它也有一些需要考虑的地方。阅读更多关于 AJAX 的优缺点

延伸阅读

在GitHub上编辑