AJAX可以用來與數據庫進行互動交流。
AJAX數據庫實例
下面的例子將演示如何一個網頁可以從AJAX從數據庫中獲取信息：
例
Person info will be listed here...
例子解釋 - MySQL數據庫
在我們的例子中使用上面的數據庫表如下所示：
| ID | 名字 | 姓 | 年齡 | 家鄉 | 工作 |
|---|---|---|---|---|---|
| 1 | 彼得 | 格里芬 | 41 | Quahog | 釀酒廠 |
| 2 | 洛伊絲 | 格里芬 | 40 | 紐波特 | 鋼琴教師 |
| 3 | 約瑟夫 | 斯旺森 | 39 | Quahog | 警官 |
| 4 | 格倫 | 沼澤 | 41 | Quahog | 飛行員 |
例子解釋：
在上面的例子中，當用戶在下拉列表中選擇一個人以上，調用函數" showUser() "被執行。
該功能是由onchange事件觸發。
下面是HTML代碼：
例
<html>
<head>
<script>
function showUser(str) {
if (str == "")
{
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox,
Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
//
code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option
value="">Select a person:</option>
<option value="1">Peter
Griffin</option>
<option value="2">Lois Griffin</option>
<option
value="3">Joseph Swanson</option>
<option value="4">Glenn
Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person
info will be listed here...</b></div>
</body>
</html> 運行示例» 代碼解釋：
首先，檢查沒有被選擇的人(str == "") 如果沒有選擇的人，清除txtHint佔位符的內容和退出功能。
如果選擇了一個人，請執行以下操作：
- 創建XMLHttpRequest對象
- 創建功能被執行時，服務器響應就緒
- 發送請求關閉到文件服務器上
- 請注意，一個參數(q)被添加到URL（用下拉列表的內容）
PHP文件
通過JavaScript調用上面的服務器上的頁面調用的PHP文件"getuser.php"
在源代碼"getuser.php"執行針對MySQL數據庫的查詢，並返回結果的HTML表：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>說明：當查詢與JavaScript發送到PHP文件時，會發生以下情況：
- PHP打開一個MySQL服務器的連接
- 正確的人被發現
- 一個HTML表格創建，充滿了數據，並發送回"txtHint"佔位符