頁面等待是一個用戶體驗的重要問題，尤其是在數(shù)據(jù)查詢場景中。對于傳統(tǒng)的數(shù)據(jù)查詢方式，頁面需要刷新或者跳轉至另一個頁面，用戶需要等待較長時間才能獲取到結果。而通過使用Ajax技術，我們可以在不刷新或跳轉頁面的情況下，異步獲取數(shù)據(jù)并展示在頁面上，從而大大減少了用戶等待時間，提升了用戶體驗。
舉個例子來說明，假設我們正在使用一個電子商務網(wǎng)站瀏覽商品，并希望能夠動態(tài)根據(jù)用戶的輸入快速篩選出符合條件的商品。如果使用傳統(tǒng)的查詢方式，每次輸入一次關鍵詞都需要進行一次刷新，然后等待頁面加載完成才能看到搜索結果。這樣不僅占用了用戶大量的等待時間，同時也打斷了用戶的操作流程。然而，利用Ajax技術，我們可以通過異步地向服務器發(fā)送查詢請求，并在后臺處理數(shù)據(jù)，當數(shù)據(jù)返回后只更新頁面上的搜索結果部分，這樣用戶可以實時看到與搜索關鍵詞相關的商品，無需等待頁面重載和加載。
下面我們來看一下如何使用Ajax實現(xiàn)異步查詢數(shù)據(jù)并展示在頁面上。首先，我們需要編寫一個用于接收查詢請求的后臺API。以下是一個示例的PHP代碼：
<?php
// 連接數(shù)據(jù)庫
$con = mysqli_connect("localhost", "root", "", "testdb");
if (!$con) {
die("數(shù)據(jù)庫連接失敗：" . mysqli_connect_error());
}
// 獲取查詢參數(shù)
$keyword = $_GET['keyword'];
// 執(zhí)行查詢
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%'";
$result = mysqli_query($con, $sql);
// 將查詢結果轉換為JSON格式并返回
$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);
// 關閉數(shù)據(jù)庫連接
mysqli_close($con);
?><input type="text" id="keyword" placeholder="請輸入關鍵詞" />
<button onclick="search()">搜索</button>
<div id="result"></div>
<script>
function search() {
var keyword = document.getElementById("keyword").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText);
var html = "";
for (var i = 0; i < result.length; i++) {
html += "<p>" + result[i].name + "</p>";
}
document.getElementById("result").innerHTML = html;
}
};
xhr.open("GET", "api.php?keyword=" + keyword, true);
xhr.send();
}
</script>