尽可能详细地解释 AJAX
TL;DR
AJAX(异步 JavaScript 和 XML)促进客户端和服务器之间的异步通信,无需重新加载即可实现对网页的动态更新。它使用 XMLHttpRequest
或 fetch()
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 的工作原理:
-
发出请求:
fetch()
函数启动异步请求,从 URL 获取资源。它接受一个强制性参数——要获取的资源的 URL,并可以选择接受第二个参数——一个options
对象,该对象允许使用 HTTP 方法、标头、正文等选项配置 HTTP 请求。fetch('https://api.example.com/data', {method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.headers: {'Content-Type': 'application/json',},}); -
返回一个 promise:
fetch()
函数返回一个Promise
,该Promise
解析为表示来自服务器的响应的Response
对象。此Promise
需要使用.then()
或async/await
进行处理。 -
处理响应:
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)); -
异步性质
fetch
API 是异步的,允许浏览器在等待服务器响应时继续执行其他任务。这可以防止阻塞主线程并提供更好的用户体验。当作为事件循环的一部分执行时,then()
和catch()
回调被放入微任务队列中。 -
请求选项
fetch()
的可选第二个参数允许配置请求的各个方面,例如 HTTP 方法、标头、正文、凭据、缓存行为等。 -
错误处理 请求期间的错误(例如网络故障或无效响应)通过使用
.catch()
方法或带有async/await
的 try/catch 块在 Promise 链中捕获并传播。
fetch()
API 提供了一种基于 Promise 的现代方法,用于在 JavaScript 中发出 HTTP 请求,取代了旧的 XMLHttpRequest
API。它提供了一种更简单、更灵活的方式来与 API 交互并从服务器获取资源,同时集成了 CORS 等高级 HTTP 概念和其他扩展。
AJAX 的优缺点
虽然 AJAX 很有用,但使用它也有一些需要考虑的地方。阅读更多关于 AJAX 的优缺点。