AJAX（Asynchronous JavaScript And XML）是一種在網頁上無需刷新整個頁面的情況下與服務器進行數據交互的技術。在文件上傳過程中，如果用戶選擇同一個文件多次進行上傳，使用AJAX可以避免不必要的網絡請求，提升用戶體驗。本文將通過舉例說明AJAX上傳同一個文件不再請求的方法和原理。

假設有一個文件上傳功能的網頁，用戶可以通過一個表單選擇要上傳的文件，并通過點擊按鈕進行提交。在傳統的表單提交方式下，每次點擊按鈕都會觸發一次網頁的刷新，導致不必要的網絡請求以及頁面內容的重新加載。而使用AJAX技術，可以在不刷新整個頁面的情況下實現文件上傳的功能。

下面是一個簡單的示例代碼，展示了如何使用AJAX上傳同一個文件不再請求的方法。

/**
 * 文件上傳函數
 * @param {File} file 上傳的文件對象
 */
function uploadFile(file) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('文件上傳成功');
}
};
// 文件上傳邏輯
// ...
xhr.send(file);
}
const fileInput = document.getElementById('file-input');
let previousFile = null;
fileInput.addEventListener('change', function() {
const file = fileInput.files[0];
if (file !== previousFile) {
uploadFile(file);
}
previousFile = file;
});

在上述代碼中，首先定義了一個uploadFile函數，用于實際的文件上傳操作。該函數通過XMLHttpRequest對象發送一個POST請求到服務器的/upload路徑，并設置請求頭的Content-Type為multipart/form-data，表示上傳的是一個文件。在數據發送完成后，通過onreadystatechange事件監聽請求的狀態變化，當readyState變為4（請求已完成）且status為200（成功）時，表示文件上傳成功。

在文件選擇框的change事件監聽函數中，獲取用戶選擇的文件對象file。如果這個文件對象與之前選擇的文件對象previousFile不相同，說明用戶選擇了一個新的文件，此時調用uploadFile函數進行文件上傳操作。在上傳完成后，將當前文件對象file賦值給previousFile，以便下次文件選擇時進行判斷。

為了更好地理解AJAX上傳同一個文件不再請求的原理，我們假設用戶連續兩次選擇了同一個文件進行上傳。在第一次上傳時，因為previousFile為null，uploadFile函數會執行文件上傳操作。而在第二次上傳時，previousFile已經為上一次的文件對象，與當前選擇的文件并不相同，所以uploadFile函數會再次執行文件上傳操作。如果用戶第三次上傳還是選擇了同一個文件，因為此時previousFile與當前選擇的文件對象是相同的，所以uploadFile函數不會被執行，避免了不必要的網絡請求。

通過上述示例代碼和說明，我們可以看出，使用AJAX上傳同一個文件不再請求的方法非常簡單。通過記錄上一次選擇的文件對象，我們可以在用戶選擇相同文件時避免觸發多余的上傳請求。這種方法在文件上傳功能中非常實用，可以提升用戶體驗，減少不必要的網絡請求。