AJAX 可用來與數據庫進行動態地通信。
在下面的 AJAX 例子中，我們將演示如何使用 AJAX 技術令網頁從數據庫讀取信息。
上面的實例包含了一個簡單的 HTML 表單以及執行 JavaScript 的鏈接：
<html> <head><script src="selectcustomer.js"></script></head> <body><form>請選擇一位客戶： <selectname="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select></form><p> <divid="txtHint"><b>客戶信息將在此處列出。</b></div> </p> </body> </html>
正如您看到的，這是一個簡單的帶有一個名為 "customers" 下拉列表的 HTML 表單。
表單以下的段落包含了一個名為 "txtHint" 的 div，這個 div 充當了由 web 服務器所取回的信息的位置占位符。
當用戶選擇數據時，名為 "showCustomer()" 的函數會被執行。函數的執行會被 "onchange" 事件觸發。另外需要說明的是：每當用戶改變下拉列表中的值，函數 showCustomer 就會被調用。
下面列出了 JavaScript 代碼。
這是存儲在文件 "selectcustomer.js" 中的 JavaScript 代碼：
var xmlHttpfunction showCustomer(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("您的浏覽器不支持AJAX！"); return; } var url="getcustomer.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }function stateChanged(){ if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }function GetXmlHttpObject(){ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
這個被 JavaScript 調用的服務器頁面，是一個名為 "getcustomer.asp" 的簡單的 ASP 文件。
此頁面使用 VBScript 針對 IIS 編寫。可以使用 PHP 或其他服務器語言對它進行改寫。
此代碼可運行針對某個數據庫的 SQL，並以 HTML 表格返回結果：
<%
response.expires=-1
sql="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, conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><em>" & x.name & "</em></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>