在現代Web開發中，Ajax是一項重要的技術，它允許網頁實現異步通信并實時更新內容，提供更加流暢和用戶友好的體驗。本文將介紹Ajax如何顯示返回結果，并通過舉例說明其實現方式。
在使用Ajax時，最常見的場景是通過異步請求從服務器獲取數據，然后將結果顯示在網頁上。這樣的過程可以在不刷新整個頁面的情況下，實現數據的動態更新。下面是一個簡單的例子，通過Ajax從服務器獲取數據并將其顯示在網頁上。

<p id="result">點擊按鈕來獲取數據</p>
<script>
var resultElement = document.getElementById("result");
function fetchData() {
var request = new XMLHttpRequest();
request.open("GET", "data.json", true);
request.onload = function() {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
resultElement.textContent = data.message;
}
};
request.send();
}
</script>

在上面的例子中，我們首先創建了一個p標簽，id為"result"，用于顯示返回的結果。然后定義了一個fetchData函數，用于發送Ajax請求。在請求成功時，我們將返回的數據解析為JSON格式，然后將其中的message字段的值設置為p標簽的內容，實現了數據的顯示。
除了將數據顯示在網頁上，有時候我們還需要對返回的結果進行一些處理。例如，我們可能想要根據返回的數據動態創建一個表格或者列表。下面是一個示例，通過Ajax獲取數據并將其顯示為一個表格。

<p id="result">點擊按鈕來獲取數據</p>
<script>
var resultElement = document.getElementById("result");
function fetchData() {
var request = new XMLHttpRequest();
request.open("GET", "data.json", true);
request.onload = function() {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
resultElement.innerHTML = "<table>";
for (var i = 0; i < data.length; i++) {
resultElement.innerHTML += "<tr><td>" + data[i].name + "</td><td>" + data[i].age + "</td></tr>";
}
resultElement.innerHTML += "</table>";
}
};
request.send();
}
</script>

在上面的例子中，我們首先將p標簽的內容設置為空，并在請求成功后，通過innerHTML屬性將返回的數據渲染為一個表格。我們使用了一個循環來遍歷數據并將其添加為表格的行。
除了通過innerHTML屬性直接將數據渲染為HTML標簽，我們還可以使用模板引擎或者前端框架來處理更復雜的數據渲染需求。這些工具通常提供了更加靈活和高效的方式來顯示Ajax返回的結果。
綜上所述，Ajax是一項強大的技術，可以實現網頁實時更新內容的效果。通過簡單的示例，我們了解了如何使用Ajax來顯示返回結果，并且展示了對結果進行處理的方式。無論是簡單的數據顯示還是復雜的數據渲染，Ajax都能滿足我們的需求，提供更加流暢和優雅的用戶體驗。