AJAX（Asynchronous JavaScript and XML）详解与应用

一、什么是 AJAX？

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是一种用于创建异步 Web 应用程序的技术。它可以在不重新加载整个网页的情况下，与服务器进行数据交换，从而提供更好的用户体验。

1.1 AJAX 的核心特点

• 异步通信：数据请求不会阻塞页面，提升用户体验。
• 减少服务器负担：只获取需要的数据，减少流量。
• 提升用户体验：网页响应速度更快，减少页面刷新带来的等待时间。
• 与多种数据格式兼容：支持 JSON、XML、HTML、文本等格式的数据。

1.2 AJAX 的组成

AJAX 并不是单一的技术，而是多种技术的组合：

• JavaScript：处理前端交互和数据请求。
• XMLHttpRequest (XHR) 或 Fetch API：与服务器通信。
• JSON/XML：服务器返回的数据格式。
• HTML 和 CSS：页面结构和样式。
• DOM 操作：更新页面内容。

二、如何使用 AJAX

在现代 Web 开发中，主要有两种方式使用 AJAX：

1. XMLHttpRequest（XHR）（传统方法）
2. Fetch API（现代方法）

2.1 使用 XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.onreadystatechange = function () {
   
    if (xhr.readyState === 4 && xhr.status === 200) {
   
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

XHR 解析

• open(method, url, async)：指定请求方式（GET/POST）、目标 URL 和是否异步。
• onreadystatechange：监听请求状态变化，readyState=4 表示请求完成，status=200 表示成功。
• send()：发送请求。

2.2 使用 Fetch API（推荐）

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json()