AJAX 可用於與資料庫進行互動式通訊。
AJAX 資料庫實例
下面的實例將示範網頁如何透過AJAX 從資料庫讀取資訊：
本教學使用到的Websites 表SQL 檔案：websites.sql。
實例解釋- MySQL 資料庫
在上面的實例中，我們使用的資料庫表如下所示：
mysql> select * from websites;+----+--------------+---------------------- -----+-------+---------+| id | name | url | alexa | country |+----+--------- -----+---------------------------+-------+-------- -+| 1 | Google | https://www.google.cm/ | 1 | USA || 2 | 淘寶| https://www.taobao.com/ | 13 | CN || 3 | 碼農教程| http://www.codercto.com/ | 4689 | CN || 4 | 微博| http://weibo.com/ | 20 | CN || 5 | Facebook | https://www .facebook.com/ | 3 | USA |+----+--------------+------------------- --------+-------+---------+5 rows in set (0.01 sec)
實例解釋- HTML 頁面
當使用者在上面的下拉清單中選擇某位使用者時，會執行名為"showSite()" 的函數。此函數由"onchange" 事件觸發：
test.html 檔案程式碼:
< ! DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title >碼農教學(codercto.com) </ title > < script > function showSite ( str ) { if ( str == " " ) { document . getElementById ( " txtHint " ) . innerHTML = " " ; return ; } if ( window . XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp = new XMLHttpRequest ( ) ; } else { // 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 " , " getsite_mysql.php?q= " + str , true ) ; xmlhttp . send ( ) ; } </ script > </ head > <身體> < form > < select name = " users " onchange = " showSite(this.value) " > < option value = " " >選擇一個網站: </ option > < option value = " 1 " > Google </ option > < option value = " 2 " >淘寶</ option > < option value = " 3 " >碼農教學</ option > < option value = " 4 " >微博</ option > < option value = " 5 " > Facebook </ option > </ select > </ form > < br > < div id = " txtHint " > < b >網站資訊顯示在這裡… </ b > </ div > </身體> </ html > showSite() 函數會執行下列步驟：
檢查是否有網站被選擇
建立XMLHttpRequest 對象
建立在伺服器回應就緒時執行的函數
向伺服器上的文件發送請求
請注意新增到URL 末端的參數（q）（包含下拉清單的內容）
PHP 文件
上面這段透過JavaScript 呼叫的伺服器頁面是名為"getsite_mysql.php" 的PHP 檔案。
"getsite_mysql.php" 中的原始程式碼會執行一次針對MySQL 資料庫的查詢，然後在HTML 表格中傳回結果：
getsite_mysql.php 檔案程式碼:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $_GET [ " q " ] ) : ' ' ; if ( empty ( $q ) ) { echo '請選擇一個網站' ; exit ; } $con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; if ( ! $con ) { die ( ' Could not connect: ' . mysqli_error ( $con ) ) ; } //選擇資料庫mysqli_select_db ( $con , " test " ) ; //設定編碼，防止中文亂碼mysqli_set_charset ( $con , " utf8 " ) ; $sql = " SELECT * FROM Websites WHERE id = ' " . $q . " ' " ; $result = mysqli_query ( $con , $sql ) ; echo " <table border='1'><tr><th>ID</th><th>網站名稱</th><th>網址網址</th><th>Alexa 排名</th><th>國家</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { echo " <tr> " ; echo " <td> " . $row [ ' id ' ] . " </td> " ; echo " <td> " . $row [ ' name ' ] . " </td> " ; echo " <td> " . $row [ ' url ' ] . " </td> " ; echo " <td> " . $row [ ' alexa ' ] . " </td> " ; echo " <td> " . $row [ ' country ' ] . " </td> " ; echo " </tr> " ; } echo " </table> " ; mysqli_close ( $con ) ; ?>解釋：當查詢從JavaScript 發送到PHP 檔案時，將會發生：
PHP 開啟一個到MySQL 資料庫的連接
找到選取的用戶
建立HTML 表格，填入數據，並傳回"txtHint" 佔位符
