AJAX（Asynchronous JavaScript and XML）是一種在Web開發中廣泛應用的技術，它使得網頁能夠實現局部無刷新的數據交互。通過使用AJAX，網頁可以在不刷新整個頁面的情況下，與服務器進行數據交換并實時更新內容，提供更好的用戶體驗。以下文章將通過幾個實例詳細介紹AJAX局部無刷新數據的應用。

第一個實例是一個簡單的表單提交的場景。假設我們有一個注冊頁面，用戶在該頁面填寫完個人信息后，點擊提交按鈕將信息發送到服務器保存。傳統的做法是用戶點擊提交按鈕后，整個頁面會刷新，然后跳轉到另外一個注冊成功的頁面。使用AJAX，我們可以在不刷新整個頁面的情況下，將用戶填寫的信息發送給服務器，并通過返回結果實時更新頁面內容，如顯示注冊成功的提示信息。以下是使用AJAX實現這個功能的示例代碼：

// HTML
<form id="register-form">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="button" id="submit-button">提交</button>
</form>
<div id="result-message"></div>
// JavaScript
document.getElementById("submit-button").addEventListener("click", function() {
var form = document.getElementById("register-form");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/register", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
document.getElementById("result-message").innerText = "注冊成功！";
} else {
document.getElementById("result-message").innerText = "注冊失敗，請稍后再試。";
}
}
};
xhr.send(formData);
});

在上述代碼中，我們給提交按鈕添加了一個點擊事件監聽器。當按鈕被點擊時，我們首先獲取表單中用戶填寫的信息，并使用XMLHttpRequest對象創建一個POST請求，并將表單數據作為請求的內容發送給服務器。服務器返回的結果會在XMLHttpRequest對象的onreadystatechange事件中進行處理，根據返回的結果更新頁面內容。

第二個實例是一個頁面上的實時搜索功能。假設我們有一個產品列表頁面，用戶可以在輸入框中輸入關鍵字進行搜索，然后頁面會根據關鍵字實時更新顯示匹配的產品。傳統的做法是用戶輸入關鍵字后，頁面會刷新并重新加載產品列表。使用AJAX，我們可以在用戶輸入關鍵字的同時，向服務器發送請求并獲取匹配的產品數據，然后通過將數據動態顯示在頁面上實現實時搜索。以下是使用AJAX實現這個功能的示例代碼：

// HTML
<input type="text" id="search-input" placeholder="輸入關鍵字">
<ul id="product-list"></ul>
// JavaScript
document.getElementById("search-input").addEventListener("input", function() {
var keyword = this.value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/search?keyword=" + encodeURIComponent(keyword), true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var productList = document.getElementById("product-list");
productList.innerHTML = "";
response.forEach(function(product) {
var li = document.createElement("li");
li.innerText = product.name;
productList.appendChild(li);
});
}
};
xhr.send();
});

在上述代碼中，我們給輸入框添加了一個輸入事件監聽器。當輸入框的內容發生變化時，我們首先獲取用戶輸入的關鍵字，并使用XMLHttpRequest對象創建一個GET請求，并將關鍵字作為請求的參數發送給服務器。服務器將根據關鍵字返回匹配的產品數據，我們將數據動態添加到頁面的產品列表上。

綜上所述，AJAX局部無刷新數據的應用在Web開發中非常常見。通過AJAX，我們可以實現表單提交、實時搜索等功能，以及許多其他需要實時更新數據的場景。AJAX的應用使得用戶能夠更流暢地與網頁進行交互，提高了用戶體驗。