隨著Web應用的發展和用戶對交互性的需求不斷增加，Ajax（Asynchronous JavaScript and XML）技術應運而生。它通過在不刷新整個頁面的情況下，異步加載另一個頁面的內容，實現了與服務器的通信和數據更新。通過Ajax技術，我們可以讓網頁變得更加流暢、動態和用戶友好。

一個簡單的例子是，在一個電商網站上，當我們在商品列表頁面瀏覽時，點擊某個商品的鏈接，可以通過Ajax技術直接加載該商品的詳細信息，而無需刷新整個頁面。這樣，我們可以在不離開當前頁面的情況下，獲取更多信息，并根據需要進行下一步操作。

// JavaScript代碼
function loadProductDetail(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("productDetail").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "/product/detail?productId=" + productId, true);
xhr.send();
}

在上面的代碼中，我們定義了一個JavaScript函數loadProductDetail，它接受一個參數productId，表示要加載詳細信息的商品ID。通過創建一個XMLHttpRequest對象xhr，然后使用open方法指定請求的路徑和參數，最后使用send方法發送請求。當請求完成時，onreadystatechange函數會被調用，并且檢查請求的狀態和響應的狀態碼。如果一切正常，我們將獲取到的商品詳細信息插入到頁面的productDetail元素中，實現了異步加載頁面內容的效果。

Ajax技術的應用不僅限于商品詳情的加載，還可以用于表單提交時的數據驗證。比如，在一個用戶注冊頁面中，當用戶輸入用戶名時，可以通過Ajax技術實時檢查該用戶名是否已被其他用戶占用。這樣，用戶可以在輸入用戶名的同時獲得即時的反饋，避免了等待頁面刷新的時間。

// JavaScript代碼
function checkUsername(username) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("usernameStatus").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "/user/checkUsername?username=" + encodeURIComponent(username), true);
xhr.send();
}

在上面的代碼中，我們定義了一個函數checkUsername，它接受一個參數username，表示要檢查的用戶名。通過創建一個XMLHttpRequest對象xhr，然后使用open方法指定請求的路徑和參數，最后使用send方法發送請求。當請求完成時，onreadystatechange函數會被調用，并且檢查請求的狀態和響應的狀態碼。如果一切正常，我們將獲取到的檢查結果插入到頁面的usernameStatus元素中，實現了實時驗證用戶名的效果。

總之，Ajax技術的發展為網頁的交互性提供了更多可能性。通過異步加載另一個頁面的內容，我們可以為用戶提供更流暢、動態和用戶友好的使用體驗。無論是商品詳情加載還是數據驗證，Ajax技術都發揮了重要作用，使得Web應用更加強大和便捷。