AJAX は、データベースとの双方向通信に使用することができます。
次の例は、AJAX により、Web ページがデータベースからどのように情報を取出すことができるかを示しています：
ユーザーが、上記のドロップダウンリストの customer を選択した時に、"showCustomer()" という関数が実行されます。 関数は "onchange" イベントによりトリガーされます：
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState
== 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML
= this.responseText;
}
};
xhttp.open("GET",
"getcustomer.html?q="+str, true);
xhttp.send();
}
showCustomer() 関数は、次のことを行います:
上記、JavaScript にコールされるサーバ上のページは "getcustomer.asp" という ASP ファイルです。
サーバファイルは PHP、または他のサーバ言語に容易に書き直すことができます。 PHP に対応した例を見てください。
"getcustomer.asp" のソースコードは、データベースに対してクエリを実行し、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("/datafolder/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><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>