戰(zhàn))
1. 從“點(diǎn)擊刷新”到“無(wú)感更新”聊聊XHR這位老伙計(jì)如果你在2005年左右開(kāi)始接觸網(wǎng)頁(yè)開(kāi)發(fā)那你一定經(jīng)歷過(guò)那個(gè)“點(diǎn)擊按鈕整個(gè)頁(yè)面白屏刷新”的年代。那時(shí)候想在不刷新頁(yè)面的情況下從服務(wù)器拿點(diǎn)數(shù)據(jù)更新頁(yè)面的一小塊內(nèi)容簡(jiǎn)直是天方夜譚。直到XMLHttpRequest我們親切地稱之為XHR的出現(xiàn)這一切才被改變。它不是什么高深莫測(cè)的黑科技本質(zhì)上就是一個(gè)內(nèi)置于瀏覽器中的JavaScript對(duì)象但這個(gè)對(duì)象給了我們一個(gè)能力讓JavaScript能在后臺(tái)悄悄地和服務(wù)器“打電話”拿到數(shù)據(jù)后再悄悄地更新頁(yè)面。這就是我們后來(lái)熟知的AjaxAsynchronous JavaScript and XML技術(shù)的核心。今天雖然fetchAPI憑借Promise的優(yōu)雅后來(lái)居上但XHR這位“老將”依然活躍在無(wú)數(shù)生產(chǎn)環(huán)境的代碼里理解它不僅是理解一段歷史更是理解現(xiàn)代Web異步通信的基石。無(wú)論是處理文件上傳進(jìn)度還是兼容一些老舊的第三方庫(kù)XHR的知識(shí)依然不可或缺。這篇文章我們就來(lái)徹底拆解XHR從它的基本使用到它的威力加強(qiáng)版——XHR Level 2的新特性并通過(guò)實(shí)際案例讓你能真正上手。2. XMLHttpRequest基礎(chǔ)與服務(wù)器“對(duì)話”的四步曲使用XHR對(duì)象與服務(wù)器交互就像完成一次標(biāo)準(zhǔn)的電話通訊有固定的步驟。理解每一步在做什么比死記硬背代碼更重要。2.1 創(chuàng)建通話對(duì)象new XMLHttpRequest()一切始于創(chuàng)建一個(gè)XHR實(shí)例。這就像拿起電話聽(tīng)筒。const xhr new XMLHttpRequest();這里有個(gè)需要注意的歷史兼容性問(wèn)題在IE7之前的古老IE瀏覽器中XHR是以ActiveX對(duì)象的形式實(shí)現(xiàn)的。所以非常老的代碼里可能會(huì)看到這樣的寫(xiě)法let xhr; if (window.XMLHttpRequest) { // 現(xiàn)代瀏覽器 xhr new XMLHttpRequest(); } else { // 老掉牙的IE (IE5, IE6) xhr new ActiveXObject(Microsoft.XMLHTTP); }好在如今我們幾乎不需要再考慮這種兼容性直接使用new XMLHttpRequest()即可。2.2 撥號(hào)與說(shuō)明意圖open() 方法創(chuàng)建對(duì)象后你需要告訴它我要打給誰(shuí)URL用什么方式HTTP Method通話。xhr.open(GET, https://api.example.com/data, true);open方法通常接收三個(gè)關(guān)鍵參數(shù)method: 請(qǐng)求方法如‘GET’、‘POST’、‘PUT’、‘DELETE’。url: 請(qǐng)求發(fā)送到的服務(wù)器地址。async(可選): 是否異步默認(rèn)為true。強(qiáng)烈建議永遠(yuǎn)使用true異步。如果設(shè)為false同步在收到服務(wù)器響應(yīng)之前JavaScript代碼會(huì)完全阻塞導(dǎo)致頁(yè)面“凍結(jié)”用戶體驗(yàn)極差已被現(xiàn)代前端實(shí)踐所摒棄。這個(gè)步驟只是配置了請(qǐng)求并未真正發(fā)出。2.3 監(jiān)聽(tīng)對(duì)方回應(yīng)onreadystatechange 事件在撥號(hào)發(fā)送請(qǐng)求之前我們需要先設(shè)置好“接聽(tīng)”邏輯即定義當(dāng)請(qǐng)求狀態(tài)發(fā)生變化時(shí)的處理函數(shù)。這是通過(guò)監(jiān)聽(tīng)readyState的變化來(lái)實(shí)現(xiàn)的。readyState有5個(gè)狀態(tài)0 (UNSENT): 代理XHR對(duì)象已創(chuàng)建但open()方法還未調(diào)用。1 (OPENED):open()方法已調(diào)用連接已建立。2 (HEADERS_RECEIVED):send()方法已調(diào)用并且響應(yīng)頭已被接收。3 (LOADING): 響應(yīng)體正在下載中responseText屬性包含部分?jǐn)?shù)據(jù)。4 (DONE): 整個(gè)請(qǐng)求操作已完成可能成功也可能失敗如404。我們最關(guān)心的是狀態(tài)4DONE。通常我們會(huì)這樣寫(xiě)xhr.onreadystatechange function() { if (xhr.readyState 4) { // 請(qǐng)求已完成可以處理響應(yīng)了 if (xhr.status 200 xhr.status 300) { // 判斷HTTP狀態(tài)碼是否成功 console.log(請(qǐng)求成功, xhr.responseText); } else { console.error(請(qǐng)求失敗狀態(tài)碼, xhr.status); } } };注意onreadystatechange是一個(gè)“狀態(tài)變化”就觸發(fā)的事件意味著在請(qǐng)求過(guò)程中狀態(tài)1-2-3-4會(huì)觸發(fā)多次。務(wù)必在函數(shù)內(nèi)部通過(guò)if (xhr.readyState 4)來(lái)確保只在最終完成時(shí)進(jìn)行業(yè)務(wù)處理避免重復(fù)操作。2.4 開(kāi)始通話并傳遞信息send() 方法最后一步撥出電話并決定是否要說(shuō)點(diǎn)什么發(fā)送請(qǐng)求體。// 對(duì)于GET請(qǐng)求通常不發(fā)送數(shù)據(jù)參數(shù)一般拼接在URL上 xhr.send(); // 對(duì)于POST請(qǐng)求可以將數(shù)據(jù)作為send()的參數(shù)發(fā)送 xhr.send(key1value1key2value2); // 發(fā)送表單格式數(shù)據(jù) // 或者 xhr.send(JSON.stringify({key1: value1, key2: value2})); // 發(fā)送JSON數(shù)據(jù)調(diào)用send()方法后請(qǐng)求才真正被發(fā)出。對(duì)于異步請(qǐng)求async: trueJavaScript代碼會(huì)繼續(xù)往下執(zhí)行不會(huì)等待響應(yīng)。當(dāng)服務(wù)器響應(yīng)返回時(shí)之前設(shè)置的onreadystatechange事件處理器就會(huì)被調(diào)用。2.5 一個(gè)完整的GET請(qǐng)求示例將以上步驟組合起來(lái)一個(gè)完整的異步GET請(qǐng)求如下const xhr new XMLHttpRequest(); xhr.open(GET, https://api.example.com/users?id123, true); xhr.onreadystatechange function() { if (xhr.readyState 4) { if (xhr.status 200) { // 成功解析響應(yīng)數(shù)據(jù)假設(shè)是JSON const userData JSON.parse(xhr.responseText); console.log(用戶數(shù)據(jù), userData); // 更新DOM... document.getElementById(username).textContent userData.name; } else { console.error(獲取用戶數(shù)據(jù)失敗狀態(tài)碼, xhr.status); } } }; // 可以設(shè)置請(qǐng)求頭例如告訴服務(wù)器我們期望JSON格式的返回 xhr.setRequestHeader(Accept, application/json); xhr.send();3. XHR Level 2老樹(shù)開(kāi)新花功能大增強(qiáng)最初的XHR規(guī)范存在不少局限比如無(wú)法上傳文件、無(wú)法獲取傳輸進(jìn)度、不能跨域請(qǐng)求后來(lái)通過(guò)CORS解決但最初沒(méi)有。XHR Level 2是原標(biāo)準(zhǔn)的升級(jí)版它增加了一系列強(qiáng)大的新特性讓XHR在現(xiàn)代Web開(kāi)發(fā)中依然能打。這些特性如今已被所有現(xiàn)代瀏覽器廣泛支持。3.1 進(jìn)度事件告別“盲等”在Level 2之前我們只知道請(qǐng)求“進(jìn)行中”和“完成”完全不知道下載或上傳了多少數(shù)據(jù)。這對(duì)于大文件傳輸來(lái)說(shuō)體驗(yàn)很糟糕。Level 2引入了進(jìn)度事件讓我們可以輕松實(shí)現(xiàn)進(jìn)度條。主要事件有progress: 在數(shù)據(jù)傳輸過(guò)程中周期性觸發(fā)用于報(bào)告上傳或下載的進(jìn)度。load: 當(dāng)請(qǐng)求成功完成時(shí)觸發(fā)等價(jià)于readyState 4且狀態(tài)碼為成功系列。error: 當(dāng)請(qǐng)求遭遇網(wǎng)絡(luò)錯(cuò)誤時(shí)觸發(fā)如DNS解析失敗、網(wǎng)絡(luò)斷開(kāi)。abort: 當(dāng)請(qǐng)求被調(diào)用abort()方法取消時(shí)觸發(fā)。loadend: 在請(qǐng)求結(jié)束時(shí)觸發(fā)無(wú)論成功、失敗還是取消在load、error或abort事件之后觸發(fā)。下載進(jìn)度示例xhr.onprogress function(event) { if (event.lengthComputable) { // 長(zhǎng)度是否可計(jì)算 const percentComplete (event.loaded / event.total) * 100; console.log(下載進(jìn)度${percentComplete.toFixed(2)}%); // 更新進(jìn)度條UI progressBar.value percentComplete; } }; xhr.onload function() { console.log(下載完成); progressBar.style.display none; // 隱藏進(jìn)度條 };上傳進(jìn)度示例 上傳進(jìn)度監(jiān)控需要監(jiān)聽(tīng)**xhr.upload**對(duì)象上的事件。// 監(jiān)聽(tīng)上傳進(jìn)度 xhr.upload.onprogress function(event) { if (event.lengthComputable) { const percentComplete (event.loaded / event.total) * 100; console.log(上傳進(jìn)度${percentComplete.toFixed(2)}%); uploadProgressBar.value percentComplete; } }; xhr.upload.onload function() { console.log(上傳完成); }; xhr.open(POST, /upload); xhr.send(formData); // 假設(shè)formData是一個(gè)包含大文件的FormData對(duì)象實(shí)操心得progress事件觸發(fā)非常頻繁不要在其中執(zhí)行復(fù)雜的DOM操作或計(jì)算否則可能引發(fā)性能問(wèn)題。通常的做法是使用requestAnimationFrame進(jìn)行節(jié)流或者只更新一個(gè)簡(jiǎn)單的文本或進(jìn)度條數(shù)值。3.2 FormData原生表單數(shù)據(jù)“打包器”在Level 2之前要構(gòu)造一個(gè)復(fù)雜的multipart/form-data請(qǐng)求比如上傳文件需要手動(dòng)拼接復(fù)雜的格式字符串極其繁瑣且容易出錯(cuò)。FormData對(duì)象的出現(xiàn)完美解決了這個(gè)問(wèn)題。你可以把它看作一個(gè)智能的表單數(shù)據(jù)容器// 1. 從現(xiàn)有表單元素創(chuàng)建 const myForm document.getElementById(myForm); const formData new FormData(myForm); // 自動(dòng)收集表單內(nèi)所有有name屬性的元素值 // 2. 或者手動(dòng)創(chuàng)建并添加數(shù)據(jù) const formData new FormData(); formData.append(username, 張三); // 文本字段 formData.append(avatar, fileInputElement.files[0]); // 文件字段 formData.append(extraData, JSON.stringify({ key: value })); // 甚至可以附加JSON字符串 // 3. 直接使用FormData發(fā)送請(qǐng)求 const xhr new XMLHttpRequest(); xhr.open(POST, /submit); xhr.send(formData); // 無(wú)需設(shè)置Content-Type頭XHR會(huì)自動(dòng)設(shè)置為multipart/form-data使用FormData后XHR會(huì)自動(dòng)設(shè)置正確的Content-Type請(qǐng)求頭multipart/form-data并帶有邊界符瀏覽器會(huì)負(fù)責(zé)處理復(fù)雜的編碼工作我們只需關(guān)心數(shù)據(jù)和文件本身。3.3 超時(shí)控制給請(qǐng)求加上“倒計(jì)時(shí)”網(wǎng)絡(luò)環(huán)境復(fù)雜一個(gè)請(qǐng)求可能永遠(yuǎn)沒(méi)有回應(yīng)。Level 2提供了timeout屬性可以設(shè)置請(qǐng)求的超時(shí)時(shí)間毫秒。如果請(qǐng)求在指定時(shí)間內(nèi)未完成則會(huì)自動(dòng)觸發(fā)ontimeout事件并中斷請(qǐng)求。xhr.timeout 10000; // 設(shè)置超時(shí)時(shí)間為10秒 xhr.ontimeout function() { console.error(請(qǐng)求超時(shí)); // 給用戶提示并可能進(jìn)行重試邏輯 };3.4 響應(yīng)類(lèi)型responseType指定期望的返回格式早期XHR的響應(yīng)數(shù)據(jù)主要以文本形式responseText或XML文檔responseXML存在。Level 2擴(kuò)展了responseType屬性允許我們告訴瀏覽器我們希望以什么格式接收響應(yīng)數(shù)據(jù)瀏覽器會(huì)幫我們做好解析。(默認(rèn)): 字符串文本對(duì)應(yīng)responseText。text: 字符串文本。json: 瀏覽器會(huì)自動(dòng)嘗試將響應(yīng)文本解析為JavaScript對(duì)象結(jié)果保存在response屬性中。如果解析失敗response為null但不會(huì)拋出錯(cuò)誤。blob: 二進(jìn)制大對(duì)象如圖片、文件流結(jié)果在response中。arraybuffer: 類(lèi)型化數(shù)組緩沖區(qū)用于處理純粹的二進(jìn)制數(shù)據(jù)。document: XML/HTML文檔對(duì)象對(duì)應(yīng)responseXML。使用示例xhr.responseType json; // 告訴瀏覽器“我期待JSON格式的響應(yīng)” xhr.onload function() { if (xhr.status 200) { // 直接使用xhr.response它已經(jīng)是一個(gè)JavaScript對(duì)象了 const data xhr.response; console.log(data.user.name); // 無(wú)需再手動(dòng) JSON.parse(xhr.responseText) } };設(shè)置responseType: json是一個(gè)非常好的實(shí)踐它讓代碼更清晰并且瀏覽器原生的JSON解析通常比JSON.parse()更安全、高效。4. 實(shí)戰(zhàn)案例構(gòu)建一個(gè)帶進(jìn)度條的文件上傳組件現(xiàn)在我們將Level 2的新特性組合起來(lái)實(shí)現(xiàn)一個(gè)完整的、帶實(shí)時(shí)進(jìn)度顯示和預(yù)覽的文件上傳功能。4.1 HTML結(jié)構(gòu)簡(jiǎn)單的上傳界面!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleXHR Level2 文件上傳示例/title style .upload-area { border: 2px dashed #ccc; padding: 40px; text-align: center; margin: 20px 0; cursor: pointer; } .upload-area.dragover { border-color: #007bff; background-color: #f0f8ff; } #progressContainer { margin-top: 20px; display: none; } #progressBar { width: 100%; height: 20px; } #preview { max-width: 300px; margin-top: 20px; } /style /head body h2拖拽或選擇文件上傳/h2 div iddropArea classupload-area p點(diǎn)擊選擇文件或直接將文件拖拽到此區(qū)域/p input typefile idfileInput acceptimage/* styledisplay: none; /div div idprogressContainer p上傳進(jìn)度span idprogressText0%/span/p progress idprogressBar value0 max100/progress /div img idpreview src alt圖片預(yù)覽 script srcupload.js/script /body /html4.2 JavaScript邏輯核心上傳與進(jìn)度監(jiān)控創(chuàng)建upload.js文件實(shí)現(xiàn)完整邏輯(function() { const dropArea document.getElementById(dropArea); const fileInput document.getElementById(fileInput); const progressContainer document.getElementById(progressContainer); const progressBar document.getElementById(progressBar); const progressText document.getElementById(progressText); const preview document.getElementById(preview); let selectedFile null; // 1. 點(diǎn)擊區(qū)域觸發(fā)文件選擇 dropArea.addEventListener(click, () fileInput.click()); // 2. 文件選擇變化事件 fileInput.addEventListener(change, (e) { if (e.target.files.length 0) { handleFileSelection(e.target.files[0]); } }); // 3. 拖拽事件處理 dropArea.addEventListener(dragover, (e) { e.preventDefault(); dropArea.classList.add(dragover); }); dropArea.addEventListener(dragleave, () { dropArea.classList.remove(dragover); }); dropArea.addEventListener(drop, (e) { e.preventDefault(); dropArea.classList.remove(dragover); if (e.dataTransfer.files.length 0) { handleFileSelection(e.dataTransfer.files[0]); } }); // 處理選中的文件 function handleFileSelection(file) { // 簡(jiǎn)單的文件類(lèi)型校驗(yàn)僅圖片 if (!file.type.startsWith(image/)) { alert(請(qǐng)選擇圖片文件); return; } selectedFile file; console.log(已選擇文件, file.name, 大小, (file.size / 1024 / 1024).toFixed(2), MB); // 預(yù)覽圖片 const reader new FileReader(); reader.onload (e) { preview.src e.target.result; preview.style.display block; }; reader.readAsDataURL(file); // 開(kāi)始上傳 uploadFile(file); } // 4. 核心上傳函數(shù) function uploadFile(file) { const formData new FormData(); formData.append(file, file); // 字段名‘file’需與后端接口約定一致 formData.append(uploadTime, new Date().toISOString()); // 可以附加其他數(shù)據(jù) const xhr new XMLHttpRequest(); // 配置請(qǐng)求 xhr.open(POST, /api/upload); // 替換為你的實(shí)際上傳接口地址 xhr.timeout 60000; // 設(shè)置60秒超時(shí) // 顯示進(jìn)度容器 progressContainer.style.display block; progressBar.value 0; progressText.textContent 0%; // 監(jiān)聽(tīng)上傳進(jìn)度事件關(guān)鍵監(jiān)聽(tīng)的是 xhr.upload xhr.upload.onprogress (event) { if (event.lengthComputable) { const percent Math.round((event.loaded / event.total) * 100); progressBar.value percent; progressText.textContent ${percent}%; console.log(上傳中: ${percent}%); } }; // 監(jiān)聽(tīng)請(qǐng)求完成事件 xhr.onload () { progressText.textContent 處理中...; if (xhr.status 200 xhr.status 300) { try { const response JSON.parse(xhr.responseText); console.log(上傳成功, response); progressText.textContent 上傳成功; alert(文件上傳成功服務(wù)器返回路徑${response.filePath}); } catch (e) { console.error(響應(yīng)解析失敗, e); progressText.textContent 響應(yīng)解析失敗; } } else { console.error(上傳失敗狀態(tài)碼, xhr.status); progressText.textContent 上傳失敗 (${xhr.status}); alert(上傳失敗請(qǐng)重試。); } // 3秒后隱藏進(jìn)度條 setTimeout(() { progressContainer.style.display none; }, 3000); }; // 錯(cuò)誤處理 xhr.onerror () { console.error(網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤); progressText.textContent 網(wǎng)絡(luò)錯(cuò)誤; alert(網(wǎng)絡(luò)異常請(qǐng)檢查連接。); progressContainer.style.display none; }; xhr.ontimeout () { console.error(請(qǐng)求超時(shí)); progressText.textContent 請(qǐng)求超時(shí); alert(上傳時(shí)間過(guò)長(zhǎng)請(qǐng)重試。); progressContainer.style.display none; }; // 發(fā)送請(qǐng)求 xhr.send(formData); console.log(上傳請(qǐng)求已發(fā)送...); } })();4.3 案例解析與關(guān)鍵點(diǎn)這個(gè)案例集中展示了XHR Level 2的多個(gè)核心特性FormData的便捷性我們無(wú)需關(guān)心multipart/form-data的邊界符和格式只需將File對(duì)象append進(jìn)去XHR會(huì)處理一切。上傳進(jìn)度監(jiān)控通過(guò)監(jiān)聽(tīng)xhr.upload.onprogress事件我們獲得了精確的上傳進(jìn)度數(shù)據(jù)并實(shí)時(shí)更新了進(jìn)度條UI。這是實(shí)現(xiàn)良好用戶體驗(yàn)的關(guān)鍵。更清晰的事件模型我們使用了onload成功完成替代了onreadystatechange來(lái)檢查狀態(tài)4代碼意圖更明確。同時(shí)結(jié)合onerror和ontimeout進(jìn)行全面的錯(cuò)誤處理。超時(shí)控制設(shè)置了timeout為60秒防止因網(wǎng)絡(luò)問(wèn)題導(dǎo)致請(qǐng)求無(wú)限掛起。前端預(yù)覽通過(guò)FileReader在文件上傳前就實(shí)現(xiàn)了本地圖片預(yù)覽提升了交互的即時(shí)性。注意事項(xiàng)實(shí)際部署時(shí)你需要將xhr.open(‘POST’, ‘/api/upload’)中的URL替換為真實(shí)的后端接口地址。并且后端接口需要能夠處理multipart/form-data格式的請(qǐng)求解析出名為file的文件字段。5. 常見(jiàn)問(wèn)題、排查技巧與兼容性考量即使掌握了基本用法在實(shí)際開(kāi)發(fā)中你仍會(huì)遇到一些坑。這里記錄了一些典型問(wèn)題和我的處理經(jīng)驗(yàn)。5.1 為什么我的POST請(qǐng)求數(shù)據(jù)后端收不到這可能是最常遇到的問(wèn)題之一。問(wèn)題通常出在請(qǐng)求頭Content-Type和數(shù)據(jù)格式不匹配上。場(chǎng)景一發(fā)送JSON數(shù)據(jù)。錯(cuò)誤做法只調(diào)用了xhr.send(JSON.stringify(data))但沒(méi)有設(shè)置Content-Type頭。后端可能無(wú)法識(shí)別這是JSON。正確做法xhr.open(POST, /api/user); xhr.setRequestHeader(Content-Type, application/json; charsetutf-8); // 關(guān)鍵 xhr.send(JSON.stringify({ name: 張三, age: 25 }));場(chǎng)景二發(fā)送FormData數(shù)據(jù)。錯(cuò)誤做法手動(dòng)設(shè)置了Content-Type: multipart/form-data。正確做法不要設(shè)置Content-Type頭當(dāng)你使用FormData對(duì)象作為send()的參數(shù)時(shí)XHR會(huì)自動(dòng)設(shè)置正確的Content-Type并且會(huì)包含一個(gè)唯一的boundary邊界符。如果你手動(dòng)設(shè)置反而會(huì)破壞這個(gè)自動(dòng)生成的邊界符導(dǎo)致后端解析失敗。const formData new FormData(); formData.append(key, value); xhr.open(POST, /api/upload); // xhr.setRequestHeader(Content-Type, multipart/form-data); // 千萬(wàn)不要加這行 xhr.send(formData);5.2 跨域請(qǐng)求CORS問(wèn)題如果你從http://localhost:8080向https://api.another-domain.com發(fā)送XHR請(qǐng)求瀏覽器會(huì)因?yàn)橥床呗远柚??？刂婆_(tái)會(huì)報(bào)錯(cuò)“Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy”。解決方案取決于你是否能控制后端服務(wù)器能控制后端在后端服務(wù)器的響應(yīng)中添加CORS頭。Access-Control-Allow-Origin: http://localhost:8080 // 或 * (允許所有域不推薦用于生產(chǎn)環(huán)境攜帶憑證時(shí)) Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization不能控制后端對(duì)于簡(jiǎn)單的GET請(qǐng)求可以考慮使用JSONP僅限GET。對(duì)于現(xiàn)代API通常后端已配置CORS。如果是第三方公開(kāi)API請(qǐng)查閱其文檔是否支持CORS。否則你需要通過(guò)自己的后端服務(wù)器做一次代理轉(zhuǎn)發(fā)。5.3 如何取消一個(gè)正在進(jìn)行的XHR請(qǐng)求在某些場(chǎng)景下如用戶跳轉(zhuǎn)頁(yè)面、搜索框輸入防抖需要取消未完成的請(qǐng)求。XHR提供了abort()方法。let currentXhr null; function search(keyword) { // 如果已有請(qǐng)求在進(jìn)行先取消它 if (currentXhr currentXhr.readyState ! 4) { currentXhr.abort(); console.log(已取消上一個(gè)搜索請(qǐng)求); } currentXhr new XMLHttpRequest(); currentXhr.open(GET, /api/search?q${encodeURIComponent(keyword)}); currentXhr.onload function() { /* ... 處理結(jié)果 ... */ }; currentXhr.onerror function() { /* ... 處理錯(cuò)誤 ... */ }; currentXhr.send(); }調(diào)用abort()后會(huì)觸發(fā)XHR對(duì)象的abort事件readyState也會(huì)變?yōu)?。5.4 responseType: ‘json’ 的陷阱設(shè)置responseType: ‘json’非常方便但有一個(gè)細(xì)節(jié)如果服務(wù)器返回的不是合法的JSON字符串比如返回了HTML錯(cuò)誤頁(yè)面或空字符串xhr.response的值會(huì)是null而不會(huì)拋出異常。你的代碼需要處理這種null情況。xhr.responseType json; xhr.onload function() { if (xhr.status 200) { const data xhr.response; // 可能是對(duì)象也可能是null if (data) { // 成功解析為JSON processData(data); } else { // 響應(yīng)體不是合法JSON console.error(服務(wù)器返回了非JSON格式的響應(yīng)); // 可以嘗試用xhr.responseText查看原始文本 console.log(原始響應(yīng), xhr.responseText); } } };5.5 與現(xiàn)代fetch API的對(duì)比與選擇如今fetch()API憑借基于Promise的鏈?zhǔn)秸{(diào)用、更簡(jiǎn)潔的語(yǔ)法成為新的標(biāo)準(zhǔn)。那么我們還需要XHR嗎fetch的優(yōu)勢(shì)語(yǔ)法更簡(jiǎn)潔基于Promise易于組合和使用async/await。更現(xiàn)代是W3C標(biāo)準(zhǔn)代表了未來(lái)方向。默認(rèn)不攜帶Cookie行為更可控。依然選擇XHR的場(chǎng)景需要上傳進(jìn)度監(jiān)控fetchAPI目前截至2023年仍無(wú)法直接獲取上傳進(jìn)度而XHR的upload.onprogress是現(xiàn)成的解決方案。需要請(qǐng)求超時(shí)控制fetch本身不支持超時(shí)設(shè)置需要借助AbortController而XHR的timeout屬性簡(jiǎn)單直接。需要更細(xì)粒度的請(qǐng)求狀態(tài)控制XHR的readyState在調(diào)試復(fù)雜請(qǐng)求流程時(shí)有時(shí)更有用。兼容性要求如果你的項(xiàng)目需要支持非常古老的瀏覽器如IE10及以下fetch不可用XHR是唯一選擇。不過(guò)可以通過(guò)polyfill解決。我的個(gè)人建議是對(duì)于大多數(shù)新的項(xiàng)目?jī)?yōu)先使用fetch。當(dāng)遇到需要監(jiān)控上傳進(jìn)度這個(gè)硬性需求時(shí)再考慮使用XHR或者尋找基于fetch的進(jìn)度監(jiān)控polyfill方案。將兩者結(jié)合使用取長(zhǎng)補(bǔ)短也是常見(jiàn)的做法。例如用fetch處理普通的JSON API請(qǐng)求用XHR專(zhuān)門(mén)處理大文件上傳。 深入解析XMLHttpRequest：從Ajax核心到文件上傳實(shí)戰(zhàn)
1. 從“點(diǎn)擊刷新”到“無(wú)感更新”聊聊XHR這位老伙計(jì)如果你在2005年左右開(kāi)始接觸網(wǎng)頁(yè)開(kāi)發(fā)那你一定經(jīng)歷過(guò)那個(gè)“點(diǎn)擊按鈕整個(gè)頁(yè)面白屏刷新”的年代。那時(shí)候想在不刷新頁(yè)面的情況下從服務(wù)器拿點(diǎn)數(shù)據(jù)更新頁(yè)面的一小塊內(nèi)容簡(jiǎn)直是天方夜譚。直到XMLHttpRequest我們親切地稱之為XHR的出現(xiàn)這一切才被改變。它不是什么高深莫測(cè)的黑科技本質(zhì)上就是一個(gè)內(nèi)置于瀏覽器中的JavaScript對(duì)象但這個(gè)對(duì)象給了我們一個(gè)能力讓JavaScript能在后臺(tái)悄悄地和服務(wù)器“打電話”拿到數(shù)據(jù)后再悄悄地更新頁(yè)面。這就是我們后來(lái)熟知的AjaxAsynchronous JavaScript and XML技術(shù)的核心。今天雖然fetchAPI憑借Promise的優(yōu)雅后來(lái)居上但XHR這位“老將”依然活躍在無(wú)數(shù)生產(chǎn)環(huán)境的代碼里理解它不僅是理解一段歷史更是理解現(xiàn)代Web異步通信的基石。無(wú)論是處理文件上傳進(jìn)度還是兼容一些老舊的第三方庫(kù)XHR的知識(shí)依然不可或缺。這篇文章我們就來(lái)徹底拆解XHR從它的基本使用到它的威力加強(qiáng)版——XHR Level 2的新特性并通過(guò)實(shí)際案例讓你能真正上手。2. XMLHttpRequest基礎(chǔ)與服務(wù)器“對(duì)話”的四步曲使用XHR對(duì)象與服務(wù)器交互就像完成一次標(biāo)準(zhǔn)的電話通訊有固定的步驟。理解每一步在做什么比死記硬背代碼更重要。2.1 創(chuàng)建通話對(duì)象new XMLHttpRequest()一切始于創(chuàng)建一個(gè)XHR實(shí)例。這就像拿起電話聽(tīng)筒。const xhr new XMLHttpRequest();這里有個(gè)需要注意的歷史兼容性問(wèn)題在IE7之前的古老IE瀏覽器中XHR是以ActiveX對(duì)象的形式實(shí)現(xiàn)的。所以非常老的代碼里可能會(huì)看到這樣的寫(xiě)法let xhr; if (window.XMLHttpRequest) { // 現(xiàn)代瀏覽器 xhr new XMLHttpRequest(); } else { // 老掉牙的IE (IE5, IE6) xhr new ActiveXObject(Microsoft.XMLHTTP); }好在如今我們幾乎不需要再考慮這種兼容性直接使用new XMLHttpRequest()即可。2.2 撥號(hào)與說(shuō)明意圖open() 方法創(chuàng)建對(duì)象后你需要告訴它我要打給誰(shuí)URL用什么方式HTTP Method通話。xhr.open(GET, https://api.example.com/data, true);open方法通常接收三個(gè)關(guān)鍵參數(shù)method: 請(qǐng)求方法如‘GET’、‘POST’、‘PUT’、‘DELETE’。url: 請(qǐng)求發(fā)送到的服務(wù)器地址。async(可選): 是否異步默認(rèn)為true。強(qiáng)烈建議永遠(yuǎn)使用true異步。如果設(shè)為false同步在收到服務(wù)器響應(yīng)之前JavaScript代碼會(huì)完全阻塞導(dǎo)致頁(yè)面“凍結(jié)”用戶體驗(yàn)極差已被現(xiàn)代前端實(shí)踐所摒棄。這個(gè)步驟只是配置了請(qǐng)求并未真正發(fā)出。2.3 監(jiān)聽(tīng)對(duì)方回應(yīng)onreadystatechange 事件在撥號(hào)發(fā)送請(qǐng)求之前我們需要先設(shè)置好“接聽(tīng)”邏輯即定義當(dāng)請(qǐng)求狀態(tài)發(fā)生變化時(shí)的處理函數(shù)。這是通過(guò)監(jiān)聽(tīng)readyState的變化來(lái)實(shí)現(xiàn)的。readyState有5個(gè)狀態(tài)0 (UNSENT): 代理XHR對(duì)象已創(chuàng)建但open()方法還未調(diào)用。1 (OPENED):open()方法已調(diào)用連接已建立。2 (HEADERS_RECEIVED):send()方法已調(diào)用并且響應(yīng)頭已被接收。3 (LOADING): 響應(yīng)體正在下載中responseText屬性包含部分?jǐn)?shù)據(jù)。4 (DONE): 整個(gè)請(qǐng)求操作已完成可能成功也可能失敗如404。我們最關(guān)心的是狀態(tài)4DONE。通常我們會(huì)這樣寫(xiě)xhr.onreadystatechange function() { if (xhr.readyState 4) { // 請(qǐng)求已完成可以處理響應(yīng)了 if (xhr.status 200 xhr.status 300) { // 判斷HTTP狀態(tài)碼是否成功 console.log(請(qǐng)求成功, xhr.responseText); } else { console.error(請(qǐng)求失敗狀態(tài)碼, xhr.status); } } };注意onreadystatechange是一個(gè)“狀態(tài)變化”就觸發(fā)的事件意味著在請(qǐng)求過(guò)程中狀態(tài)1-2-3-4會(huì)觸發(fā)多次。務(wù)必在函數(shù)內(nèi)部通過(guò)if (xhr.readyState 4)來(lái)確保只在最終完成時(shí)進(jìn)行業(yè)務(wù)處理避免重復(fù)操作。2.4 開(kāi)始通話并傳遞信息send() 方法最后一步撥出電話并決定是否要說(shuō)點(diǎn)什么發(fā)送請(qǐng)求體。// 對(duì)于GET請(qǐng)求通常不發(fā)送數(shù)據(jù)參數(shù)一般拼接在URL上 xhr.send(); // 對(duì)于POST請(qǐng)求可以將數(shù)據(jù)作為send()的參數(shù)發(fā)送 xhr.send(key1value1key2value2); // 發(fā)送表單格式數(shù)據(jù) // 或者 xhr.send(JSON.stringify({key1: value1, key2: value2})); // 發(fā)送JSON數(shù)據(jù)調(diào)用send()方法后請(qǐng)求才真正被發(fā)出。對(duì)于異步請(qǐng)求async: trueJavaScript代碼會(huì)繼續(xù)往下執(zhí)行不會(huì)等待響應(yīng)。當(dāng)服務(wù)器響應(yīng)返回時(shí)之前設(shè)置的onreadystatechange事件處理器就會(huì)被調(diào)用。2.5 一個(gè)完整的GET請(qǐng)求示例將以上步驟組合起來(lái)一個(gè)完整的異步GET請(qǐng)求如下const xhr new XMLHttpRequest(); xhr.open(GET, https://api.example.com/users?id123, true); xhr.onreadystatechange function() { if (xhr.readyState 4) { if (xhr.status 200) { // 成功解析響應(yīng)數(shù)據(jù)假設(shè)是JSON const userData JSON.parse(xhr.responseText); console.log(用戶數(shù)據(jù), userData); // 更新DOM... document.getElementById(username).textContent userData.name; } else { console.error(獲取用戶數(shù)據(jù)失敗狀態(tài)碼, xhr.status); } } }; // 可以設(shè)置請(qǐng)求頭例如告訴服務(wù)器我們期望JSON格式的返回 xhr.setRequestHeader(Accept, application/json); xhr.send();3. XHR Level 2老樹(shù)開(kāi)新花功能大增強(qiáng)最初的XHR規(guī)范存在不少局限比如無(wú)法上傳文件、無(wú)法獲取傳輸進(jìn)度、不能跨域請(qǐng)求后來(lái)通過(guò)CORS解決但最初沒(méi)有。XHR Level 2是原標(biāo)準(zhǔn)的升級(jí)版它增加了一系列強(qiáng)大的新特性讓XHR在現(xiàn)代Web開(kāi)發(fā)中依然能打。這些特性如今已被所有現(xiàn)代瀏覽器廣泛支持。3.1 進(jìn)度事件告別“盲等”在Level 2之前我們只知道請(qǐng)求“進(jìn)行中”和“完成”完全不知道下載或上傳了多少數(shù)據(jù)。這對(duì)于大文件傳輸來(lái)說(shuō)體驗(yàn)很糟糕。Level 2引入了進(jìn)度事件讓我們可以輕松實(shí)現(xiàn)進(jìn)度條。主要事件有progress: 在數(shù)據(jù)傳輸過(guò)程中周期性觸發(fā)用于報(bào)告上傳或下載的進(jìn)度。load: 當(dāng)請(qǐng)求成功完成時(shí)觸發(fā)等價(jià)于readyState 4且狀態(tài)碼為成功系列。error: 當(dāng)請(qǐng)求遭遇網(wǎng)絡(luò)錯(cuò)誤時(shí)觸發(fā)如DNS解析失敗、網(wǎng)絡(luò)斷開(kāi)。abort: 當(dāng)請(qǐng)求被調(diào)用abort()方法取消時(shí)觸發(fā)。loadend: 在請(qǐng)求結(jié)束時(shí)觸發(fā)無(wú)論成功、失敗還是取消在load、error或abort事件之后觸發(fā)。下載進(jìn)度示例xhr.onprogress function(event) { if (event.lengthComputable) { // 長(zhǎng)度是否可計(jì)算 const percentComplete (event.loaded / event.total) * 100; console.log(下載進(jìn)度${percentComplete.toFixed(2)}%); // 更新進(jìn)度條UI progressBar.value percentComplete; } }; xhr.onload function() { console.log(下載完成); progressBar.style.display none; // 隱藏進(jìn)度條 };上傳進(jìn)度示例 上傳進(jìn)度監(jiān)控需要監(jiān)聽(tīng)**xhr.upload**對(duì)象上的事件。// 監(jiān)聽(tīng)上傳進(jìn)度 xhr.upload.onprogress function(event) { if (event.lengthComputable) { const percentComplete (event.loaded / event.total) * 100; console.log(上傳進(jìn)度${percentComplete.toFixed(2)}%); uploadProgressBar.value percentComplete; } }; xhr.upload.onload function() { console.log(上傳完成); }; xhr.open(POST, /upload); xhr.send(formData); // 假設(shè)formData是一個(gè)包含大文件的FormData對(duì)象實(shí)操心得progress事件觸發(fā)非常頻繁不要在其中執(zhí)行復(fù)雜的DOM操作或計(jì)算否則可能引發(fā)性能問(wèn)題。通常的做法是使用requestAnimationFrame進(jìn)行節(jié)流或者只更新一個(gè)簡(jiǎn)單的文本或進(jìn)度條數(shù)值。3.2 FormData原生表單數(shù)據(jù)“打包器”在Level 2之前要構(gòu)造一個(gè)復(fù)雜的multipart/form-data請(qǐng)求比如上傳文件需要手動(dòng)拼接復(fù)雜的格式字符串極其繁瑣且容易出錯(cuò)。FormData對(duì)象的出現(xiàn)完美解決了這個(gè)問(wèn)題。你可以把它看作一個(gè)智能的表單數(shù)據(jù)容器// 1. 從現(xiàn)有表單元素創(chuàng)建 const myForm document.getElementById(myForm); const formData new FormData(myForm); // 自動(dòng)收集表單內(nèi)所有有name屬性的元素值 // 2. 或者手動(dòng)創(chuàng)建并添加數(shù)據(jù) const formData new FormData(); formData.append(username, 張三); // 文本字段 formData.append(avatar, fileInputElement.files[0]); // 文件字段 formData.append(extraData, JSON.stringify({ key: value })); // 甚至可以附加JSON字符串 // 3. 直接使用FormData發(fā)送請(qǐng)求 const xhr new XMLHttpRequest(); xhr.open(POST, /submit); xhr.send(formData); // 無(wú)需設(shè)置Content-Type頭XHR會(huì)自動(dòng)設(shè)置為multipart/form-data使用FormData后XHR會(huì)自動(dòng)設(shè)置正確的Content-Type請(qǐng)求頭multipart/form-data并帶有邊界符瀏覽器會(huì)負(fù)責(zé)處理復(fù)雜的編碼工作我們只需關(guān)心數(shù)據(jù)和文件本身。3.3 超時(shí)控制給請(qǐng)求加上“倒計(jì)時(shí)”網(wǎng)絡(luò)環(huán)境復(fù)雜一個(gè)請(qǐng)求可能永遠(yuǎn)沒(méi)有回應(yīng)。Level 2提供了timeout屬性可以設(shè)置請(qǐng)求的超時(shí)時(shí)間毫秒。如果請(qǐng)求在指定時(shí)間內(nèi)未完成則會(huì)自動(dòng)觸發(fā)ontimeout事件并中斷請(qǐng)求。xhr.timeout 10000; // 設(shè)置超時(shí)時(shí)間為10秒 xhr.ontimeout function() { console.error(請(qǐng)求超時(shí)); // 給用戶提示并可能進(jìn)行重試邏輯 };3.4 響應(yīng)類(lèi)型responseType指定期望的返回格式早期XHR的響應(yīng)數(shù)據(jù)主要以文本形式responseText或XML文檔responseXML存在。Level 2擴(kuò)展了responseType屬性允許我們告訴瀏覽器我們希望以什么格式接收響應(yīng)數(shù)據(jù)瀏覽器會(huì)幫我們做好解析。(默認(rèn)): 字符串文本對(duì)應(yīng)responseText。text: 字符串文本。json: 瀏覽器會(huì)自動(dòng)嘗試將響應(yīng)文本解析為JavaScript對(duì)象結(jié)果保存在response屬性中。如果解析失敗response為null但不會(huì)拋出錯(cuò)誤。blob: 二進(jìn)制大對(duì)象如圖片、文件流結(jié)果在response中。arraybuffer: 類(lèi)型化數(shù)組緩沖區(qū)用于處理純粹的二進(jìn)制數(shù)據(jù)。document: XML/HTML文檔對(duì)象對(duì)應(yīng)responseXML。使用示例xhr.responseType json; // 告訴瀏覽器“我期待JSON格式的響應(yīng)” xhr.onload function() { if (xhr.status 200) { // 直接使用xhr.response它已經(jīng)是一個(gè)JavaScript對(duì)象了 const data xhr.response; console.log(data.user.name); // 無(wú)需再手動(dòng) JSON.parse(xhr.responseText) } };設(shè)置responseType: json是一個(gè)非常好的實(shí)踐它讓代碼更清晰并且瀏覽器原生的JSON解析通常比JSON.parse()更安全、高效。4. 實(shí)戰(zhàn)案例構(gòu)建一個(gè)帶進(jìn)度條的文件上傳組件現(xiàn)在我們將Level 2的新特性組合起來(lái)實(shí)現(xiàn)一個(gè)完整的、帶實(shí)時(shí)進(jìn)度顯示和預(yù)覽的文件上傳功能。4.1 HTML結(jié)構(gòu)簡(jiǎn)單的上傳界面!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleXHR Level2 文件上傳示例/title style .upload-area { border: 2px dashed #ccc; padding: 40px; text-align: center; margin: 20px 0; cursor: pointer; } .upload-area.dragover { border-color: #007bff; background-color: #f0f8ff; } #progressContainer { margin-top: 20px; display: none; } #progressBar { width: 100%; height: 20px; } #preview { max-width: 300px; margin-top: 20px; } /style /head body h2拖拽或選擇文件上傳/h2 div iddropArea classupload-area p點(diǎn)擊選擇文件或直接將文件拖拽到此區(qū)域/p input typefile idfileInput acceptimage/* styledisplay: none; /div div idprogressContainer p上傳進(jìn)度span idprogressText0%/span/p progress idprogressBar value0 max100/progress /div img idpreview src alt圖片預(yù)覽 script srcupload.js/script /body /html4.2 JavaScript邏輯核心上傳與進(jìn)度監(jiān)控創(chuàng)建upload.js文件實(shí)現(xiàn)完整邏輯(function() { const dropArea document.getElementById(dropArea); const fileInput document.getElementById(fileInput); const progressContainer document.getElementById(progressContainer); const progressBar document.getElementById(progressBar); const progressText document.getElementById(progressText); const preview document.getElementById(preview); let selectedFile null; // 1. 點(diǎn)擊區(qū)域觸發(fā)文件選擇 dropArea.addEventListener(click, () fileInput.click()); // 2. 文件選擇變化事件 fileInput.addEventListener(change, (e) { if (e.target.files.length 0) { handleFileSelection(e.target.files[0]); } }); // 3. 拖拽事件處理 dropArea.addEventListener(dragover, (e) { e.preventDefault(); dropArea.classList.add(dragover); }); dropArea.addEventListener(dragleave, () { dropArea.classList.remove(dragover); }); dropArea.addEventListener(drop, (e) { e.preventDefault(); dropArea.classList.remove(dragover); if (e.dataTransfer.files.length 0) { handleFileSelection(e.dataTransfer.files[0]); } }); // 處理選中的文件 function handleFileSelection(file) { // 簡(jiǎn)單的文件類(lèi)型校驗(yàn)僅圖片 if (!file.type.startsWith(image/)) { alert(請(qǐng)選擇圖片文件); return; } selectedFile file; console.log(已選擇文件, file.name, 大小, (file.size / 1024 / 1024).toFixed(2), MB); // 預(yù)覽圖片 const reader new FileReader(); reader.onload (e) { preview.src e.target.result; preview.style.display block; }; reader.readAsDataURL(file); // 開(kāi)始上傳 uploadFile(file); } // 4. 核心上傳函數(shù) function uploadFile(file) { const formData new FormData(); formData.append(file, file); // 字段名‘file’需與后端接口約定一致 formData.append(uploadTime, new Date().toISOString()); // 可以附加其他數(shù)據(jù) const xhr new XMLHttpRequest(); // 配置請(qǐng)求 xhr.open(POST, /api/upload); // 替換為你的實(shí)際上傳接口地址 xhr.timeout 60000; // 設(shè)置60秒超時(shí) // 顯示進(jìn)度容器 progressContainer.style.display block; progressBar.value 0; progressText.textContent 0%; // 監(jiān)聽(tīng)上傳進(jìn)度事件關(guān)鍵監(jiān)聽(tīng)的是 xhr.upload xhr.upload.onprogress (event) { if (event.lengthComputable) { const percent Math.round((event.loaded / event.total) * 100); progressBar.value percent; progressText.textContent ${percent}%; console.log(上傳中: ${percent}%); } }; // 監(jiān)聽(tīng)請(qǐng)求完成事件 xhr.onload () { progressText.textContent 處理中...; if (xhr.status 200 xhr.status 300) { try { const response JSON.parse(xhr.responseText); console.log(上傳成功, response); progressText.textContent 上傳成功; alert(文件上傳成功服務(wù)器返回路徑${response.filePath}); } catch (e) { console.error(響應(yīng)解析失敗, e); progressText.textContent 響應(yīng)解析失敗; } } else { console.error(上傳失敗狀態(tài)碼, xhr.status); progressText.textContent 上傳失敗 (${xhr.status}); alert(上傳失敗請(qǐng)重試。); } // 3秒后隱藏進(jìn)度條 setTimeout(() { progressContainer.style.display none; }, 3000); }; // 錯(cuò)誤處理 xhr.onerror () { console.error(網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤); progressText.textContent 網(wǎng)絡(luò)錯(cuò)誤; alert(網(wǎng)絡(luò)異常請(qǐng)檢查連接。); progressContainer.style.display none; }; xhr.ontimeout () { console.error(請(qǐng)求超時(shí)); progressText.textContent 請(qǐng)求超時(shí); alert(上傳時(shí)間過(guò)長(zhǎng)請(qǐng)重試。); progressContainer.style.display none; }; // 發(fā)送請(qǐng)求 xhr.send(formData); console.log(上傳請(qǐng)求已發(fā)送...); } })();4.3 案例解析與關(guān)鍵點(diǎn)這個(gè)案例集中展示了XHR Level 2的多個(gè)核心特性FormData的便捷性我們無(wú)需關(guān)心multipart/form-data的邊界符和格式只需將File對(duì)象append進(jìn)去XHR會(huì)處理一切。上傳進(jìn)度監(jiān)控通過(guò)監(jiān)聽(tīng)xhr.upload.onprogress事件我們獲得了精確的上傳進(jìn)度數(shù)據(jù)并實(shí)時(shí)更新了進(jìn)度條UI。這是實(shí)現(xiàn)良好用戶體驗(yàn)的關(guān)鍵。更清晰的事件模型我們使用了onload成功完成替代了onreadystatechange來(lái)檢查狀態(tài)4代碼意圖更明確。同時(shí)結(jié)合onerror和ontimeout進(jìn)行全面的錯(cuò)誤處理。超時(shí)控制設(shè)置了timeout為60秒防止因網(wǎng)絡(luò)問(wèn)題導(dǎo)致請(qǐng)求無(wú)限掛起。前端預(yù)覽通過(guò)FileReader在文件上傳前就實(shí)現(xiàn)了本地圖片預(yù)覽提升了交互的即時(shí)性。注意事項(xiàng)實(shí)際部署時(shí)你需要將xhr.open(‘POST’, ‘/api/upload’)中的URL替換為真實(shí)的后端接口地址。并且后端接口需要能夠處理multipart/form-data格式的請(qǐng)求解析出名為file的文件字段。5. 常見(jiàn)問(wèn)題、排查技巧與兼容性考量即使掌握了基本用法在實(shí)際開(kāi)發(fā)中你仍會(huì)遇到一些坑。這里記錄了一些典型問(wèn)題和我的處理經(jīng)驗(yàn)。5.1 為什么我的POST請(qǐng)求數(shù)據(jù)后端收不到這可能是最常遇到的問(wèn)題之一。問(wèn)題通常出在請(qǐng)求頭Content-Type和數(shù)據(jù)格式不匹配上。場(chǎng)景一發(fā)送JSON數(shù)據(jù)。錯(cuò)誤做法只調(diào)用了xhr.send(JSON.stringify(data))但沒(méi)有設(shè)置Content-Type頭。后端可能無(wú)法識(shí)別這是JSON。正確做法xhr.open(POST, /api/user); xhr.setRequestHeader(Content-Type, application/json; charsetutf-8); // 關(guān)鍵 xhr.send(JSON.stringify({ name: 張三, age: 25 }));場(chǎng)景二發(fā)送FormData數(shù)據(jù)。錯(cuò)誤做法手動(dòng)設(shè)置了Content-Type: multipart/form-data。正確做法不要設(shè)置Content-Type頭當(dāng)你使用FormData對(duì)象作為send()的參數(shù)時(shí)XHR會(huì)自動(dòng)設(shè)置正確的Content-Type并且會(huì)包含一個(gè)唯一的boundary邊界符。如果你手動(dòng)設(shè)置反而會(huì)破壞這個(gè)自動(dòng)生成的邊界符導(dǎo)致后端解析失敗。const formData new FormData(); formData.append(key, value); xhr.open(POST, /api/upload); // xhr.setRequestHeader(Content-Type, multipart/form-data); // 千萬(wàn)不要加這行 xhr.send(formData);5.2 跨域請(qǐng)求CORS問(wèn)題如果你從http://localhost:8080向https://api.another-domain.com發(fā)送XHR請(qǐng)求瀏覽器會(huì)因?yàn)橥床呗远柚??？刂婆_(tái)會(huì)報(bào)錯(cuò)“Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy”。解決方案取決于你是否能控制后端服務(wù)器能控制后端在后端服務(wù)器的響應(yīng)中添加CORS頭。Access-Control-Allow-Origin: http://localhost:8080 // 或 * (允許所有域不推薦用于生產(chǎn)環(huán)境攜帶憑證時(shí)) Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization不能控制后端對(duì)于簡(jiǎn)單的GET請(qǐng)求可以考慮使用JSONP僅限GET。對(duì)于現(xiàn)代API通常后端已配置CORS。如果是第三方公開(kāi)API請(qǐng)查閱其文檔是否支持CORS。否則你需要通過(guò)自己的后端服務(wù)器做一次代理轉(zhuǎn)發(fā)。5.3 如何取消一個(gè)正在進(jìn)行的XHR請(qǐng)求在某些場(chǎng)景下如用戶跳轉(zhuǎn)頁(yè)面、搜索框輸入防抖需要取消未完成的請(qǐng)求。XHR提供了abort()方法。let currentXhr null; function search(keyword) { // 如果已有請(qǐng)求在進(jìn)行先取消它 if (currentXhr currentXhr.readyState ! 4) { currentXhr.abort(); console.log(已取消上一個(gè)搜索請(qǐng)求); } currentXhr new XMLHttpRequest(); currentXhr.open(GET, /api/search?q${encodeURIComponent(keyword)}); currentXhr.onload function() { /* ... 處理結(jié)果 ... */ }; currentXhr.onerror function() { /* ... 處理錯(cuò)誤 ... */ }; currentXhr.send(); }調(diào)用abort()后會(huì)觸發(fā)XHR對(duì)象的abort事件readyState也會(huì)變?yōu)?。5.4 responseType: ‘json’ 的陷阱設(shè)置responseType: ‘json’非常方便但有一個(gè)細(xì)節(jié)如果服務(wù)器返回的不是合法的JSON字符串比如返回了HTML錯(cuò)誤頁(yè)面或空字符串xhr.response的值會(huì)是null而不會(huì)拋出異常。你的代碼需要處理這種null情況。xhr.responseType json; xhr.onload function() { if (xhr.status 200) { const data xhr.response; // 可能是對(duì)象也可能是null if (data) { // 成功解析為JSON processData(data); } else { // 響應(yīng)體不是合法JSON console.error(服務(wù)器返回了非JSON格式的響應(yīng)); // 可以嘗試用xhr.responseText查看原始文本 console.log(原始響應(yīng), xhr.responseText); } } };5.5 與現(xiàn)代fetch API的對(duì)比與選擇如今fetch()API憑借基于Promise的鏈?zhǔn)秸{(diào)用、更簡(jiǎn)潔的語(yǔ)法成為新的標(biāo)準(zhǔn)。那么我們還需要XHR嗎fetch的優(yōu)勢(shì)語(yǔ)法更簡(jiǎn)潔基于Promise易于組合和使用async/await。更現(xiàn)代是W3C標(biāo)準(zhǔn)代表了未來(lái)方向。默認(rèn)不攜帶Cookie行為更可控。依然選擇XHR的場(chǎng)景需要上傳進(jìn)度監(jiān)控fetchAPI目前截至2023年仍無(wú)法直接獲取上傳進(jìn)度而XHR的upload.onprogress是現(xiàn)成的解決方案。需要請(qǐng)求超時(shí)控制fetch本身不支持超時(shí)設(shè)置需要借助AbortController而XHR的timeout屬性簡(jiǎn)單直接。需要更細(xì)粒度的請(qǐng)求狀態(tài)控制XHR的readyState在調(diào)試復(fù)雜請(qǐng)求流程時(shí)有時(shí)更有用。兼容性要求如果你的項(xiàng)目需要支持非常古老的瀏覽器如IE10及以下fetch不可用XHR是唯一選擇。不過(guò)可以通過(guò)polyfill解決。我的個(gè)人建議是對(duì)于大多數(shù)新的項(xiàng)目?jī)?yōu)先使用fetch。當(dāng)遇到需要監(jiān)控上傳進(jìn)度這個(gè)硬性需求時(shí)再考慮使用XHR或者尋找基于fetch的進(jìn)度監(jiān)控polyfill方案。將兩者結(jié)合使用取長(zhǎng)補(bǔ)短也是常見(jiàn)的做法。例如用fetch處理普通的JSON API請(qǐng)求用XHR專(zhuān)門(mén)處理大文件上傳。