在現(xiàn)代的Web開發(fā)中，網(wǎng)頁局部刷新是一個非常重要的功能。隨著Ajax（Asynchronous JavaScript and XML）技術(shù)的出現(xiàn)，我們可以通過異步請求來局部刷新頁面，而不必重新加載整個頁面。這為用戶提供了更好的用戶體驗，并減少了服務(wù)器和帶寬的負(fù)載。
例如，假設(shè)我們有一個電子商務(wù)網(wǎng)站，當(dāng)用戶點擊“添加到購物車”按鈕時，我們希望更新頁面上的購物車數(shù)量，而不必刷新整個頁面。通過Ajax，我們可以在后臺發(fā)送異步請求，從數(shù)據(jù)庫中獲取最新的購物車數(shù)量，并將其動態(tài)更新到頁面上。
為了實現(xiàn)這個功能，我們需要以下步驟：
1. 創(chuàng)建一個包含“添加到購物車”按鈕的HTML頁面。當(dāng)用戶點擊按鈕時，我們將觸發(fā)一個JavaScript函數(shù)來處理該請求。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function addToCart() {
// 執(zhí)行Ajax請求
}
</script>
</head>
<body>
<button onclick="addToCart()">添加到購物車</button>
<div id="cart">購物車數(shù)量：</div>
</body>
</html>function addToCart() {
$.ajax({
url: "/addToCart",
type: "POST",
success: function(data) {
$("#cart").text("購物車數(shù)量：" + data.count);
}
});
}app.post("/addToCart", function(req, res) {
// 從數(shù)據(jù)庫中獲取購物車數(shù)量
var count = ...;
// 返回購物車數(shù)量
res.json({ count: count });
});