JavaScript请求数据的四种方法Ajax、jQuery 、Fetch和 Axiosxiangjie详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">前言</a></li><li><a href="#_label1">一、为什么需要前端网络请求方案？</a></li><li><a href="#_label2">二、原生 AJAX（XMLHttpRequest）</a></li><li><a href="#_label3">三、jQuery AJAX</a></li><li><a href="#_label4">四、Fetch API</a></li><li><a href="#_label5">五、Axios</a></li><li><a href="#_label6">总结</a></li></ul></div><p class="maodian"><a name="_label0"></a></p><h2>前言</h2><p>在前端开发的整个历程中，<strong>与后端进行数据交互、发送网络请求</strong> 是核心业务需求。从早期的原生 AJAX 解决「无刷新请求」的痛点，到 jQuery 封装的便捷 AJAX，再到 ES6 原生的 Fetch API，最后到如今前端工程化标配的 Axios 库，前端请求方案一直在迭代优化。</p>
<p class="maodian"><a name="_label1"></a></p><h2>一、为什么需要前端网络请求方案？</h2>
<p>在前端发展的早期，网页是「静态」的，数据由后端渲染完成后一次性返回给浏览器，页面和数据强耦合。如果想要更新页面中的某一部分数据，必须<strong>刷新整个页面</strong>，体验极差，且浪费网络资源。</p>
<p>为了解决这个问题，<strong>异步 JavaScript 和 XML（Asynchronous JavaScript And XML）</strong> 技术应运而生，核心思想是：<strong>在不刷新整个页面的情况下，通过 JavaScript 异步向服务器发送请求、获取数据、更新页面局部内容</strong>。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026010908575842.png" /></p>
<p>这个技术被我们统称为 <strong>AJAX</strong>，它不是一门新语言，而是一套技术组合方案。后续所有的请求库 / API（jQuery-AJAX、Fetch、Axios），本质都是<strong>对「异步请求核心逻辑」的封装和优化</strong>，底层依然基于浏览器的原生能力，只是在语法、兼容性、易用性上做了升级。</p>
<blockquote><p>补充：早期 AJAX 主要用来请求 XML 格式数据，如今主流是 JSON 格式，但「AJAX」这个名称被保留了下来，泛指所有前端异步网络请求。</p></blockquote>
<p class="maodian"><a name="_label2"></a></p><h2>二、原生 AJAX（XMLHttpRequest）</h2>
<p>Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它使用 XMLHttpRequest 对象发送异步请求，并处理服务器返回的数据。Ajax 可以实现无刷新加载数据，提高用户体验。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026010908575855.png" /></p>
<div class="jb51code"><pre class="brush:js;">// 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);
}
}
}</pre></div>
<p>POST 请求需额外设置请求头 + 传参：</p>
<div class="jb51code"><pre class="brush:js;">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');</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>三、jQuery AJAX</h2>
<p>jQuery 是一个轻量级的 JavaScript 库，简化了 HTML <a href="https://cloud.baidu.com/product/doc.html" rel="external nofollow" target="_blank" title="文档">文档</a>遍历、事件处理、动画和 Ajax 交互。通过 jQuery，我们可以使用 $.ajax() 方法发送 Ajax 请求，该方法提供了更丰富的配置选项，并且支持多种请求类型（GET、POST 等）。</p>
<div class="jb51code"><pre class="brush:js;">$.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);
}
});</pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>四、Fetch API</h2>
<p>Fetch API 是一种现代的替代方案，用于在浏览器中发送 HTTP 请求。Fetch API 基于 Promise，使得异步操作更加简洁明了。Fetch API 支持同步和异步请求，返回一个 Promise 对象，可以方便地处理响应数据。</p>
<div class="jb51code"><pre class="brush:js;">// 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);
});</pre></div>
<p>POST 请求示例：</p>
<div class="jb51code"><pre class="brush:js;">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));</pre></div>
<p>结合 <code>async/await</code> 语法糖:</p>
<div class="jb51code"><pre class="brush:js;">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();</pre></div>
<p class="maodian"><a name="_label5"></a></p><h2>五、Axios</h2>
<p>Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了一种简单的方法来发送 GET、POST 等请求，并处理响应数据。Axios 具有许多实用的特性，如拦截请求和响应、转换请求和响应数据、取消请求等。</p>
<div class="jb51code"><pre class="brush:js;">// 方式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);
}
}</pre></div>
<p>POST 请求示例:</p>
<div class="jb51code"><pre class="brush:js;">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));</pre></div>
<p>这四种方法各有优缺点，您可以根据项目需求和实际情况选择合适的方法来发送 HTTP 请求。其中，Fetch API 和 Axios 是目前比较推荐的选择，因为它们提供了更好的错误处理和更丰富的配置选项。同时，这些方法都需要进行适当的错误处理和异常捕获，以确保应用程序的稳定性和可靠性。</p>
<p class="maodian"><a name="_label6"></a></p><h2>总结</h2>
頁:
[1]