Ajax（Asynchronous JavaScript and XML）是一種用于在web頁面中實現動態更新數據的技術。通過使用Ajax，我們可以在不刷新整個頁面的情況下，向服務器發送請求并獲取響應，然后在頁面上使用獲取到的數據進行更新。這使得用戶可以獲得更加流暢、響應更快的使用體驗。
舉個例子，假設我們正在開發一個在線音樂播放器，我們需要根據用戶的喜好推薦相似的歌曲。傳統的做法是在用戶點擊“推薦”按鈕時，發送一個完整的頁面請求到服務器，服務器根據用戶的喜好去查詢數據庫，并返回一個包含推薦歌曲信息的HTML頁面。然后，瀏覽器將整個頁面顯示給用戶。如果用戶在點擊“推薦”按鈕后還要繼續操作頁面，這種方式將會導致用戶體驗非常不好，因為頁面刷新需要一定的時間。
然而，如果我們使用了Ajax來實現動態更新數據，用戶點擊“推薦”按鈕后，瀏覽器可以使用JavaScript通過Ajax技術向服務器發送一個異步請求，請求推薦歌曲的數據。服務器收到請求后，查詢數據庫，然后將數據以JSON格式返回給瀏覽器。瀏覽器接收到響應后，可以使用JavaScript來解析JSON數據，并將推薦歌曲顯示到頁面上，而不需要刷新整個頁面。這樣，用戶幾乎可以立即看到推薦結果，而且可以繼續在頁面上進行其他操作，獲得更好的用戶體驗。
下面是一個簡單的例子來說明如何使用Ajax動態更新數據。假設我們有一個用戶列表，當用戶輸入關鍵字時，我們希望實時展示與關鍵字匹配的用戶。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function searchUsers() {
var keyword = document.getElementById("keyword").value;
axios.get("https://api.example.com/users?keyword=" + keyword)
.then(function (response) {
var users = response.data;
var userList = document.getElementById("userList");
userList.innerHTML = "";
for (var i = 0; i < users.length; i++) {
var user = users[i];
var listItem = document.createElement("li");
listItem.innerText = user.name;
userList.appendChild(listItem);
}
})
.catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<input type="text" id="keyword" onkeyup="searchUsers()">
<ul id="userList"></ul>
</body>
</html>在上面的例子中，我們使用了Axios庫來發送Ajax請求。當用戶在輸入框中輸入關鍵字并釋放按鍵時，會觸發searchUsers函數。該函數通過Axios發送一個GET請求到https://api.example.com/users，同時將關鍵字作為查詢參數傳遞給服務器。服務器接收到請求后，根據關鍵字查詢用戶列表，并將結果作為JSON格式的響應返回給瀏覽器。瀏覽器在收到響應后，將用戶列表顯示在頁面的一個無序列表（UL）中。
通過上面的例子，我們可以看到Ajax技術的強大之處。它使得我們可以在不刷新整個頁面的情況下，實時更新頁面數據。這不僅提高了用戶體驗，還減少了服務器和網絡的負載。