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

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

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//數(shù)據(jù)讀取成功時(shí)執(zhí)行的操作
var response = JSON.parse(this.responseText);   //將JSON格式的數(shù)據(jù)轉(zhuǎn)為JavaScript對(duì)象
var table = document.createElement("table");    //創(chuàng)建一個(gè)HTML table元素
var tr = table.insertRow(-1);                    //在table中插入一行
var th = document.createElement("th");           //創(chuàng)建表頭
th.innerHTML = "編號(hào)";
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 = "成績(jī)";
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);  //將表格添加到頁(yè)面中
}
};
xhttp.open("GET", "getdata.php", true);   //向getdata.php發(fā)送GET請(qǐng)求
xhttp.send();

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

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

<?php
$servername = "localhost";        //數(shù)據(jù)庫(kù)地址
$username = "root";               //數(shù)據(jù)庫(kù)用戶名
$password = "";                   //數(shù)據(jù)庫(kù)密碼
$dbname = "test";                 //數(shù)據(jù)庫(kù)名稱
$conn = mysqli_connect($servername, $username, $password, $dbname);    //連接數(shù)據(jù)庫(kù)
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM students";   //查詢所有學(xué)生的數(shù)據(jù)
$result = mysqli_query($conn, $sql);
$data = array();                  //定義一個(gè)數(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ù)庫(kù)連接
?>

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