前端 AJAX 全面解析：同步 vs 异步，实战场景与最佳实践

AJAX 详解及其在前端开发中的应用

1. 什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载页面的情况下与服务器交换数据的技术。尽管名称中包含 XML，但现代前端开发更多使用 JSON 作为数据格式。

它的核心是 XMLHttpRequest（XHR）或 fetch API，它们允许浏览器向服务器发送 HTTP 请求并接收响应，从而实现动态、无刷新数据交互。

---

2. AJAX 的核心 API

1. XMLHttpRequest（传统方式）
2. fetch（现代方式）
3. axios（基于 Promise 的封装库）
4. jQuery.ajax()（jQuery 提供的简化接口）

---

3. AJAX 的典型使用场景

3.1. 表单提交

• 传统表单提交会刷新整个页面，而 AJAX 可以让表单提交后动态更新部分页面。

示例（使用 fetch 实现异步表单提交）：

document.querySelector("#myForm").addEventListener("submit", function (e) {
    e.preventDefault();
    let formData = new FormData(this);

    fetch("/submit", {
        method: "POST",
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log("提交成功:", data))
    .catch(error => console.error("错误:", error));
});

---

3.2. 无限滚动加载

• 例如在微博、抖音等应用中，当用户滚动到底部时，自动加载更多内容。

示例（监听 scroll 事件，使用 fetch 加载数据）&#