Ajax（Asynchronous JavaScript and XML）是一種用于在網頁上實現異步通信的技術。它可以實現頁面無需刷新即可向服務器請求數據，并將獲取的數據動態展示在頁面上。一般情況下，Ajax通常用于向服務器請求動態數據，但是它也可以用于在不需要向服務器請求數據的情況下，將靜態數據添加到頁面中。本文將詳細介紹如何使用Ajax向頁面中添加靜態數據。

在使用Ajax添加靜態數據之前，我們需要使用JavaScript創建一個XMLHttpRequest對象。下面是創建XMLHttpRequest對象的代碼：

var xhr;
if (window.XMLHttpRequest) {
// code for modern browsers
xhr = new XMLHttpRequest();
} else {
// code for old IE browsers
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

一旦我們創建好XMLHttpRequest對象，接下來就可以使用open()和send()方法向服務器發送請求。在這里我們不需要向服務器請求數據，所以我們可以使用一個URL地址作為參數傳遞給open()方法。下面是向頁面添加靜態數據的示例：

xhr.open("GET", "data.json", true);
xhr.send();

在上面的代碼中，我們向open()方法傳遞了一個名為"data.json"的URL地址，這是一個包含靜態數據的JSON文件。而send()方法用于發送請求。請注意，我們將"true"作為第三個參數傳遞給open()方法，這表示我們希望進行異步通信。

當請求發送成功后，我們需要在JavaScript代碼中使用onreadystatechange事件來檢測請求狀態的改變。在請求完成并成功后，我們可以通過responseText屬性獲取到從服務器返回的數據。下面是相應代碼：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 這里可以將獲取到的數據添加到頁面上
// 例如，我們可以使用innerHTML屬性將數據添加到一個
元素中
document.getElementById("dataContainer").innerHTML = data;
}
};

在上面的代碼中，我們首先檢查readyState屬性的值是否為4，這表示請求已完成。然后，我們檢查status屬性的值是否為200，這表示請求成功。如果兩個條件都滿足，我們將使用JSON.parse()方法將服務器返回的數據轉換為JavaScript對象。接下來，我們可以將這些數據添加到頁面中。在這個例子中，我們使用了一個id為"dataContainer"的元素來展示數據。

到此為止，我們已經成功使用Ajax向頁面添加了靜態數據。通過以上的示例，我們可以看到如何使用Ajax來添加靜態數據，而無需向服務器發送請求。這種方法非常適用于在構建靜態網頁時添加一些數據來提高頁面的交互性和用戶體驗。

總結起來，通過使用Ajax，我們可以將靜態數據動態地添加到頁面中。只需在JavaScript中創建一個XMLHttpRequest對象，發送一個請求并在請求成功后處理返回的數據。這種方式可以讓我們更好地利用Ajax的優勢，提供更好的用戶體驗。