JavaScript 请求数据的四种方法：Ajax、jQuery 、Fetch和 Axios

在前端开发的整个历程中，与后端进行数据交互、发送网络请求 是核心业务需求。从早期的原生 AJAX 解决「无刷新请求」的痛点，到 jQuery 封装的便捷 AJAX，再到 ES6 原生的 Fetch API，最后到如今前端工程化标配的 Axios 库，前端请求方案一直在迭代优化。

一、为什么需要前端网络请求方案？

在前端发展的早期，网页是「静态」的，数据由后端渲染完成后一次性返回给浏览器，页面和数据强耦合。如果想要更新页面中的某一部分数据，必须刷新整个页面，体验极差，且浪费网络资源。

为了解决这个问题，异步 JavaScript 和 XML（Asynchronous JavaScript And XML） 技术应运而生，核心思想是：在不刷新整个页面的情况下，通过 JavaScript 异步向服务器发送请求、获取数据、更新页面局部内容。

这个技术被我们统称为 AJAX ，它不是一门新语言，而是一套技术组合方案。后续所有的请求库 / API（jQuery-AJAX、Fetch、Axios），本质都是对「异步请求核心逻辑」的封装和优化，底层依然基于浏览器的原生能力，只是在语法、兼容性、易用性上做了升级。

补充：早期 AJAX 主要用来请求 XML 格式数据，如今主流是 JSON 格式，但「AJAX」这个名称被保留了下来，泛指所有前端异步网络请求。

二、原生 AJAX（XMLHttpRequest）

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它使用 XMLHttpRequest 对象发送异步请求，并处理服务器返回的数据。Ajax 可以实现无刷新加载数据，提高用户体验。

javascript 复制代码

// 1. 创建XHR核心对象
const xhr = new XMLHttpRequest();
// 2. 初始化请求：请求方式、请求地址、是否异步(true)
xhr.open('GET', 'http://127.0.0.1:8000/server?id=100', true);
// 3. 发送请求
xhr.send();
// 4. 绑定状态改变事件，处理响应结果
xhr.onreadystatechange = function () {
    // readyState=4 表示请求生命周期完成（请求成功/失败/中断）
    if (xhr.readyState === 4) {
        // status>=200 && status<300 表示HTTP请求成功
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log('请求成功：', xhr.response);
        } else {
            console.log('请求失败，状态码：', xhr.status);
        }
    }
}

POST 请求需额外设置请求头 + 传参：

javascript 复制代码

xhr.open('POST', 'http://127.0.0.1:8000/server', true);
// 设置请求体格式为表单格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求并携带参数
xhr.send('username=ylx&age=20');

三、jQuery AJAX

jQuery 是一个轻量级的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，我们可以使用 $.ajax() 方法发送 Ajax 请求，该方法提供了更丰富的配置选项，并且支持多种请求类型（GET、POST 等）。

javascript 复制代码

$.ajax({
    url: 'http://127.0.0.1:8000/server', // 请求地址
    type: 'GET', // 请求方法 GET/POST
    data: {id:100, vip:7}, // 请求参数（自动拼接/序列化）
    headers: {name:'admin'}, // 自定义请求头
    dataType: 'json', // 期望返回的数据类型，自动解析JSON
    success: function(res) { // 请求成功的回调
        console.log('请求成功：', res);
    },
    error: function(err) { // 请求失败的回调
        console.log('请求失败：', err);
    }
});

四、Fetch API

Fetch API 是一种现代的替代方案，用于在浏览器中发送 HTTP 请求。Fetch API 基于 Promise，使得异步操作更加简洁明了。Fetch API 支持同步和异步请求，返回一个 Promise 对象，可以方便地处理响应数据。

javascript 复制代码

// Fetch返回Promise对象，支持.then/.catch链式调用
fetch('http://127.0.0.1:8000/server?id=100', {
    method: 'GET', // 请求方法，默认GET
    headers: {name: 'admin'} // 自定义请求头
})
.then(response => {
    // 核心注意：fetch的第一层then，拿到的是「响应对象」，不是真实数据
    // 需要调用对应方法解析响应体：json()/text()/blob()
    return response.json(); // 解析JSON格式数据，返回新的Promise
})
.then(data => {
    console.log('请求成功：', data);
})
.catch(err => {
    console.log('请求失败：', err);
});

POST 请求示例：

javascript 复制代码

fetch('http://127.0.0.1:8000/server', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' // JSON格式请求体
    },
    body: JSON.stringify({username: 'admin', age: 20}) // 请求体必须序列化
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));

结合 async/await 语法糖:

javascript 复制代码

async function getData() {
    try {
        const response = await fetch('http://127.0.0.1:8000/server');
        const data = await response.json();
        console.log('请求成功：', data);
    } catch (err) {
        console.log('请求失败：', err);
    }
}
getData();

五、Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了一种简单的方法来发送 GET、POST 等请求，并处理响应数据。Axios 具有许多实用的特性，如拦截请求和响应、转换请求和响应数据、取消请求等。

javascript 复制代码

// 方式1：链式调用
axios.get('http://127.0.0.1:8000/server', {
    params: {id:100, vip:7}, // URL拼接参数，自动序列化
    headers: {name: 'admin'} // 自定义请求头
})
.then(res => {
    console.log('请求成功：', res.data); // axios自动解析data，直接获取
})
.catch(err => {
    console.log('请求失败：', err);
});

// 方式2：async/await 语法糖
async function getData() {
    try {
        const res = await axios.get('http://127.0.0.1:8000/server', {
            params: {id:100}
        });
        console.log(res.data);
    } catch (err) {
        console.log(err);
    }
}

POST 请求示例:

javascript 复制代码

axios.post('http://127.0.0.1:8000/server', 
    {username: 'admin', age:20}, // POST请求体参数，自动序列化
    {headers: {gender: '男'}}
)
.then(res => console.log(res.data))
.catch(err => console.log(err));

// 通用写法（支持所有请求方法，最灵活）
axios({
    method: 'POST',
    url: 'http://127.0.0.1:8000/server',
    params: {id:100},
    data: {username: 'admin'},
    headers: {name: 'admin'}
}).then(res => console.log(res.data));

这四种方法各有优缺点，您可以根据项目需求和实际情况选择合适的方法来发送 HTTP 请求。其中，Fetch API 和 Axios 是目前比较推荐的选择，因为它们提供了更好的错误处理和更丰富的配置选项。同时，这些方法都需要进行适当的错误处理和异常捕获，以确保应用程序的稳定性和可靠性。