js怎么实现ajax请求-js教程-PHP中文网

js怎么实现ajax请求

畫卷琴夢

发布： 2025-08-05 08:55:01

原创

503人浏览过

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

js怎么实现ajax请求

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 });

登录后复制