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

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

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

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

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

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

當請求發(fā)送成功后，我們需要在JavaScript代碼中使用onreadystatechange事件來檢測請求狀態(tài)的改變。在請求完成并成功后，我們可以通過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向頁面添加了靜態(tài)數據。通過以上的示例，我們可以看到如何使用Ajax來添加靜態(tài)數據，而無需向服務器發(fā)送請求。這種方法非常適用于在構建靜態(tài)網頁時添加一些數據來提高頁面的交互性和用戶體驗。

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