AJAX（Asynchronous JavaScript and XML）是一種基于WEB瀏覽器的前端技術，它可以通過異步通信的方式從服務器獲取數據，并將數據動態地更新到頁面上，而無需刷新整個頁面。在使用AJAX時，我們可以使用JavaScript代碼從服務器獲取數據，并通過DOM操作將數據直接插入到頁面中的特定元素中，實現無刷新的數據展示效果。
以一個簡單的示例來說明AJAX如何從服務器獲取數據并更新到頁面上。假設我們有一個網頁上顯示一個按鈕和一個段落，當用戶點擊按鈕時，我們希望從服務器獲取一條隨機數據并更新到段落中。首先，我們需要通過JavaScript代碼來監聽按鈕的點擊事件，當按鈕被點擊時，我們向服務器發送一個AJAX請求，并指定服務器響應時的回調函數。在回調函數中，我們可以獲取服務器返回的數據，并將數據動態地插入到段落中，這樣就實現了無刷新的數據展示效果。
<!DOCTYPE html>
<html>
<head>
<title>AJAX示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.ajax({
url: "https://api.example.com/data", // 服務器接口地址
method: "GET",
dataType: "json",
success: function(response) {
var data = response.data; // 從服務器響應中獲取數據
$("#result").text(data); // 將數據插入到段落中
},
error: function() {
console.log("請求失敗");
}
});
});
});
</script>
</head>
<body>
<button>獲取數據</button>
<p id="result"></p>
</body>
</html>在上面的代碼中，我們使用了jQuery庫來簡化AJAX操作。在按鈕的點擊事件處理函數中，我們通過$.ajax方法發送一個GET請求到"https://api.example.com/data"地址，并指定數據的返回類型為JSON。
當服務器響應成功時，success回調函數會被執行。在這個函數中，我們可以從服務器響應中獲取數據，并使用jQuery的$("#result")選擇器找到id為"result"的元素，然后使用.text方法將數據插入到該元素中。因此，當按鈕被點擊時，服務器返回的數據將即時更新到頁面的段落中。
除了使用jQuery，我們還可以使用原生的JavaScript實現AJAX。下面是一個使用原生JavaScript實現的示例：
<!DOCTYPE html>
<html>
<head>
<title>AJAX示例</title>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var data = response.data;
document.getElementById("result").innerHTML = data;
}
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="getData()">獲取數據</button>
<p id="result"></p>
</body>
</html>在這個示例中，我們使用了XMLHttpRequest對象來發送GET請求，并在其onreadystatechange事件中處理服務器響應。當readyState屬性為4并且status屬性為200時，表示服務器響應成功。此時，我們可以獲取返回的文本數據，并更新到頁面的段落中。
總之，AJAX使得我們可以通過異步通信的方式從服務器獲取數據，并將數據動態地更新到頁面上，無需刷新整個頁面。無論是使用jQuery還是原生JavaScript，我們都可以很方便地實現這一功能，提升用戶體驗。