JS發(fā)送請求的常用方法詳解
更新時間：2026年03月25日 08:24:30 作者：detayun
在Web開發(fā)中,JavaScript與服務(wù)器進行數(shù)據(jù)交互是核心需求之一,本文將詳細(xì)解析JavaScript發(fā)送請求的常用方法,幫助開發(fā)者根據(jù)場景選擇最適合的方案,需要的朋友可以參考下
在Web開發(fā)中，JavaScript與服務(wù)器進行數(shù)據(jù)交互是核心需求之一。從早期的原生AJAX到現(xiàn)代Fetch API，再到第三方庫如Axios，前端請求方案不斷迭代優(yōu)化。本文將詳細(xì)解析JavaScript發(fā)送請求的常用方法，幫助開發(fā)者根據(jù)場景選擇最適合的方案。
一、原生AJAX（XMLHttpRequest）
1. 基礎(chǔ)用法
XMLHttpRequest（XHR）是瀏覽器原生支持的異步請求技術(shù)，通過創(chuàng)建對象并配置請求參數(shù)實現(xiàn)數(shù)據(jù)交互：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 異步請求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
2. POST請求示例
發(fā)送JSON數(shù)據(jù)時需設(shè)置請求頭并序列化參數(shù)：
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 201) console.log('創(chuàng)建成功');
else console.error('請求失敗:', xhr.statusText);
}
};
xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));
3. 優(yōu)缺點分析
- 優(yōu)點：兼容性好（IE6+支持），可監(jiān)聽上傳進度（
upload.onprogress） - 缺點：
- 代碼冗長，需手動管理狀態(tài)
- 默認(rèn)不攜帶Cookie（需設(shè)置
xhr.withCredentials = true） - 跨域請求需后端配置
Access-Control-Allow-Credentials
二、Fetch API
1. 基礎(chǔ)用法
Fetch基于Promise實現(xiàn)更簡潔的異步操作：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error('Network error');
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2. POST請求示例
fetch('https://api.example.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Bob', age: 30 }),
credentials: 'include' // 攜帶Cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(console.error);
3. 高級特性
- 超時控制：通過
AbortController實現(xiàn)
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('https://api.example.com/data', { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') console.log('請求超時');
});
- 流式響應(yīng)：處理大文件時使用
response.body.getReader()
4. 優(yōu)缺點分析
- 優(yōu)點：語法簡潔，支持流式處理，天然Promise鏈?zhǔn)秸{(diào)用
- 缺點：
- 默認(rèn)不處理404/500等錯誤狀態(tài)碼（需手動檢查
response.ok） - 跨域請求需后端配置
Access-Control-Allow-Origin - 兼容性（IE不支持，需polyfill）
- 默認(rèn)不處理404/500等錯誤狀態(tài)碼（需手動檢查
三、第三方庫方案
1. Axios
核心特性
- 自動JSON轉(zhuǎn)換
- 請求/響應(yīng)攔截器
- 取消請求（
CancelToken） - 客戶端防御XSRF
示例代碼
axios.post('https://api.example.com/submit', { name: 'Charlie' })
.then(response => console.log(response.data))
.catch(error => {
if (error.response) {
console.error('服務(wù)器錯誤:', error.response.status);
} else {
console.error('網(wǎng)絡(luò)錯誤:', error.message);
}
});
2. jQuery AJAX
傳統(tǒng)寫法
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) { console.log(data); },
error: function(xhr, status, error) { console.error(error); }
});
簡寫形式
$.get('https://api.example.com/data', function(data) {
console.log(data);
});
四、特殊場景方案
1. 表單模擬提交（PUT/DELETE）
通過隱藏表單實現(xiàn)非GET/POST方法的提交：
function submitWithMethod(url, method, data) {
const form = document.createElement('form');
form.method = 'POST'; // 表單原生不支持PUT/DELETE
form.action = url;
// 添加_method字段模擬真實HTTP方法
const methodInput = document.createElement('input');
methodInput.type = 'hidden';
methodInput.name = '_method';
methodInput.value = method;
form.appendChild(methodInput);
// 添加數(shù)據(jù)字段
Object.entries(data).forEach(([key, value]) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
// 使用示例
submitWithMethod('/orders/123', 'PUT', { status: 'shipped' });
2. 文件上傳進度監(jiān)控
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);
// 上傳進度事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上傳進度: ${percent}%`);
}
};
xhr.send(new FormData(document.getElementById('uploadForm')));五、選擇建議
| 場景 | 推薦方案 | 理由 |
|---|---|---|
| 現(xiàn)代瀏覽器開發(fā) | Fetch API | 語法簡潔，支持流式處理，與Promise生態(tài)無縫集成 |
| 需要兼容IE | Axios | 自動降級處理，提供統(tǒng)一的錯誤處理機制 |
| 復(fù)雜業(yè)務(wù)邏輯 | Axios攔截器 | 通過攔截器統(tǒng)一處理認(rèn)證、日志、錯誤重試等橫切關(guān)注點 |
| 大文件上傳 | XHR | 支持進度監(jiān)控，可配合分片上傳策略 |
| 表單重定向提交 | 隱藏表單法 | 瀏覽器自動處理Cookie，后端可識別_method字段模擬PUT/DELETE |
六、最佳實踐
- 錯誤處理：始終檢查HTTP狀態(tài)碼，不要依賴catch捕獲所有錯誤
- 安全防護：
- 敏感操作使用HTTPS
- 跨域請求配置CORS頭
- 重要操作添加CSRF Token
- 性能優(yōu)化：
- 合理使用緩存（
Cache-Control） - 大文件采用分片上傳
- 頻繁請求使用WebSocket或Server-Sent Events
- 合理使用緩存（
- 調(diào)試技巧：
- 使用瀏覽器Network面板驗證請求頭/體
- 通過
console.log(response)檢查原始響應(yīng)結(jié)構(gòu) - 復(fù)雜場景使用Postman等工具先驗證接口
結(jié)語
JavaScript請求方案的選擇應(yīng)基于項目需求、團隊熟悉度和瀏覽器兼容性?，F(xiàn)代項目推薦以Fetch API為主，復(fù)雜場景引入Axios增強功能，同時保持對XHR的理解以便維護遺留代碼。無論采用哪種方案，始終牢記安全性、可維護性和性能這三個核心原則。
以上就是JS發(fā)送請求的常用方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JS發(fā)送請求方法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
純js代碼實現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
本章節(jié)介紹一下如何實現(xiàn)未知寬高的元素在指定元素下實現(xiàn)垂直水平居中效果，代碼簡單易懂，需要的朋友可以參考下本文2015-09-09
這篇文章主要介紹了常用的JavaScript模板引擎介紹,本文介紹了8款常用JavaScript 模板引擎,著重講解了artTemplate模板引擎,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄@取url中用&隔開的參數(shù)實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
我寫JavaScript代碼已經(jīng)很久了，都記不起是什么年代開始的了。本文給大家分享javascript七大技巧(二)，對javascript技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼
由于Firefox和IE等瀏覽器之間對JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標(biāo)位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風(fēng)格不同。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js拖拽效果的原理及實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript學(xué)習(xí)筆記之取數(shù)組中最大值和最小值
在實際業(yè)務(wù)中有的時候要取出數(shù)組中的最大值或最小值。但在數(shù)組中并沒有提供arr.max()和arr.min()這樣的方法。那么是不是可以通過別的方式實現(xiàn)類似這樣的方法呢？那么今天我們就來整理取出數(shù)組中最大值和最小值的一些方法，需要的朋友一起學(xué)習(xí)吧2016-03-03
現(xiàn)在在手機等移動端設(shè)備訪問的人越來越多，我們前端開發(fā)者一直致力于將設(shè)計稿還原成頁面，供用戶訪問。但除高度還原設(shè)計稿外，交互上的良好體驗也是我們應(yīng)該做到的。2021-05-05
這篇文章主要介紹了微信小程序 行的刪除和增加操作實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript中FormData類型的相關(guān)資料,JavaScript中的FormData接口用于構(gòu)建和發(fā)送表單數(shù)據(jù)(尤其適合文件上傳),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07