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