Ajax（Asynchronous JavaScript and XML）是一種用于在Web頁面上異步加載數(shù)據(jù)的技術(shù)。通過Ajax，我們可以在不刷新整個頁面的情況下，從服務器請求數(shù)據(jù)并將其存儲到頁面上。這種技術(shù)廣泛應用于現(xiàn)代網(wǎng)站，為用戶提供了更好的用戶體驗。下面我們將通過舉例說明，介紹Ajax如何將數(shù)據(jù)存儲到頁面上。
假設我們正在開發(fā)一個電商網(wǎng)站，用戶可以通過搜索欄實時搜索商品。當用戶輸入關(guān)鍵字時，網(wǎng)站會向服務器發(fā)送異步請求，獲取匹配的商品列表，并將列表展示在頁面上。
首先，我們需要在前端頁面中創(chuàng)建一個搜索欄和一個用于展示商品列表的區(qū)域。當用戶輸入關(guān)鍵字時，我們可以使用JavaScript監(jiān)聽輸入事件，并通過Ajax發(fā)送請求到服務器。

html
<p>請輸入您要搜索的商品：</p>
<input type="text" id="keyword">
<div id="product-list"></div>

接下來，我們使用JavaScript來處理用戶輸入事件，并發(fā)送Ajax請求。

javascript
document.getElementById('keyword').addEventListener('input', function() {
var keyword = this.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var productList = JSON.parse(xhr.responseText);
displayProductList(productList);
}
};
xhr.open('GET', '/search?keyword=' + keyword, true);
xhr.send();
});
function displayProductList(productList) {
var productHtml = '';
for (var i = 0; i < productList.length; i++) {
var product = productList[i];
productHtml += '<div>' + product.name + ' - ￥' + product.price + '</div>';
}
document.getElementById('product-list').innerHTML = productHtml;
}

在上面的代碼中，我們監(jiān)聽了輸入事件，并獲取搜索欄中的關(guān)鍵字。然后，我們創(chuàng)建了一個XMLHttpRequest對象來發(fā)送Ajax請求。當請求的狀態(tài)改變時，我們檢查響應的狀態(tài)碼，如果為200，則說明請求成功，我們將服務器返回的商品列表轉(zhuǎn)換為JavaScript對象，并調(diào)用displayProductList()函數(shù)將列表展示在頁面上。
在服務器端，我們需要處理Ajax請求，并返回合適的響應。我們可以使用任何服務器端技術(shù)來處理請求，比如PHP、Node.js等。在本例中，我們假設服務器端使用Node.js，并且有一個/search的路由來處理搜索請求。

javascript
app.get('/search', function(req, res) {
var keyword = req.query.keyword;
var productList = searchProduct(keyword);
res.send(productList);
});
function searchProduct(keyword) {
// 在商品數(shù)據(jù)庫中搜索匹配的商品，并返回一個包含商品信息的數(shù)組
// 這里只是一個示例，實際應用中需要根據(jù)具體需求編寫
var products = [
{ name: '蘋果', price: 5 },
{ name: '香蕉', price: 3 },
{ name: '橙子', price: 4 }
];
var matchingProducts = [];
for (var i = 0; i < products.length; i++) {
if (products[i].name.includes(keyword)) {
matchingProducts.push(products[i]);
}
}
return matchingProducts;
}

在上述服務器端代碼中，我們首先獲取來自客戶端請求的關(guān)鍵字。然后，我們使用searchProduct()函數(shù)在商品數(shù)據(jù)庫中搜索匹配的商品，這里只是一個簡單示例，實際應用中需要根據(jù)實際情況編寫。最后，我們將匹配的商品列表作為響應發(fā)送回客戶端。
通過上述示例，我們可以看到Ajax如何將數(shù)據(jù)存儲到頁面上。用戶在搜索欄中輸入關(guān)鍵字時，網(wǎng)站通過Ajax發(fā)送異步請求，獲取匹配的商品列表，并將其展示在頁面上，而無需刷新整個頁面。這樣，用戶可以實時看到搜索結(jié)果，并獲得更好的用戶體驗。