AJAX（Asynchronous JavaScript and XML）是一種在網(wǎng)頁(yè)瀏覽器與服務(wù)器之間進(jìn)行異步通信的技術(shù)。它允許我們通過(guò)JavaScript在網(wǎng)頁(yè)上向服務(wù)器發(fā)送請(qǐng)求，并在不刷新整個(gè)頁(yè)面的情況下獲取并顯示服務(wù)器返回的數(shù)據(jù)。在使用AJAX時(shí)，我們常常需要處理服務(wù)器端返回的數(shù)據(jù)，這就需要用到回調(diào)函數(shù)。回調(diào)函數(shù)是一種將函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)，并且在執(zhí)行完畢后將結(jié)果返回給調(diào)用者的機(jī)制。在AJAX中，我們可以使用回調(diào)函數(shù)來(lái)處理從服務(wù)器返回的數(shù)據(jù)，并將這些數(shù)據(jù)進(jìn)行操作或展示。在本文中，我們將討論如何使用回調(diào)函數(shù)訪問(wèn)類變量。

假設(shè)我們正在開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)，其中有一個(gè)按鈕，點(diǎn)擊后會(huì)通過(guò)AJAX向服務(wù)器發(fā)送請(qǐng)求獲取用戶的信息。為了簡(jiǎn)化示例，我們假設(shè)服務(wù)器返回的數(shù)據(jù)是一個(gè)JSON對(duì)象，其中包含了用戶的姓名和年齡信息。現(xiàn)在我們希望在點(diǎn)擊按鈕后，將這些用戶信息顯示在網(wǎng)頁(yè)上的某個(gè)地方。為了實(shí)現(xiàn)這個(gè)功能，我們首先需要定義一個(gè)用于處理服務(wù)器返回?cái)?shù)據(jù)的回調(diào)函數(shù)。

function handleResponse(response) {
var name = response.name;
var age = response.age;
document.getElementById("userInfo").innerHTML = "姓名：" + name + "，年齡：" + age;
}

在上述代碼中，我們定義了一個(gè)名為handleResponse的回調(diào)函數(shù)。這個(gè)函數(shù)的參數(shù)response代表從服務(wù)器返回的數(shù)據(jù)，我們可以通過(guò)response.name和response.age來(lái)獲取用戶的姓名和年齡。然后，我們使用JavaScript的innerHTML屬性將這些信息顯示在id為userInfo的HTML元素中。

接下來(lái)，我們需要在按鈕的點(diǎn)擊事件中調(diào)用AJAX函數(shù)，并將handleResponse函數(shù)作為回調(diào)函數(shù)傳遞進(jìn)去。

document.getElementById("btn").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
handleResponse(JSON.parse(xhr.responseText));
}
};
xhr.open("GET", "getUserInfo.php", true);
xhr.send();
});

在上述代碼中，我們使用JavaScript的addEventListener方法為按鈕的點(diǎn)擊事件注冊(cè)了一個(gè)匿名函數(shù)。在這個(gè)匿名函數(shù)中，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象xhr，并通過(guò)xhr.onreadystatechange屬性來(lái)指定當(dāng)服務(wù)器返回?cái)?shù)據(jù)的時(shí)候應(yīng)該執(zhí)行的函數(shù)。在這個(gè)函數(shù)中，我們首先判斷xhr的readyState是否為4且status是否為200，這表示服務(wù)器已經(jīng)返回了數(shù)據(jù)并且狀態(tài)碼為200（表示請(qǐng)求成功）。接著，我們將通過(guò)JSON.parse方法將服務(wù)器返回的文本解析為一個(gè)JavaScript對(duì)象，并將該對(duì)象作為參數(shù)傳遞給handleResponse函數(shù)。

通過(guò)上述代碼，當(dāng)我們點(diǎn)擊按鈕時(shí)，AJAX請(qǐng)求將發(fā)送至服務(wù)器，并在服務(wù)器返回?cái)?shù)據(jù)后，自動(dòng)調(diào)用handleResponse函數(shù)，將用戶信息顯示在網(wǎng)頁(yè)上。

上述示例中的handleResponse函數(shù)中使用的name和age變量是在函數(shù)內(nèi)部定義的局部變量。如果我們希望可以在其他地方訪問(wèn)這些變量，我們可以將它們定義為類的成員變量。

class UserInfo {
constructor() {
this.name = "";
this.age = "";
}
handleResponse(response) {
this.name = response.name;
this.age = response.age;
document.getElementById("userInfo").innerHTML = "姓名：" + this.name + "，年齡：" + this.age;
}
}
var userInfo = new UserInfo();
document.getElementById("btn").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
userInfo.handleResponse(JSON.parse(xhr.responseText));
}
};
xhr.open("GET", "getUserInfo.php", true);
xhr.send();
});

在上述代碼中，我們創(chuàng)建了一個(gè)名為UserInfo的類，其中定義了name和age作為成員變量，并且在構(gòu)造函數(shù)中對(duì)它們進(jìn)行了初始化。handleResponse函數(shù)被定義在類中，因此可以直接訪問(wèn)和修改這些成員變量。在按鈕的點(diǎn)擊事件中，我們將userInfo.handleResponse函數(shù)作為回調(diào)函數(shù)傳遞給AJAX請(qǐng)求，確保在服務(wù)器返回?cái)?shù)據(jù)后，可以將數(shù)據(jù)存儲(chǔ)到userInfo對(duì)象的成員變量中。

通過(guò)上述的示例，我們可以看到如何使用回調(diào)函數(shù)訪問(wèn)類變量。無(wú)論是直接定義在全局作用域中，還是定義在類的實(shí)例中，回調(diào)函數(shù)都可以訪問(wèn)并操作這些變量，從而實(shí)現(xiàn)對(duì)AJAX請(qǐng)求返回?cái)?shù)據(jù)的處理和展示。