AJAX和FormData是Web開發中常用的兩個技術。AJAX（Asynchronous JavaScript and XML）是一種無需刷新整個頁面的異步交互方式，可以實現頁面的動態更新。FormData是一種HTML5提供的表單數據封裝對象，用于提交表單數據，可以實現文件上傳等功能。本文將介紹AJAX和FormData的基本用法，并通過具體的示例來說明其在實際開發中的應用。

首先，我們來看一下AJAX的基本用法。AJAX可以通過XMLHttpRequest對象來實現，其主要實現原理是通過異步加載數據，然后使用JavaScript來更新頁面的部分內容。下面是一個簡單的示例，通過AJAX來獲取一個Web API返回的JSON數據，并將數據展示在頁面上：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = data.name;
}
};
xhr.send();

在上面的示例中，我們創建一個XMLHttpRequest對象，并使用open方法指定請求的類型、URL和是否異步。然后通過onreadystatechange事件來監聽狀態的變化，在狀態變為DONE并且狀態碼為200時，表示請求成功，我們可以通過responseText屬性獲取服務器返回的數據，并更新頁面上的元素。

接下來，我們來介紹一下FormData的使用方法。FormData提供了一種方便的方式來收集表單數據，并將其封裝成一個鍵值對形式的對象，可以直接用于發送AJAX請求。下面是一個簡單的示例，演示了如何使用FormData提交一個包含文件上傳的表單：

let form = document.getElementById('myForm');
let formData = new FormData(form);
formData.append('file', document.getElementById('fileInput').files[0]);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://api.example.com/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = data.message;
}
};
xhr.send(formData);

在上面的示例中，我們首先通過document.getElementById獲取表單元素和文件輸入框，并創建一個FormData對象。然后使用append方法將表單數據和文件添加到FormData中。最后，通過XMLHttpRequest對象發送AJAX請求，并將FormData作為參數傳遞給send方法。

綜上所述，AJAX和FormData是Web開發中非常實用的兩個技術。AJAX可以實現頁面的無刷新動態更新，使用戶在不離開當前頁面的情況下獲取最新的數據。FormData則提供了一種方便的方式來處理表單數據和文件上傳。通過組合AJAX和FormData，我們可以實現各種復雜的異步交互和數據提交功能，提升用戶體驗。