Ajax（Asynchronous JavaScript and XML）是一種使用JavaScript和XML（或JSON）來實現異步客戶端和服務器之間交互的技術。在Web開發中，我們常常需要實現刪除和修改數據的功能，而Ajax正是一個強大的工具，可以幫助我們實現這些操作。本文將探討如何使用Ajax來實現數據的刪除和修改操作，并通過舉例說明其用法。

刪除操作

首先，我們來看一個刪除操作的例子。假設我們有一個todo列表，每個todo有一個刪除按鈕。當用戶點擊刪除按鈕時，我們需要從服務器中刪除相應的todo數據。

// HTML代碼
<ul id="todo-list">
<li class="todo-item">
<span class="todo-title">Todo 1</span>
<button class="delete-btn">刪除</button>
</li>
<li class="todo-item">
<span class="todo-title">Todo 2</span>
<button class="delete-btn">刪除</button>
</li>
</ul>
// JavaScript代碼
const deleteButtons = document.querySelectorAll('.delete-btn');
deleteButtons.forEach(btn =>{
btn.addEventListener('click', (event) =>{
const listItem = event.target.parentElement;
const todoTitle = listItem.querySelector('.todo-title').innerText;
// 使用Ajax發送請求刪除todo
const xhr = new XMLHttpRequest();
xhr.open('DELETE', `/api/todos/${todoTitle}`);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 刪除成功，從列表中移除對應的todo項
listItem.remove();
}
};
xhr.send();
});
});

在上面的代碼中，我們首先獲取了所有的刪除按鈕，并給每個按鈕添加了點擊事件監聽器。當用戶點擊刪除按鈕時，我們通過DOM操作獲取到要刪除的todo項的標題，然后使用Ajax發送DELETE請求到服務器的相應API。當服務器返回成功的響應（狀態碼為200）時，我們將其對應的todo項從列表中移除。

修改操作

接下來，我們來看一個修改操作的例子。假設我們有一個用戶列表，可以點擊用戶名來進行修改操作。

// HTML代碼
<ul id="user-list">
<li class="user-item">
<span class="user-name">User 1</span>
</li>
<li class="user-item">
<span class="user-name">User 2</span>
</li>
</ul>
// JavaScript代碼
const userItems = document.querySelectorAll('.user-item');
userItems.forEach(item =>{
item.addEventListener('click', (event) =>{
const userName = event.currentTarget.querySelector('.user-name').innerText;
const newName = prompt('請輸入新的用戶名', userName);
if (newName) {
// 使用Ajax發送請求修改用戶名
const xhr = new XMLHttpRequest();
xhr.open('PUT', `/api/users/${userName}`);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 修改成功，更新列表中對應的用戶名
const newUserItem = document.createElement('li');
newUserItem.classList.add('user-item');
newUserItem.innerHTML = '<span class="user-name">' + newName + '</span>';
item.replaceWith(newUserItem);
}
};
xhr.send(JSON.stringify({ newName }));
}
});
});

在上面的代碼中，我們給每個用戶項添加了點擊事件監聽器。當用戶點擊用戶名時，彈出提示框要求輸入新的用戶名。用戶輸入后，我們使用Ajax發送PUT請求到服務器的相應API，并附上新的用戶名作為參數。當服務器返回成功的響應時，我們用新的用戶名替換當前用戶項。

通過上述例子，我們可以看到，使用Ajax可以輕松實現刪除和修改數據的功能，提升了用戶體驗和頁面的交互性。希望本文對你理解和使用Ajax來進行刪除和修改操作有所幫助。