AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個網頁的情況下與服務器交換數據的技術。通過使用AJAX，網頁可以實現動態更新，而無需刷新整個頁面。它提供了一種更加流暢、快速的用戶體驗。本文將介紹AJAX完成數據交互的原理，并通過一些具體的示例來說明其工作原理。

在傳統的網頁開發中，當用戶需要與服務器進行數據交互時，通常需要通過表單提交或者超鏈接的方式將用戶請求發送給服務器。這種方式需要整個頁面被重新加載，用戶體驗較差。而采用AJAX技術后，可以通過后臺服務器異步地獲取數據，然后在前臺進行展示，從而提高用戶體驗。

下面是一個簡單的示例，通過AJAX實現實時校驗用戶輸入的用戶名是否合法：

function checkUsername(username) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "checkUsername.php?username=" + username, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
if (response == "valid") {
document.getElementById("usernameResult").innerHTML = "用戶名可用";
} else {
document.getElementById("usernameResult").innerHTML = "用戶名已存在";
}
}
};
xhr.send();
}

在上面的示例中，當用戶輸入用戶名后，JavaScript代碼會創建一個XMLHttpRequest對象，這個對象用于與服務器進行數據交互。通過調用open方法，我們指定了請求的類型（"GET"）、服務器地址（"checkUsername.php"）以及將用戶名作為查詢參數傳遞給服務器。然后，我們通過onreadystatechange事件監聽來自服務器的響應。當readyState等于4（表示請求已完成）并且status等于200（表示請求成功）時，我們可以通過responseText屬性獲取服務器返回的數據。最后，我們根據返回的數據更新頁面上的相關元素，以提示用戶用戶名的合法性。

總的來說，AJAX的工作原理可以概括為以下幾個步驟：

1. 創建XMLHttpRequest對象。
2. 通過open方法指定請求的類型、地址以及其他相關參數。
3. 通過onreadystatechange事件監聽服務器的響應。
4. 根據服務器返回的數據對頁面進行更新。

除了上面的示例，AJAX還可以用于實現無刷新的表單提交、動態加載頁面內容等功能。通過AJAX，我們可以將網頁的交互性和及時更新性提升到一個新的水平。然而，需要注意的是，由于涉及跨域請求，AJAX也會面臨一些安全性和權限控制的問題，需要謹慎使用。