Ajax（Asynchronous JavaScript and XML）是一種使用JavaScript和XML進行異步數據交互的技術。通過使用Ajax，我們可以在不刷新整個頁面的情況下，與服務器進行數據交互。在這篇文章中，我們將介紹如何使用Ajax實現簡單的增刪改查數據操作。

假設我們有一個簡單的任務列表應用程序，用戶可以在頁面上查看、添加、編輯和刪除任務。我們將使用Ajax來實現這些功能。

查詢數據

首先，我們需要能夠從服務器獲取任務列表的數據。我們可以使用Ajax的XMLHttpRequest對象發送HTTP請求來獲取數據。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/tasks', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理任務列表數據
}
};
xhr.send();

上述代碼中，我們發送了一個GET請求到服務器的/api/tasks端點，并在請求成功時處理返回的任務列表數據。我們使用JSON.parse將返回的JSON字符串解析為JavaScript對象，并對其進行進一步的處理。

添加數據

接下來，我們需要給用戶提供添加任務的功能。用戶在頁面上輸入任務的標題后，通過點擊“添加”按鈕來觸發添加任務的操作。

var addTaskBtn = document.getElementById('add-task-btn');
addTaskBtn.addEventListener('click', function() {
var taskTitle = document.getElementById('task-title-input').value;
if (taskTitle !== '') {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/tasks', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 添加任務成功，刷新任務列表
}
};
var task = {
title: taskTitle
};
xhr.send(JSON.stringify(task));
}
});

上述代碼中，我們通過addEventListener為“添加”按鈕添加了一個點擊事件監聽器。當用戶點擊按鈕時，我們獲取輸入框中的任務標題，并以JSON格式構建任務對象。然后，我們發送一個POST請求到服務器的/api/tasks端點，并將任務對象作為請求的主體。如果添加任務成功，我們可以進一步操作，例如刷新任務列表。

編輯和刪除數據

除了添加和查詢外，我們還需要能夠編輯和刪除任務。為了實現這些功能，我們需要為每個任務列表項提供相應的編輯和刪除按鈕，并在用戶點擊這些按鈕時觸發相應的操作。

編輯數據

為了編輯任務，用戶可以點擊任務列表項后面的“編輯”按鈕。點擊按鈕后，我們將根據任務的唯一標識（例如任務ID）發送請求來獲取任務的詳細信息。

var editTaskBtns = document.getElementsByClassName('edit-task-btn');
Array.from(editTaskBtns).forEach(function(btn) {
btn.addEventListener('click', function() {
var taskId = btn.getAttribute('data-task-id');
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/tasks/' + taskId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var task = JSON.parse(xhr.responseText);
// 使用任務詳細信息填充編輯表單
}
};
xhr.send();
});
});

上述代碼中，我們獲取了所有“編輯”按鈕元素，并為每個按鈕添加了一個點擊事件監聽器。當用戶點擊按鈕時，我們從按鈕的data-task-id屬性中獲取任務ID，并使用這個ID向服務器發送一個GET請求，從服務器獲取該任務的詳細信息。在成功獲取到任務信息后，我們可以將其填充到編輯表單中，以便用戶進行編輯。

刪除數據

為了刪除任務，用戶可以點擊任務列表項后面的“刪除”按鈕。點擊按鈕后，我們將根據任務的唯一標識發送請求來刪除任務。

var deleteTaskBtns = document.getElementsByClassName('delete-task-btn');
Array.from(deleteTaskBtns).forEach(function(btn) {
btn.addEventListener('click', function() {
var taskId = btn.getAttribute('data-task-id');
var xhr = new XMLHttpRequest();
xhr.open('DELETE', '/api/tasks/' + taskId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 刪除任務成功，刷新任務列表
}
};
xhr.send();
});
});

上述代碼中，我們獲取了所有“刪除”按鈕元素，并為每個按鈕添加了一個點擊事件監聽器。當用戶點擊按鈕時，我們從按鈕的data-task-id屬性中獲取任務ID，并使用這個ID向服務器發送一個DELETE請求，從服務器刪除該任務。如果刪除成功，我們可以進一步操作，例如刷新任務列表。

總結

Ajax是一種強大的技術，可以實現異步數據交互，使我們能夠構建交互性強的應用程序。通過使用Ajax，我們可以實現簡單的增刪改查數據操作，并提供更好的用戶體驗。