在現(xiàn)代Web開發(fā)中，Ajax（Asynchronous JavaScript and XML）已經(jīng)成為了不可或缺的技術(shù)。它使得我們能夠在不刷新整個頁面的情況下，與服務器進行異步的數(shù)據(jù)交互。除了傳輸文本數(shù)據(jù)之外，Ajax還可以用來實現(xiàn)文件上傳功能。本文將介紹如何使用Ajax來實現(xiàn)文件上傳，以及如何通過Ajax發(fā)送和接收文本數(shù)據(jù)。

文件上傳是一個常見的需求，比如在社交媒體平臺上，用戶希望能夠上傳照片或視頻。傳統(tǒng)的文件上傳方式需要在表單中設置enctype為"multipart/form-data"，并通過服務器端處理表單數(shù)據(jù)來完成上傳。而使用Ajax，我們可以利用FormData對象，更方便地將文件數(shù)據(jù)發(fā)送到服務器。以下是一個示例代碼：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('文件上傳成功');
}
};

在上述代碼中，首先獲取到文件輸入框的DOM元素，并通過files屬性獲取到選擇的文件。然后創(chuàng)建一個FormData對象，并使用append方法將文件數(shù)據(jù)添加到FormData中。接著創(chuàng)建一個XMLHttpRequest實例，通過open方法指定請求方法和URL，并使用send方法發(fā)送FormData。最后，通過監(jiān)聽XMLHttpRequest的onreadystatechange事件，我們可以在文件上傳完成后執(zhí)行一些操作，比如在控制臺輸出成功的信息。

除了文件上傳，通過Ajax還可以實現(xiàn)文本數(shù)據(jù)的發(fā)送和接收。比如在一個留言板應用中，當用戶點擊提交按鈕時，我們可以使用Ajax將用戶輸入的文本發(fā)送到服務器，并在頁面上實時顯示新的留言。以下是示例代碼：

var messageInput = document.getElementById('messageInput');
var message = messageInput.value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/postMessage', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var newMessage = document.createElement('p');
newMessage.innerText = response.message;
document.getElementById('messageContainer').appendChild(newMessage);
}
};
xhr.send(JSON.stringify({ message: message }));

上述代碼中，我們首先獲取到輸入框中用戶輸入的文本，并創(chuàng)建一個XMLHttpRequest實例。通過open方法指定請求方法和URL，并通過setRequestHeader方法設置請求頭的Content-Type為"application/json"，以便告訴服務器我們發(fā)送的是JSON格式的數(shù)據(jù)。在監(jiān)聽XMLHttpRequest的onreadystatechange事件時，我們可以在請求完成后解析服務器返回的JSON數(shù)據(jù)，并將新的留言添加到頁面上。

通過以上兩個示例，我們可以看到Ajax在文件上傳和文本發(fā)送方面的應用。無論是文件上傳還是文本發(fā)送，Ajax都能夠使我們的Web應用更加實時和交互性，提升用戶體驗。