AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下向服務器發送請求并獲取響應數據的技術。在Web開發中，我們常常需要把前端頁面的數據通過AJAX發送給后臺，并在后臺進行相應的處理。本文將介紹如何利用AJAX傳值到后臺，并展示后臺如何接收和處理這些數據。

假設我們有一個網頁，其中包含一個表單，用戶可以在該表單中輸入一些數據。當用戶點擊“提交”按鈕后，我們希望將這些數據傳遞給后臺進行處理，而不需要整個頁面刷新。

// HTML代碼
<form id="myForm">
<input type="text" name="name" id="nameInput">
<input type="text" name="age" id="ageInput">
<button onclick="submitForm()">提交</button>
</form>

// JavaScript代碼
function submitForm() {
var name = document.getElementById("nameInput").value;
var age = document.getElementById("ageInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "backend.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send("name=" + name + "&age=" + age);
}

在上面的例子中，我們使用了原生的JavaScript代碼來處理AJAX請求。當用戶點擊“提交”按鈕時，submitForm函數被調用。該函數首先獲取用戶在表單中輸入的name和age的值。然后，我們創建了一個XMLHttpRequest對象，并使用open方法指定了HTTP請求方法（POST）和后臺處理的URL（backend.php）。

接下來，我們使用setRequestHeader方法將請求的Content-Type設置為application/x-www-form-urlencoded，表示請求參數的格式為URL編碼。然后，我們定義了一個回調函數，通過onreadystatechange屬性監聽了XMLHttpRequest對象的狀態變化。當狀態變為4（請求已完成）并且狀態碼為200（請求成功），我們使用responseText屬性獲取從后臺接收到的響應數據，并在控制臺打印出來。

最后，我們使用send方法發送請求，并將name和age作為參數傳遞給后臺。參數以name=value的形式拼接，并用&符號連接。例如，如果name是"John"，age是"25"，則發送的請求數據為"name=John&age=25"。

在后臺，我們可以使用不同的編程語言來接收和處理這些數據。下面是一個使用PHP的例子：

// backend.php
$name = $_POST['name'];
$age = $_POST['age'];
// 進行相應的處理...

在后臺的PHP代碼中，我們使用$_POST數組來接收從前端傳遞過來的數據。在上面的例子中，我們通過$_POST['name']和$_POST['age']獲取了分別對應的值。然后，我們可以根據需求對這些數據進行相應的處理，例如存儲到數據庫，調用其他API等。

總結而言，通過AJAX傳值到后臺的過程可以簡單概括為以下幾個步驟：獲取前端輸入的數據，創建XMLHttpRequest對象，設置請求的方法、URL和請求頭，定義回調函數來處理后臺的響應，發送請求并傳遞參數，后臺接收參數，并進行相應的處理。使用AJAX可以實現前后端數據的無刷新傳遞，提高用戶體驗和頁面性能。