AJAX Database の例
AJAX はデータベースと動的に通信するために使用できます。
AJAX データベースの例
以下の例では、WebページがAJAXを介してデータベースから情報を読み取る方法を示します： 下のドロップダウンリストで顧客を選択してください：
例の説明 - showCustomer() 関数
ユーザーが上のドロップダウンリストで顧客を選択すると、"showCustomer()" という名前の関数が実行されます。この関数は "onchange" イベントによってトリガーされます：
function showCustomer(str) {
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
} else {
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（入力フィールドの内容を含む）を追加していることに注意してください
AJAX サーバーページ
上記のJavaScriptによって呼び出されるサーバーページは、"getcustomer.php" という名前のPHPファイルです。
PHPでサーバーファイルを記述するのも簡単です。他のサーバー言語でも同様です。参照：PHPで書かれた対応する例。
"getcustomer.php" のソースコードはデータベースへのクエリを実行し、結果を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><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
その他の拡張