元素或者一個元素，具體根據(jù)需求決定。假設(shè)我們使用一個元素：

<table id="data-table" border="1">

<tr>

<th>商品名稱</th>

<th>價格</th>

</tr>

</table>

為了使用Ajax獲取數(shù)據(jù)，我們需要創(chuàng)建一個XMLHttpRequest對象，可以通過以下代碼來創(chuàng)建：

var xhr = new XMLHttpRequest();

接下來，我們需要定義一個回調(diào)函數(shù)，當(dāng)請求完成后會被調(diào)用。在回調(diào)函數(shù)中，我們可以通過xhr.responseText獲取服務(wù)器返回的數(shù)據(jù)，并將其解析并更新到網(wǎng)頁上。

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

var response = JSON.parse(xhr.responseText);

// 解析返回的數(shù)據(jù)并更新到網(wǎng)頁上

}}

接著，我們需要使用xhr.open()方法來指定請求的類型（GET或者POST）和URL。假設(shè)我們的服務(wù)器接口是/api/products：

xhr.open('GET', '/api/products', true);

然后，我們需要發(fā)送請求到服務(wù)器，可以使用xhr.send()方法：

xhr.send();

最后，我們在回調(diào)函數(shù)中將返回的數(shù)據(jù)解析并更新到網(wǎng)頁上。繼續(xù)上面的例子，假設(shè)服務(wù)器返回的是一個包含商品信息的JSON數(shù)組，我們可以遍歷數(shù)組中的每個商品對象，并將其添加到元素中的新行中。

var table = document.getElementById('data-table');

for (var i = 0; i< response.length; i++) {

var row = table.insertRow(-1);

var nameCell = row.insertCell(0);

var priceCell = row.insertCell(1);

nameCell.innerHTML = response[i].name;

priceCell.innerHTML = response[i].price;

}

以上就是使用Ajax獲取數(shù)據(jù)并將其顯示在網(wǎng)頁上的基本步驟和示例。通過發(fā)送異步請求和處理回調(diào)函數(shù)，我們可從服務(wù)器獲取數(shù)據(jù)并將其更新到指定位置。這樣可以在不刷新整個頁面的情況下，實現(xiàn)實時的數(shù)據(jù)展示和交互。