<span id="score"></span>

然后，在JavaScript代碼中，我們可以使用XMLHttpRequest對(duì)象來發(fā)送Ajax請(qǐng)求，并在接收到響應(yīng)后更新頁面上的成績(jī)顯示。假設(shè)我們已經(jīng)有了一個(gè)用于發(fā)送Ajax請(qǐng)求的函數(shù)：

function getScore(studentName) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var scoreMap = JSON.parse(xhr.responseText);
var score = scoreMap.get(studentName);
document.getElementById("score").innerText = score;
}
};
xhr.open("GET", "/api/score", true);
xhr.send();
}

在上面的代碼中，我們首先使用XMLHttpRequest對(duì)象創(chuàng)建了一個(gè)用于發(fā)送Ajax請(qǐng)求的實(shí)例。然后，我們通過設(shè)置xhr.onreadystatechange屬性來定義一個(gè)回調(diào)函數(shù)，該函數(shù)將在xhr對(duì)象的readyState屬性改變時(shí)被調(diào)用。當(dāng)readyState為4（表示請(qǐng)求已經(jīng)完成）并且status為200（表示響應(yīng)成功）時(shí)，我們首先將服務(wù)器返回的字符串類型的Map數(shù)據(jù)轉(zhuǎn)換為JavaScript中的Map對(duì)象，然后從中獲取指定學(xué)生的成績(jī)，并將成績(jī)顯示在頁面上。

通過調(diào)用getScore函數(shù)，并傳入想要獲取成績(jī)的學(xué)生姓名，我們就可以在頁面上實(shí)時(shí)顯示該學(xué)生的成績(jī)：

getScore("張三");

在這個(gè)例子中，我們使用Ajax技術(shù)從服務(wù)器異步地獲取了Map的value值，并實(shí)時(shí)將其顯示在頁面上。通過這種方式，我們可以在不刷新整個(gè)頁面的情況下，動(dòng)態(tài)地更新和顯示數(shù)據(jù)，提升用戶體驗(yàn)。

除了從服務(wù)器獲取Map的value值，我們還可以通過Ajax發(fā)送數(shù)據(jù)給服務(wù)器并更新Map的value值。假設(shè)我們有一個(gè)表單用于提交學(xué)生的成績(jī)數(shù)據(jù)：

<form id="scoreForm">
<input type="text" name="name" placeholder="學(xué)生姓名">
<input type="number" name="score" placeholder="學(xué)生成績(jī)">
<input type="submit" value="提交">
</form>

我們可以通過監(jiān)聽表單的提交事件，使用Ajax將表單數(shù)據(jù)發(fā)送給服務(wù)器：

document.getElementById("scoreForm").addEventListener("submit", function(event) {
event.preventDefault();
var name = event.target.name.value;
var score = event.target.score.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("成績(jī)更新成功");
}
};
xhr.open("POST", "/api/updateScore", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&score=" + score);
});

在上述代碼中，我們首先阻止表單的默認(rèn)提交行為，然后獲取表單中學(xué)生姓名和成績(jī)的值。然后，我們創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并定義一個(gè)回調(diào)函數(shù)，該函數(shù)在請(qǐng)求完成并且響應(yīng)成功時(shí)被調(diào)用。在回調(diào)函數(shù)中，我們向服務(wù)器發(fā)送了一個(gè)POST請(qǐng)求，并將表單數(shù)據(jù)作為請(qǐng)求的主體內(nèi)容發(fā)送。在服務(wù)器端，我們可以解析這些數(shù)據(jù)，并更新Map對(duì)應(yīng)的value值。

通過上面的例子，我們可以看到，使用Ajax技術(shù)可以方便地從服務(wù)器獲取Map的value值，并且也可以將數(shù)據(jù)發(fā)送給服務(wù)器，實(shí)現(xiàn)更新操作。這為我們開發(fā)動(dòng)態(tài)和交互式的Web應(yīng)用提供了豐富的可能性。