AJAX是一種用于與服務(wù)器進(jìn)行異步通信的技術(shù)，它能夠?qū)崿F(xiàn)網(wǎng)頁內(nèi)容的局部刷新，提高用戶體驗。在AJAX中，async屬性在發(fā)送請求時起著重要的作用。async屬性控制是否進(jìn)行異步通信，通過設(shè)置async屬性為"true"或"false"，可以控制請求的同步或異步方式。

異步通信是指在發(fā)送請求后，即使服務(wù)器未返回響應(yīng)，網(wǎng)頁仍然可以繼續(xù)執(zhí)行其他的操作。這種方式可以避免網(wǎng)頁的阻塞，提高用戶體驗。

舉個例子來說明async屬性的作用：

<script>
function displayData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "data.php", true); //異步請求
xhr.send();
console.log("Hello, World!");
}
</script>

在這個例子中，我們發(fā)送一個異步請求到"data.php"文件，然后輸出響應(yīng)結(jié)果。在發(fā)送請求后，我們立即輸出了"Hello, World!"這個信息。如果async屬性被設(shè)置成了"false"，那么請求將變?yōu)橥秸埱螅@時我們將會在獲取到響應(yīng)之前一直等待，直到顯示響應(yīng)結(jié)果之后才能輸出"Hello, World!"這個信息。

另一個例子是一個待辦事項列表應(yīng)用：

<script>
function addTodo() {
var todo = document.getElementById("todo").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log(xhr.responseText);
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "addTodo.php", true); //異步請求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("todo=" + todo);
}
</script>
<input type="text" id="todo" placeholder="輸入待辦事項"><button onclick="addTodo()">添加<div id="result"></div>

在這個例子中，我們使用異步請求將用戶輸入的待辦事項添加到服務(wù)器。當(dāng)服務(wù)器成功添加待辦事項之后，我們將通過異步響應(yīng)將新的待辦事項列表顯示在頁面上。如果async屬性被設(shè)置成了"false"，那么在等待服務(wù)器響應(yīng)的過程中，用戶將無法繼續(xù)進(jìn)行其他的操作。

通過上述的例子可以看出，async屬性在AJAX中起到了非常重要的作用。它可以控制請求的同步或異步方式，從而實現(xiàn)網(wǎng)頁內(nèi)容的局部刷新和提高用戶體驗。