AJAX是一種在不重新加載頁面的情況下從服務器獲取數(shù)據(jù)并更新頁面的技術(shù)。在Web應用中，我們經(jīng)常需要讀取數(shù)據(jù)庫中的數(shù)據(jù)并在頁面上展示。下面我們將介紹使用AJAX技術(shù)從MySQL數(shù)據(jù)庫中讀取數(shù)據(jù)的方法。

假設我們已經(jīng)有一個MySQL數(shù)據(jù)庫，并且其中有一個名為students的表。students表中包含編號，姓名，年齡和成績等字段。我們需要在頁面上展示所有學生的信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//數(shù)據(jù)讀取成功時執(zhí)行的操作
var response = JSON.parse(this.responseText);   //將JSON格式的數(shù)據(jù)轉(zhuǎn)為JavaScript對象
var table = document.createElement("table");    //創(chuàng)建一個HTML table元素
var tr = table.insertRow(-1);                    //在table中插入一行
var th = document.createElement("th");           //創(chuàng)建表頭
th.innerHTML = "編號";
tr.appendChild(th);
th = document.createElement("th");
th.innerHTML = "姓名";
tr.appendChild(th);
th = document.createElement("th");
th.innerHTML = "年齡";
tr.appendChild(th);
th = document.createElement("th");
th.innerHTML = "成績";
tr.appendChild(th);
for (var i = 0; i < response.length; i++) {
tr = table.insertRow(-1);
var td = tr.insertCell(-1);
td.innerHTML = response[i].id;                //將數(shù)據(jù)插入表格中
td = tr.insertCell(-1);
td.innerHTML = response[i].name;
td = tr.insertCell(-1);
td.innerHTML = response[i].age;
td = tr.insertCell(-1);
td.innerHTML = response[i].score;
}
document.getElementById("content").appendChild(table);  //將表格添加到頁面中
}
};
xhttp.open("GET", "getdata.php", true);   //向getdata.php發(fā)送GET請求
xhttp.send();

首先，我們創(chuàng)建了一個XMLHttpRequest對象，用于向服務器發(fā)送請求和接收響應。然后，在readyState等于4且status等于200時，表示數(shù)據(jù)讀取成功。接著，我們將JSON格式的數(shù)據(jù)轉(zhuǎn)換為JavaScript對象，并動態(tài)創(chuàng)建HTML表格元素。最后，將表格添加到頁面中。

在上述代碼中，需要注意的是，我們使用了getdata.php文件來從MySQL數(shù)據(jù)庫中獲取數(shù)據(jù)。在getdata.php文件中，我們需要編寫PHP代碼從數(shù)據(jù)庫中查詢數(shù)據(jù)，并將結(jié)果以JSON格式返回給前端。

<?php
$servername = "localhost";        //數(shù)據(jù)庫地址
$username = "root";               //數(shù)據(jù)庫用戶名
$password = "";                   //數(shù)據(jù)庫密碼
$dbname = "test";                 //數(shù)據(jù)庫名稱
$conn = mysqli_connect($servername, $username, $password, $dbname);    //連接數(shù)據(jù)庫
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM students";   //查詢所有學生的數(shù)據(jù)
$result = mysqli_query($conn, $sql);
$data = array();                  //定義一個數(shù)組
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;            //將查詢結(jié)果放入數(shù)組中
}
}
echo json_encode($data);          //將數(shù)組轉(zhuǎn)為JSON格式并輸出
mysqli_close($conn);              //關(guān)閉數(shù)據(jù)庫連接
?>

使用AJAX技術(shù)從MySQL數(shù)據(jù)庫中讀取數(shù)據(jù)就是這么簡單。我們只需要在前端編寫JavaScript代碼，從后端的PHP文件中獲取數(shù)據(jù)即可。