Ajax是一種在web開發中常用的技術，可以實現無刷新地向服務器請求數據并將數據返回到頁面上。通過Ajax，我們可以在不刷新整個頁面的情況下，將服務器的響應數據展示給用戶。本文將詳細介紹Ajax如何將數據返回到頁面上。

在使用Ajax將數據返回到頁面上之前，我們首先需要了解一些基礎知識。Ajax是一種使用JavaScript和XMLHttpRequest對象進行交互的技術。通過創建一個XMLHttpRequest對象，我們可以向服務器發送請求，并通過回調函數處理服務器響應。下面是一個簡單的示例：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，并指定了一個回調函數。當XMLHttpRequest對象的readyState屬性變為4（請求已完成并且響應已就緒）并且status屬性為200（請求成功）時，回調函數將被觸發。在回調函數中，我們將服務器返回的響應數據賦值給頁面上的某個元素（如ID為"result"的div元素）的innerHTML屬性，從而實現將數據返回到頁面上的效果。

舉個例子來說明。假設我們有一個元素和一個元素，當用戶點擊按鈕時，我們希望將用戶在元素中輸入的值發送到服務器，并將服務器返回的數據顯示在頁面上。我們可以使用下面的代碼實現：

// HTML代碼

發送請求

在上面的代碼中，當用戶點擊按鈕時，sendRequest函數將被調用。該函數首先獲取用戶在元素中輸入的值，并通過XMLHttpRequest對象發送一個GET請求到服務器（data.php），同時將用戶輸入的值作為參數傳遞給服務器。在服務器端，我們可以通過獲取這個參數，進行一些處理，并將結果發送回客戶端。當服務器響應返回時，回調函數會被觸發，將服務器返回的數據顯示在頁面上的

// HTML代碼和JavaScript代碼不變
// JavaScript代碼
function sendRequest() {
var inputVal = document.getElementById("input").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", "data.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("input=" + inputVal);
}