JS实现AJAX请求的几种方法

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JS如何实现AJAX请求？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

实现AJAX请求的核心方法有XMLHttpRequest和Fetch API两种。1. XMLHttpRequest适用于需要兼容旧浏览器的场景，支持超时设置、进度监听和请求中止，但基于事件回调的写法较繁琐，易导致回调地狱；2. Fetch API是现代标准，基于Promise，语法简洁、可读性强，支持链式调用和流式处理，但需手动处理HTTP错误状态，并通过AbortController实现请求中止。在现代开发中推荐优先使用Fetch API，若需支持老旧浏览器则选用XMLHttpRequest，两者均需妥善处理网络错误、超时及JSON解析异常以提升应用健壮性。

JavaScript 实现 AJAX 请求的核心在于不刷新整个页面就能与服务器交换数据。这通常通过两种方式完成：一种是老牌的 XMLHttpRequest 对象，另一种是更现代、基于 Promise 的 Fetch API。它们都能让你异步地获取或发送数据，极大地提升用户体验。

解决方案：

在 JavaScript 中实现 AJAX 请求，主要有两种主流方式：XMLHttpRequest 和 Fetch API。

使用 XMLHttpRequest：

// GET 请求示例
function fetchDataWithXHR(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true); // true 表示异步
    xhr.timeout = 5000; // 设置超时，5秒

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            try {
                const data = JSON.parse(xhr.responseText);
                console.log('GET 请求成功:', data);
                // 这里可以处理返回的数据
            } catch (e) {
                console.error('解析 JSON 失败:', e);
            }
        } else {
            console.error('GET 请求失败，状态码:', xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error('网络错误或请求被阻止。');
    };

    xhr.ontimeout = function() {
        console.error('请求超时。');
    };

    xhr.send();
}

// POST 请求示例
function postDataWithXHR(url, data) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json'); // 通常发送 JSON 数据

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            try {
                const response = JSON.parse(xhr.responseText);
                console.log('POST 请求成功:', response);
            } catch (e) {
                console.error('解析 JSON 失败:', e);
            }
        } else {
            console.error('POST 请求失败，状态码:', xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error('网络错误或请求被阻止。');
    };

    xhr.send(JSON.stringify(data)); // 将数据转换为 JSON 字符串发送
}

// 示例调用 (假设有可用的 API 端点)
// fetchDataWithXHR('https://api.example.com/data');
// postDataWithXHR('https://api.example.com/submit', { name: 'Test', value: 123 });

使用 Fetch API：

// GET 请求示例
function fetchDataWithFetch(url) {
    fetch(url)
        .then(response => {
            if (!response.ok) { // 检查 HTTP 状态码是否在 200-299 范围内
                throw new Error(`HTTP 错误！状态码: ${response.status}`);
            }
            return response.json(); // 解析 JSON 响应
        })
        .then(data => {
            console.log('GET 请求成功:', data);
            // 处理数据
        })
        .catch(error => {
            console.error('GET 请求失败:', error);
            // 处理网络错误、解析错误或 HTTP 错误
        });
}

// POST 请求示例
function postDataWithFetch(url, data) {
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data) // 将数据转换为 JSON 字符串
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP 错误！状态码: ${response.status}`);
        }
        return response.json();
    })
    .then(responseJson => {
        console.log('POST 请求成功:', responseJson);
    })
    .catch(error => {
        console.error('POST 请求失败:', error);
    });
}

// 示例调用 (假设有可用的 API 端点)
// fetchDataWithFetch('https://api.example.com/data');
// postDataWithFetch('https://api.example.com/submit', { name: 'Test', value: 123 });

XMLHttpRequest 与 Fetch API，我该如何选择？

这确实是个让人纠结的问题，毕竟两个都能干活。坦白说，如果不是为了兼容那些老掉牙的浏览器（比如 IE11 甚至更早，尽管现在它们基本已经退出历史舞台了），我个人在新项目中几乎无脑选 Fetch API。

XMLHttpRequest 是老兵了，它诞生得很早，功能也确实强大。你可以用它控制请求的方方面面，比如设置各种事件监听器（onload、onerror、onprogress 等）、手动中止请求、设置超时等等。但它的缺点也很明显：基于事件回调的模式，写起来比较啰嗦，尤其当你需要连续发起多个请求时，很容易陷入“回调地狱”（Callback Hell），代码可读性直线下降，维护起来也让人头疼。虽然可以用 Promise 对它进行封装，但那又多了一层抽象。

Fetch API 则是一个现代的、基于 Promise 的替代方案。它的设计理念更符合现代 JavaScript 异步编程的习惯。你看它的代码，是不是比 XMLHttpRequest 清爽多了？then().catch() 的链式调用，让异步操作的流程变得非常清晰，错误处理也集中且优雅。Fetch 默认不发送 Cookie，需要额外配置 credentials 选项，这在安全性上考虑得更周到。它还支持更高级的特性，比如流式处理响应（Stream API），对于大文件下载或者实时数据流处理非常有优势。当然，它也有一些“小脾气”，比如默认不抛出 HTTP 错误（例如 404 或 500），你得手动检查 response.ok 属性；另外，它没有内置的请求中止机制，需要配合 AbortController 来实现。

总的来说，如果你追求代码的简洁性、可读性，并且目标浏览器环境较新，Fetch API 绝对是首选。它让你的异步代码看起来更像同步代码，逻辑流更顺畅。但如果你的项目需要支持非常老的浏览器，或者需要一些 XMLHttpRequest 特有的细粒度控制（虽然大部分 Fetch 也能做到，只是方式不同），那么 XMLHttpRequest 依然有它的用武之地。多数情况下，我会倾向于拥抱新标准。

处理异步请求中的常见错误与挑战

在实际开发中，异步请求远不是“发出去就完事”那么简单。各种意想不到的问题随时可能冒出来，让你的用户体验瞬间“崩塌”。理解并妥善处理这些错误和挑战，是构建健壮应用的关键。

一个最常见的场景就是网络错误。用户可能断网了，或者服务器宕机了，这时候请求根本就发不出去或者收不到响应。XMLHttpRequest 会触发 onerror 事件

文中关于JavaScript,ajax,Promise,XMLHttpRequest,fetchAPI的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS实现AJAX请求的几种方法》文章吧，也可关注golang学习网公众号了解相关技术文章。