Ajax 是一種用于網頁開發的技術，它允許在網頁加載期間異步地向服務器發送請求和接收響應。使用 Ajax 可以使網頁在不刷新整個頁面的情況下更新部分內容，從而提供更好的用戶體驗。一個常見的應用場景是在用戶提交表單后，通過 Ajax 請求服務器處理數據，并將返回的結果動態地更新到當前頁面上。
舉個例子, 假設我們正在開發一個在線商城網站，用戶在結賬時需要上傳一張身份證照片來驗證身份。上傳這張照片可能需要一些時間，傳統的做法是用戶提交表單后等待服務器處理過程，然后刷新整個頁面以顯示結果。然而，這種方式會使用戶體驗變差，因為頁面刷新會導致用戶的瀏覽位置丟失，并且需要用戶等待更長的時間才能看到處理結果。通過使用 Ajax，我們可以在用戶提交照片后立即向服務器發送請求，然后在服務器處理照片的同時，更新頁面上的其他內容，比如顯示一個加載提示或者處理進度條。一旦服務器返回身份驗證結果，我們可以使用 Ajax 將結果動態地更新到當前頁面上，而不需要刷新整個頁面。
下面是一個簡單的代碼示例，展示如何使用 Ajax 來處理用戶上傳的身份證照片并更新頁面上的結果：
請上傳身份證照片：
// 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 = "上傳進度：" + percentComplete.toFixed(2) + "%"; } }; xhr.onload = function() { if (xhr.status === 200) { document.getElementById("result").textContent = xhr.responseText; } else { document.getElementById("result").textContent = "上傳失敗"; } }; xhr.send(formData); } 在這個例子中，我們首先在 HTML 中定義了一個文件選擇器和一個提交按鈕。用戶選擇完照片并點擊提交按鈕后，JavaScript 中的 uploadPhoto() 函數將被調用。該函數獲取用戶選擇的文件，并使用 FormData 對象來構建一個包含照片的表單數據。然后，我們創建一個 XMLHttpRequest 對象，設置請求方法為 POST，并指定服務器端處理程序的 URL。 在 XMLHttpRequest 對象上設置了兩個事件處理程序：upload.onprogress 和 onload。前者用于在照片上傳過程中實時顯示上傳進度，后者用于在服務器返回響應后更新頁面上的結果。在 upload.onprogress 處理程序中，我們通過計算已上傳的字節數比總字節數的比例，來獲取上傳進度的百分比，并將其顯示在頁面上。 在 onload 處理程序中，我們首先檢查服務器返回的狀態碼，如果狀態碼為 200，說明照片上傳并處理成功，我們將服務器返回的結果顯示在頁面上；否則，我們顯示一個上傳失敗的消息。 通過使用 Ajax 技術，我們可以實現類似這樣的異步更新，從而提供更好的用戶體驗。用戶在上傳照片后無需等待整個頁面刷新，而是可以接收到及時的進度信息，并在處理完成后立即看到結果。這種方式減少了用戶等待時間，同時也避免了頁面刷新所帶來的問題。