隨著互聯網的發展，越來越多的網站需要實現異步加載數據。其中，Ajax（Asynchronous JavaScript and XML）技術被廣泛應用于網頁開發中，提供了一種無需刷新整個網頁的機制來更新部分頁面內容。本文將重點介紹使用Ajax實現列表添加與刪除的異步操作。

在一個任務管理網站中，我們需要實現一個任務列表，用戶可以通過網頁添加新的任務，并且可以刪除已完成的任務。傳統的做法是每次用戶進行添加或刪除操作時，都需要整個頁面重新加載。這樣無疑會增加帶寬使用、降低用戶體驗。而使用Ajax技術，我們可以在用戶進行添加或刪除操作時，只更新列表中的部分內容，從而提升用戶的操作體驗。

首先，我們需要使用HTML創建一個任務列表。為了方便演示，這里我們只使用簡單的文本方式顯示任務名，并添加相應的按鈕來進行添加和刪除操作。

<div id="task-list">
<ul id="list">
<li>任務1</li>
<li>任務2</li>
<li>任務3</li>
</ul>
<button id="add-task">添加任務</button>
<button id="delete-completed">刪除已完成任務</button>
</div>

接下來，我們使用JavaScript編寫相應的代碼來實現異步添加和刪除任務的功能。首先，我們使用jQuery庫來簡化Ajax請求的處理。在添加任務時，我們需要獲取用戶輸入的任務名，然后發送一個POST請求來將任務添加到任務列表中，并返回更新后的任務列表。在刪除任務時，我們通過點擊按鈕來發送一個DELETE請求，并將被刪除的任務從列表中移除。

$(document).ready(function() {
// 添加任務
$('#add-task').click(function() {
var taskName = prompt('請輸入任務名');
if (taskName) {
$.ajax({
url: '/api/tasks',
method: 'POST',
data: { name: taskName },
success: function(response) {
$('#list').html(response); // 更新任務列表
}
});
}
});
// 刪除已完成任務
$('#delete-completed').click(function() {
$.ajax({
url: '/api/tasks',
method: 'DELETE',
success: function(response) {
$('#list').html(response); // 更新任務列表
}
});
});
});

在上述代碼中，我們使用jQuery的`$.ajax`函數來發送異步請求。在成功接收到響應后，我們使用jQuery的`html()`方法來更新任務列表的內容，即替換整個列表的HTML代碼。

通過使用Ajax技術，我們實現了在用戶添加或刪除任務時，只更新列表中部分內容的功能。這樣一來，用戶無需等待整個頁面加載，可以即時看到添加或刪除任務的效果。例如，當用戶點擊添加任務按鈕后，會彈出一個輸入框讓用戶輸入任務名，輸入完成后，任務列表會立即顯示新添加的任務，無需整個頁面刷新。同理，當用戶點擊刪除已完成任務按鈕時，列表中已完成的任務會立即消失，不會影響其他任務。

總體而言，通過使用Ajax來實現列表的異步添加與刪除，可以提高用戶的操作體驗，減少不必要的頁面刷新，從而提升網站的響應速度。在實際的網站開發中，我們可以根據具體的需求和場景，進一步優化這個功能，例如添加加載動畫、實時更新未完成任務數等。