AJAX（Asynchronous JavaScript and XML）是一種用于實現異步請求和更新網頁內容的技術。通過使用AJAX，我們可以在不刷新整個頁面的情況下向后端發送請求，并將返回的數據動態地更新到頁面上。這種技術的好處在于，可以提升用戶體驗，提高頁面加載速度，并降低服務器的負載。

為了更好地理解和應用AJAX向后端發起請求的過程，讓我們看一個簡單的示例。假設我們正在編寫一個待辦事項的網頁應用，該應用會使用AJAX向服務器發送請求，以完成待辦事項的添加和刪除。

首先，我們需要在HTML頁面中添加一個文本框和一個按鈕，用于輸入待辦事項的內容，并觸發發送請求的操作。代碼如下：

<input type="text" id="todo" placeholder="請輸入待辦事項" />
<button onclick="addTodo()">添加</button>

接下來，我們需要編寫JavaScript代碼來處理用戶的點擊事件，并發送AJAX請求到后端。代碼如下：

function addTodo() {
// 獲取輸入框的值
var todo = document.getElementById("todo").value;
// 創建XMLHttpRequest對象
var xhttp = new XMLHttpRequest();
// 設置回調函數，當請求的狀態發生變化時會被調用
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 請求成功，更新頁面的顯示內容
document.getElementById("todos").innerHTML += "
" + todo + "
";
}
};
// 發送AJAX請求
xhttp.open("GET", "/addTodo?todo=" + todo, true);
xhttp.send();
}

在上面的代碼中，我們首先獲取了輸入框中的值，然后創建了一個XMLHttpRequest對象。接下來，我們設置了回調函數，這個函數在請求的狀態發生變化時會被調用。當AJAX請求成功時，我們將返回的數據更新到頁面上的待辦事項列表中。

在向后端發送請求時，我們使用了GET方法，并將待辦事項作為參數附加在URL中。服務器會根據接收到的請求，將新的待辦事項保存到數據庫中。然后，服務器會返回一個包含所有待辦事項的列表。我們可以使用這個列表來更新頁面上的顯示內容。

除了添加待辦事項，我們還可以使用類似的方式來刪除待辦事項。假設我們在每個待辦事項旁邊添加了一個刪除按鈕。當用戶點擊刪除按鈕時，我們會調用類似的AJAX請求來告訴服務器刪除該待辦事項。代碼如下：

function deleteTodo(todoId) {
// 創建XMLHttpRequest對象
var xhttp = new XMLHttpRequest();
// 設置回調函數
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 請求成功，更新頁面的顯示內容
document.getElementById("todo-" + todoId).remove();
}
};
// 發送AJAX請求
xhttp.open("GET", "/deleteTodo?todoId=" + todoId, true);
xhttp.send();
}

在上述代碼中，我們通過給每個待辦事項列表項添加一個唯一的ID來標識每個待辦事項。當用戶點擊刪除按鈕時，我們傳遞相應待辦事項的ID作為參數，告訴服務器哪個待辦事項應該被刪除。服務器會在數據庫中刪除該待辦事項，并返回刪除后的待辦事項列表。我們可以使用這個列表來更新頁面上的顯示內容。

綜上所述，AJAX向后端發起請求可以極大地提升用戶體驗，并減少不必要的頁面刷新。通過使用AJAX技術，我們可以實現各種功能，如添加待辦事項、刪除待辦事項等，而不必離開當前頁面。這種方式不僅能夠提高頁面的加載速度，還可以降低服務器的負載，提高系統的整體性能。