關鍵對象之一：XMLHttpRequest對象

Ajax（Asynchronous JavaScript and XML）是一種在前端實現異步請求的技術，可以實現頁面的部分刷新，提高用戶體驗。在Ajax中，實現各種功能的關鍵對象之一就是XMLHttpRequest（XHR）對象。

XMLHttpRequest對象用于與服務器進行交互，發送異步請求和接收響應。它通過在后臺與服務器進行數據交換，無需刷新整個頁面即可更新部分內容。

例如，我們可以使用XHR對象通過發送HTTP請求從服務器獲取數據，并將其顯示在網頁上。下面是一個使用XHR對象獲取JSON數據的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 將數據顯示在頁面上
document.getElementById('result').innerHTML = data.message;
}
};
xhr.send();

在上面的例子中，我們創建了一個XHR對象，并使用`open`方法指定了需要獲取數據的URL。然后，我們監聽`onreadystatechange`事件，當XHR對象的狀態發生變化時，會觸發該事件。當`readyState`為4（請求已完成）且`status`為200（成功響應）時，我們解析`responseText`中的JSON數據，并將其中的`message`字段的值顯示在頁面上。

關鍵對象之二：FormData對象

除了XMLHttpRequest對象外，FormData對象也是Ajax實現功能的關鍵對象之一。FormData對象用于對表單數據進行序列化，并將其使用異步請求發送到服務器。

例如，我們可以使用FormData對象發送帶有文件上傳的表單數據。下面是一個使用FormData對象發送表單數據的示例：

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

在上面的例子中，我們首先獲取了一個form元素，并使用FormData對象對其進行序列化。然后，我們獲取了一個文件輸入框的值，并通過`append`方法將文件添加到FormData對象中。接下來，我們創建了一個XHR對象，并使用`open`方法指定了上傳文件的URL。最后，我們監聽`onreadystatechange`事件，當XHR對象的狀態發生變化時，會觸發該事件。當`readyState`為4（請求已完成）且`status`為200（成功響應）時，彈出提示框，提示文件上傳成功。

通過使用XMLHttpRequest對象和FormData對象，我們可以靈活地實現各種Ajax功能，比如獲取數據、發送表單數據、上傳文件等。這兩個關鍵對象在Ajax中發揮著重要的作用，使得我們可以以更高效、便捷的方式實現前端的異步請求。