AJAX 可用於與資料庫進行動態通訊。
下面的範例將示範網頁如何透過AJAX 從資料庫讀取資訊:請在下面的下拉清單中選擇一個客戶:
當使用者在上面的下拉清單中選擇某個客戶時,會執行名為"showCustomer()" 的函數。此函數由"onchange" 事件觸發:
function showCustomer ( str ) { var xmlhttp ; 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 " , " /try/ajax/getcustomer.php?q= " + str , true ) ; xmlhttp . send ( ) ; }showCustomer() 函數執行下列任務:
檢查是否已選擇某個客戶
建立XMLHttpRequest 對象
當伺服器回應就緒時執行所建立的函數
把請求發送到伺服器上的文件
請注意我們在URL 中加入了一個參數q (帶有輸入域中的內容)
由上面的JavaScript 呼叫的伺服器頁面是PHP 文件,名稱為"getcustomer.php"。
用PHP 寫伺服器檔案也很容易,或用其他伺服器語言。請看用PHP 寫的對應的例子。
"getcustomer.php" 中的原始碼負責對資料庫進行查詢,然後用HTML 表格傳回結果:
<%response.expires=-1sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="sql=sql & "'" & request.querystring("q") & "'"set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"conn.Open(Server.Mappath("/db/northwind.mdb"))set rs=Server.CreateObject( "ADODB.recordset")rs.Open sql,connresponse.write("<table>")do until rs.EOF for each x in rs.Fields response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td>" & x.value & "</td></tr>") next rs.MoveNextloopresponse.write("</table>")%>