动态加载 HTML 片段：AJAX 与 fetch() 的对比

在现代 Web 开发中，动态加载 HTML 片段而不刷新整个页面已成为提升用户体验的常见做法。本文将对比两种实现这一功能的主流技术：传统 AJAX 和现代的 fetch() API。

传统 AJAX 方法

AJAX (Asynchronous JavaScript and XML) 是一种使用 XMLHttpRequest 对象与服务器交互的技术。

javascript 复制代码

function loadHTMLWithAJAX(url, targetElementId) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById(targetElementId).innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

AJAX 的优点

广泛兼容性，支持几乎所有浏览器
长期存在，有大量现有代码和教程资源
进度事件支持（上传/下载进度）

AJAX 的缺点

回调式 API 不够直观
错误处理较为复杂
需要手动处理响应数据类型

现代 fetch() API

fetch() 是 ES6 引入的基于 Promise 的新 API，提供了更简洁的异步请求方式。

javascript 复制代码

function loadHTMLWithFetch(url, targetElementId) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(html => {
            document.getElementById(targetElementId).innerHTML = html;
        })
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
        });
}

fetch() 的优点

基于 Promise 的简洁 API
更直观的错误处理
内置对多种数据类型的支持（JSON, text, blob 等）
更现代的语法，可与 async/await 配合使用

fetch() 的缺点

旧版浏览器需要 polyfill
默认不会发送或接收 cookies（需要配置 credentials）
没有内置的超时取消机制

性能对比

两者在性能上没有显著差异，因为底层都是基于浏览器的网络栈。但 fetch() 通常能提供更简洁的代码结构，特别是在处理复杂请求链时。

最佳实践建议

新项目：优先使用 fetch()，因其更现代、更简洁
需要最大兼容性：使用 AJAX 或为 fetch() 添加 polyfill
复杂应用：考虑使用 axios 等封装库，它结合了两种方法的优点

进阶用法：async/await 版本

使用 async/await 可以让 fetch() 代码更加清晰：

javascript 复制代码

async function loadHTMLWithFetchAsync(url, targetElementId) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const html = await response.text();
        document.getElementById(targetElementId).innerHTML = html;
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

结论

虽然 AJAX 仍然有效且在某些场景下必要，fetch() API 代表了 Web 平台的进步方向。它提供了更简洁、更强大的接口来处理网络请求。对于大多数现代 Web 应用，fetch() 是动态加载 HTML 片段的推荐选择。