Ajax是一種用于在Web頁面上進行異步數(shù)據(jù)請求的技術(shù)，它通過使用JavaScript和XMLHttpRequest對象，實現(xiàn)了向服務(wù)器發(fā)送請求并在后臺獲取數(shù)據(jù)的功能。不同于傳統(tǒng)的同步請求，Ajax的優(yōu)勢在于能夠在不刷新整個頁面的情況下刷新部分內(nèi)容，提高了用戶體驗。下面將通過幾個實例來介紹Ajax中數(shù)據(jù)請求的使用方式。
第一個實例是通過Ajax從服務(wù)器獲取用戶信息。假設(shè)一個Web頁面中有一個表單，用戶需要輸入自己的用戶名并點擊提交按鈕。當用戶點擊提交按鈕后，頁面首先通過Ajax將輸入的用戶名發(fā)送到服務(wù)器，服務(wù)器驗證用戶名的合法性并返回用戶的基本信息，然后頁面通過JavaScript動態(tài)地修改頁面內(nèi)容來展示這些信息。以下是一個簡單的代碼示例：
```
function getUserInfo() {
var userName = document.getElementById("username").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var userInfo = JSON.parse(this.responseText);
document.getElementById("result").innerHTML = "用戶名：" + userInfo.username + "，年齡：" + userInfo.age;
}
};
xhttp.open("GET", "getUserInfo.php?username=" + userName, true);
xhttp.send();
}
```在上面的代碼中，我們首先通過JavaScript獲取到用戶輸入的用戶名，并創(chuàng)建一個XMLHttpRequest對象（即通過Ajax發(fā)送請求的工具對象）。然后我們設(shè)置了一個回調(diào)函數(shù)，當請求的狀態(tài)變?yōu)?（即請求已完成）并且狀態(tài)碼為200（即請求成功）時，執(zhí)行回調(diào)函數(shù)中的代碼。在回調(diào)函數(shù)中，我們首先通過JSON.parse將服務(wù)器返回的字符串數(shù)據(jù)轉(zhuǎn)換為JSON對象，然后使用JavaScript動態(tài)地修改頁面上某個DOM元素的內(nèi)容來展示用戶的基本信息。最后，我們使用open方法設(shè)置請求的方法和URL，并通過send方法發(fā)送請求。
第二個實例是通過Ajax向服務(wù)器發(fā)送POST請求。假設(shè)一個Web頁面中有一個留言板，用戶可以在頁面上輸入自己的留言并點擊提交按鈕，將留言發(fā)送到服務(wù)器保存。以下是一個簡單的代碼示例：
```
function submitMessage() {
var message = document.getElementById("message").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = "留言提交成功！";
}
};
xhttp.open("POST", "saveMessage.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("message=" + message);
}
```在上面的代碼中，我們同樣首先創(chuàng)建一個XMLHttpRequest對象，并設(shè)置了一個回調(diào)函數(shù)。當請求的狀態(tài)變?yōu)?且狀態(tài)碼為200時，表示請求已成功完成，我們可以在回調(diào)函數(shù)中執(zhí)行相應(yīng)的操作。在本例中，當服務(wù)器返回成功的響應(yīng)時，我們通過動態(tài)修改頁面內(nèi)容來提示用戶留言提交成功。
最后一個實例是通過Ajax獲取服務(wù)器上的數(shù)據(jù)并使用JavaScript操作該數(shù)據(jù)。假設(shè)一個Web頁面需要動態(tài)地展示影片的列表，該列表中包含了影片的名稱、類型和評分等信息。頁面加載時，通過Ajax從服務(wù)器獲取該列表的數(shù)據(jù)并將其保存在一個數(shù)組中。然后通過JavaScript動態(tài)地創(chuàng)建DOM元素來展示這些數(shù)據(jù)。以下是一個簡單的代碼示例：
```
function getMovieList() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var movieList = JSON.parse(this.responseText);
for (var i = 0; i< movieList.length; i++) {
var div = document.createElement("div");
div.innerHTML = "影片名稱：" + movieList[i].name + "，類型：" + movieList[i].type + "，評分：" + movieList[i].rating;
document.getElementById("movieList").appendChild(div);
}
}
};
xhttp.open("GET", "getMovieList.php", true);
xhttp.send();
}
```在上面的代碼中，我們同樣創(chuàng)建了一個XMLHttpRequest對象，并設(shè)置了一個回調(diào)函數(shù)。當請求成功完成后，我們通過JSON.parse將服務(wù)器返回的字符串轉(zhuǎn)換為JSON對象，然后使用for循環(huán)遍歷movieList數(shù)組（即服務(wù)器返回的影片列表），在每次循環(huán)中創(chuàng)建一個新的div元素，并動態(tài)地設(shè)置其內(nèi)部HTML內(nèi)容來展示每部影片的信息。最后，我們將這個div元素添加到頁面中的某個DOM元素中，完成影片列表的展示。
通過以上實例，我們可以看到Ajax在實現(xiàn)Web頁面中數(shù)據(jù)請求的功能上具有很大的靈活性和便捷性。無論是從服務(wù)器獲取數(shù)據(jù)、向服務(wù)器發(fā)送數(shù)據(jù)，還是將服務(wù)器返回的數(shù)據(jù)動態(tài)地展示在頁面上，Ajax都可以勝任。在現(xiàn)代Web開發(fā)中，Ajax已經(jīng)成為不可或缺的核心技術(shù)之一。