Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建動態(tài)網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。它能夠?qū)崿F(xiàn)對服務(wù)器的異步通信，使得網(wǎng)頁能夠在不刷新的情況下更新部分內(nèi)容。其中一種常見的應(yīng)用場景是在網(wǎng)頁中實(shí)現(xiàn)添加和刪除功能。本文將介紹如何使用Ajax實(shí)現(xiàn)添加和刪除功能，并提供一些實(shí)際的例子。

首先，我們來看一個(gè)添加功能的例子。假設(shè)我們有一個(gè)待辦事項(xiàng)的清單，想要通過Ajax實(shí)現(xiàn)在網(wǎng)頁中添加新的事項(xiàng)。首先，我們需要在網(wǎng)頁中添加一個(gè)文本框和一個(gè)“添加”按鈕。通過點(diǎn)擊“添加”按鈕，從文本框中獲取用戶輸入的事項(xiàng)，并將其發(fā)送到服務(wù)器端進(jìn)行處理。處理完成后，服務(wù)器將返回一個(gè)包含新事項(xiàng)的響應(yīng)，我們可以通過Ajax將其更新到網(wǎng)頁中。

<input type="text" id="newItem" />
<button onclick="addItem()">添加</button>
<script>
function addItem() {
var newItem = document.getElementById("newItem").value;
// 創(chuàng)建XMLHttpRequest對象
var xmlhttp = new XMLHttpRequest();
// 配置請求
xmlhttp.open("POST", "/addItem", true);
// 設(shè)置請求頭
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 處理響應(yīng)
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
// 更新網(wǎng)頁內(nèi)容
document.getElementById("todoList").innerHTML += "<li>" + response + "</li>";
}
};
// 發(fā)送請求
xmlhttp.send("item=" + newItem);
}
</script>

上述代碼中，我們首先通過 document.getElementById() 方法獲取文本框的值。然后，創(chuàng)建一個(gè)新的 XMLHttpRequest 對象，并通過 open() 方法設(shè)置請求的方法、URL 和是否異步。接下來，通過 setRequestHeader() 方法設(shè)置請求頭，告訴服務(wù)器我們將以表單形式發(fā)送數(shù)據(jù)。然后，我們通過 onreadystatechange 事件處理程序來處理響應(yīng)。當(dāng)請求狀態(tài)為 4（表示請求已完成）并且響應(yīng)狀態(tài)碼為 200（表示請求成功）時(shí)，我們將響應(yīng)內(nèi)容添加到待辦事項(xiàng)的清單中。

接下來，我們來看一個(gè)刪除功能的例子。假設(shè)我們依然有一個(gè)待辦事項(xiàng)的清單，想要通過Ajax實(shí)現(xiàn)在網(wǎng)頁中刪除事項(xiàng)。同樣，我們需要在網(wǎng)頁中添加一個(gè)“刪除”按鈕，并通過點(diǎn)擊按鈕來刪除相應(yīng)的事項(xiàng)。與添加功能類似，我們通過Ajax將請求發(fā)送到服務(wù)器端進(jìn)行處理，處理完成后，服務(wù)器會返回一個(gè)相應(yīng)的響應(yīng)，我們再通過Ajax將其更新到網(wǎng)頁中。

<ul id="todoList">
<li>吃飯<button onclick="deleteItem(0)">刪除</button></li>
<li>睡覺<button onclick="deleteItem(1)">刪除</button></li>
<li>打豆豆<button onclick="deleteItem(2)">刪除</button></li>
</ul>
<script>
function deleteItem(index) {
// 創(chuàng)建XMLHttpRequest對象
var xmlhttp = new XMLHttpRequest();
// 配置請求
xmlhttp.open("POST", "/deleteItem", true);
// 設(shè)置請求頭
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 處理響應(yīng)
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
// 更新網(wǎng)頁內(nèi)容
document.getElementById("todoList").removeChild(document.getElementById("todoList").childNodes[index]);
}
};
// 發(fā)送請求
xmlhttp.send("index=" + index);
}
</script>

上述代碼中，我們在每個(gè)事項(xiàng)后面添加了一個(gè)“刪除”按鈕，并通過 onclick 事件調(diào)用 deleteItem() 函數(shù)來刪除相應(yīng)的事項(xiàng)。在 deleteItem() 函數(shù)中，我們同樣創(chuàng)建了一個(gè)新的 XMLHttpRequest 對象，并通過 open() 和 setRequestHeader() 方法配置請求。與添加功能不同的是，我們在發(fā)送請求時(shí)將待刪除事項(xiàng)的索引作為參數(shù)發(fā)送。當(dāng)請求狀態(tài)為 4 并且響應(yīng)狀態(tài)碼為 200 時(shí)，我們通過 removeChild() 方法從網(wǎng)頁中刪除相應(yīng)的事項(xiàng)。

通過上述兩個(gè)例子，我們可以看到Ajax在實(shí)現(xiàn)添加和刪除功能中的應(yīng)用。使用Ajax，我們可以實(shí)現(xiàn)網(wǎng)頁內(nèi)容的局部更新，提升用戶體驗(yàn)和網(wǎng)頁性能。無需刷新整個(gè)頁面，用戶可以實(shí)時(shí)處理數(shù)據(jù)，并通過服務(wù)器的響應(yīng)反饋結(jié)果。當(dāng)然，還有許多其他應(yīng)用場景也可以使用Ajax來實(shí)現(xiàn)異步通信，提升網(wǎng)頁的交互性。