AJAX（Asynchronous JavaScript and XML）是一種在Web開發中常用的技術，它能夠實現頁面的局部刷新，使用戶能夠動態地獲取數據并更新頁面的特定部分，而無需刷新整個頁面。通過AJAX，我們可以在不打擾用戶瀏覽的情況下，實時更新文本框中的內容，為用戶提供更加流暢和友好的使用體驗。

舉例來說，假設我們正在設計一個在線聊天室，當用戶發送一條聊天消息時，我們希望將該消息實時顯示在聊天框中，而無需用戶手動刷新頁面。這時候，利用AJAX的局部刷新功能就可以很方便地實現。

souce code:
<script>
function sendMessage() {
var message = document.getElementById("messageInput").value; // 獲取用戶輸入的消息
// 發送消息到服務器并獲取回應
// ...
// 將回應的消息局部刷新到聊天框中
document.getElementById("chatBox").innerText += message + "\n";
}
</script>

上述代碼中，我們定義了一個sendMessage函數，該函數在用戶點擊發送按鈕時被調用。首先，它獲取了用戶在輸入框中輸入的消息。然后，通過AJAX技術將消息發送到服務器，并獲取服務器的回應。最后，它將服務器返回的消息通過將其添加到聊天框中的方式實現了局部刷新。

AJAX的局部刷新還可以應用于其他場景。例如，在一個電子商務網站中，當用戶選擇不同的分類時，我們希望能夠實時展示該分類下的商品列表，而無需刷新整個頁面。我們可以利用AJAX技術監聽用戶的選擇事件，并發送AJAX請求，從服務器獲取相應的商品列表數據。然后，通過修改頁面中的HTML元素內容，實現局部刷新商品列表。

souce code:
<script>
function getProducts(category) {
// 發送AJAX請求，獲取對應分類的商品列表數據
// ...
// 將返回的商品列表數據解析并生成HTML內容
var productsHTML = "";
for (var i = 0; i< data.products.length; i++) {
productsHTML += "<div class='product'>" + data.products[i].name + "</div>";
}
// 將生成的HTML內容局部刷新到頁面中的商品列表容器
document.getElementById("productList").innerHTML = productsHTML;
}
</script>

以上代碼中，getProducts函數用于處理分類選擇事件。當用戶選擇分類時，該函數被調用，然后通過AJAX請求從服務器獲取對應分類的商品列表數據。接著，我們將返回的數據解析，并根據數據生成對應的HTML內容。最后，通過修改商品列表容器的innerHTML屬性，將生成的HTML內容實現局部刷新顯示。

通過上述例子，我們可以看到AJAX的局部刷新功能在Web開發中發揮了重要作用。它使得我們能夠更加靈活地更新頁面的特定部分，為用戶提供更加優秀的使用體驗。無論是聊天室、電子商務網站還是其他Web應用，AJAX的局部刷新都能夠為用戶帶來便利和舒適。