AJAX（Asynchronous JavaScript and XML）是一種用于創建快速、交互性和動態的網頁應用程序的技術。它允許在不重新加載整個網頁的情況下，局部更新頁面內容。在這篇文章中，我們將探討如何使用AJAX傳輸file數據，以及如何處理服務器返回的文件。

首先，讓我們來看一個示例。假設我們有一個簡單的網頁，其中包含一個上傳文件的表單。當用戶選擇文件并單擊上傳按鈕時，我們希望通過AJAX將文件傳輸到服務器，并在服務器上進行處理。

<form id="uploadForm" enctype="multipart/form-data"><input type="file" name="fileToUpload" id="fileToUpload"><input type="button" value="上傳" onclick="uploadFile()"></form>

上面的代碼片段中，我們定義了一個包含一個文件輸入字段和一個上傳按鈕的表單。我們給表單添加了一個id屬性，以便在JavaScript代碼中引用它。當上傳按鈕被單擊時，uploadFile()函數將被調用。

接下來，讓我們來看看uploadFile()函數的實現：

function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
};
xhr.send(formData);
}

在uploadFile()函數中，我們首先獲取了用戶選擇的文件，并創建了一個新的FormData對象。然后，我們將文件附加到formData對象中，并創建了一個新的XMLHttpRequest對象。

我們使用XMLHttpRequest的open()方法指定請求的方法（POST）和服務器端的URL（在這個例子中是"upload.php"）。在這個例子中，我們將數據傳輸到服務器的upload.php文件，你可以根據自己的需要使用不同的URL。

接下來，我們使用XMLHttpRequest的onreadystatechange事件處理程序來監測當請求完成時服務器的響應。在這個例子中，當readyState等于4（請求已完成）且status等于200（HTTP狀態碼OK）時，我們顯示一個彈出窗口，并將服務器返回的響應文本作為其內容。

最后，我們通過調用XMLHttpRequest的send()方法將formData對象發送到服務器。

當服務器收到文件后，我們需要在服務器端進行處理。在這個例子中，我們假設服務器上有一個upload.php文件，可以處理文件并返回一個成功的響應。

// upload.php

在上面的代碼中，我們首先指定了一個目標目錄，然后使用move_uploaded_file()函數將臨時文件移動到目標目錄中。如果移動操作成功，我們返回一個成功的響應。否則，我們返回一個失敗的響應。

總結來說，通過使用AJAX傳輸file數據，我們可以在不重新加載整個頁面的情況下將文件上傳到服務器。在服務器上，我們可以使用服務器端腳本來處理文件，并返回一個響應。這種方法可以提供更好的用戶體驗，并提高網頁應用程序的性能。