Ajax是一種在不刷新整個頁面的情況下，向后端發送和接收數據的技術。通過使用Ajax，前端可以與后端進行直接的交互，使得用戶在不離開當前頁面的情況下獲取或提交數據。本文將介紹如何使用Ajax向后端發送數據成功的方法和步驟，并通過舉例來說明其使用場景和效果。

首先，要使用Ajax向后端發送數據，我們需要創建一個XMLHttpRequest對象，用來實現與后端的通信。例如，下面的代碼演示了如何創建一個XMLHttpRequest對象并發送一個POST請求：

var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 后端返回的數據
var response = JSON.parse(xhr.responseText);
// 處理返回的數據
}
};
var data = {
key1: "value1",
key2: "value2"
};
xhr.send(JSON.stringify(data));

上面的代碼首先創建了一個XMLHttpRequest對象，然后使用open方法指定請求的方式（POST）、URL和是否異步。接著，通過setRequestHeader方法設置請求頭的Content-Type為application/json，表示請求體中的數據是JSON格式的。然后，我們定義一個回調函數onreadystatechange，監聽XMLHttpRequest對象的狀態變化。當readyState為4（請求已完成）且status為200（請求成功）時，表示請求返回成功。我們可以通過xhr.responseText屬性獲取后端返回的數據，并進行下一步的處理。

例如，當我們需要向后端發送一個登錄請求，并在登錄成功后將返回的用戶名顯示在頁面上時，可以使用以下代碼：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var username = response.username;
document.getElementById("username").innerText = username;
}
};
var data = {
username: "john",
password: "123456"
};
xhr.send(JSON.stringify(data));

上面的代碼中，我們向后端發送一個登錄請求，請求的URL為/login。請求體中包含用戶名和密碼。當后端返回成功后，我們將返回的用戶名顯示在id為username的元素中。

除了可以通過POST方式發送數據外，我們也可以使用GET方式向后端發送數據。GET方式將數據添加到URL的查詢參數中，適用于獲取數據的場景。例如，當我們需要獲取一個用戶的詳細信息時，可以使用以下代碼：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/user?id=1", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理返回的用戶信息
}
};
xhr.send();

上面的代碼中，我們向后端發送一個GET請求，請求的URL為/user?id=1，id為1的用戶的詳細信息將返回到response中。我們可以在回調函數中對返回的用戶信息進行處理。

綜上所述，Ajax是一種強大的技術，可以實現前后端的直接交互。通過使用Ajax向后端發送數據，我們可以在不刷新整個頁面的情況下，實時獲取或提交數據，提升用戶體驗。無論是登錄、注冊、獲取數據等場景，Ajax都能發揮出它的優勢。但是在使用Ajax時，我們需要注意后端接口的安全性，避免被惡意利用。