AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下從服務器異步獲取數據并更新頁面的技術。它使用JavaScript和XML（也可以是JSON等其他格式）來實現數據的傳輸和展示。在前端開發中，通過使用AJAX，我們可以在不中斷用戶瀏覽體驗的情況下，動態地加載和顯示數據。本文將介紹如何使用AJAX在前端顯示數據，并通過舉例說明其使用方法和效果。

在使用AJAX展示數據之前，首先需要明確一個概念：后端數據的提供和前端數據的展示是分離的。后端技術（如PHP、Node.js等）負責從數據庫或其他數據源中獲取數據，然后將其以某種格式（如XML、JSON等）返回給前端。而前端技術（如HTML、CSS、JavaScript等）則負責將后端提供的數據進行展示和交互。

在使用AJAX展示數據時，我們首先需要使用JavaScript發起一個HTTP請求到后端，請求數據。請求可以是GET請求，也可以是POST請求，根據具體的需求來決定。以下是發起一個GET請求的示例代碼：

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

在上述代碼中，我們通過XMLHttpRequest對象創建了一個HTTP請求，并指定了請求的類型、URL和是否是異步請求。然后，我們定義了一個回調函數，用于處理請求返回的數據。當readyState屬性為4且status屬性為200時，表示請求已完成且成功，我們將返回的數據賦值給id為"result"的元素內的innerHTML屬性，從而在頁面中顯示數據。

除了使用XMLHttpRequest對象，我們也可以使用jQuery中的AJAX方法來發起請求：

$.ajax({
url: "data.php",
method: "GET",
success: function(data) {
$("#result").html(data);
}
});

如上述示例所示，通過指定url、method和一個成功的回調函數，我們可以在成功獲取到數據后，將其賦值給id為"result"的元素內的HTML屬性，實現數據的顯示。

不僅僅可以通過AJAX從后端獲取數據并顯示，我們還可以通過AJAX將前端的數據發送到后端進行處理。比如，在一個網頁應用中，用戶在前端填寫了一個表單，我們可以使用AJAX將表單數據發送到后端進行保存。以下是一個使用jQuery來發送POST請求的示例：

var data = {
name: "John",
age: 28
};
$.ajax({
url: "save.php",
method: "POST",
data: data,
success: function(response) {
console.log(response);
}
});

在上述示例中，我們定義了一個data對象，包含了表單中的數據。然后，通過指定url、method和data屬性，我們將數據發送到后端進行保存。在成功獲取到后端的響應后，我們可以使用回調函數進行后續處理，比如打印出后端返回的響應。

通過上述示例，我們可以看到，使用AJAX可以方便地在前端展示數據。不僅可以從后端獲取數據并顯示，還可以將前端的數據發送到后端進行處理。AJAX為前端開發提供了更靈活和更快速的數據交互方式，提升了用戶體驗和界面響應速度。