Ajax 是一種用于網(wǎng)頁開發(fā)的技術(shù)，它允許在網(wǎng)頁加載期間異步地向服務(wù)器發(fā)送請求和接收響應(yīng)。使用 Ajax 可以使網(wǎng)頁在不刷新整個(gè)頁面的情況下更新部分內(nèi)容，從而提供更好的用戶體驗(yàn)。一個(gè)常見的應(yīng)用場景是在用戶提交表單后，通過 Ajax 請求服務(wù)器處理數(shù)據(jù)，并將返回的結(jié)果動(dòng)態(tài)地更新到當(dāng)前頁面上。 舉個(gè)例子, 假設(shè)我們正在開發(fā)一個(gè)在線商城網(wǎng)站，用戶在結(jié)賬時(shí)需要上傳一張身份證照片來驗(yàn)證身份。上傳這張照片可能需要一些時(shí)間，傳統(tǒng)的做法是用戶提交表單后等待服務(wù)器處理過程，然后刷新整個(gè)頁面以顯示結(jié)果。然而，這種方式會(huì)使用戶體驗(yàn)變差，因?yàn)轫撁嫠⑿聲?huì)導(dǎo)致用戶的瀏覽位置丟失，并且需要用戶等待更長的時(shí)間才能看到處理結(jié)果。通過使用 Ajax，我們可以在用戶提交照片后立即向服務(wù)器發(fā)送請求，然后在服務(wù)器處理照片的同時(shí)，更新頁面上的其他內(nèi)容，比如顯示一個(gè)加載提示或者處理進(jìn)度條。一旦服務(wù)器返回身份驗(yàn)證結(jié)果，我們可以使用 Ajax 將結(jié)果動(dòng)態(tài)地更新到當(dāng)前頁面上，而不需要刷新整個(gè)頁面。 下面是一個(gè)簡單的代碼示例，展示如何使用 Ajax 來處理用戶上傳的身份證照片并更新頁面上的結(jié)果：

請上傳身份證照片：

提交

// JavaScript function uploadPhoto() { var fileInput = document.getElementById("photoUpload"); var file = fileInput.files[0]; var formData = new FormData(); formData.append("photo", file); var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload", true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; document.getElementById("progress").textContent = "上傳進(jìn)度：" + percentComplete.toFixed(2) + "%"; } }; xhr.onload = function() { if (xhr.status === 200) { document.getElementById("result").textContent = xhr.responseText; } else { document.getElementById("result").textContent = "上傳失敗"; } }; xhr.send(formData); } 在這個(gè)例子中，我們首先在 HTML 中定義了一個(gè)文件選擇器和一個(gè)提交按鈕。用戶選擇完照片并點(diǎn)擊提交按鈕后，JavaScript 中的 uploadPhoto() 函數(shù)將被調(diào)用。該函數(shù)獲取用戶選擇的文件，并使用 FormData 對象來構(gòu)建一個(gè)包含照片的表單數(shù)據(jù)。然后，我們創(chuàng)建一個(gè) XMLHttpRequest 對象，設(shè)置請求方法為 POST，并指定服務(wù)器端處理程序的 URL。 在 XMLHttpRequest 對象上設(shè)置了兩個(gè)事件處理程序：upload.onprogress 和 onload。前者用于在照片上傳過程中實(shí)時(shí)顯示上傳進(jìn)度，后者用于在服務(wù)器返回響應(yīng)后更新頁面上的結(jié)果。在 upload.onprogress 處理程序中，我們通過計(jì)算已上傳的字節(jié)數(shù)比總字節(jié)數(shù)的比例，來獲取上傳進(jìn)度的百分比，并將其顯示在頁面上。 在 onload 處理程序中，我們首先檢查服務(wù)器返回的狀態(tài)碼，如果狀態(tài)碼為 200，說明照片上傳并處理成功，我們將服務(wù)器返回的結(jié)果顯示在頁面上；否則，我們顯示一個(gè)上傳失敗的消息。 通過使用 Ajax 技術(shù)，我們可以實(shí)現(xiàn)類似這樣的異步更新，從而提供更好的用戶體驗(yàn)。用戶在上傳照片后無需等待整個(gè)頁面刷新，而是可以接收到及時(shí)的進(jìn)度信息，并在處理完成后立即看到結(jié)果。這種方式減少了用戶等待時(shí)間，同時(shí)也避免了頁面刷新所帶來的問題。