AJAXデータベースの例
AJAXは、データベースとの対話型通信に使用できます。
AJAXデータベースの例
次の例は、WebページがAJAXを使用してデータベースから情報を取得する方法を示しています。
例の説明 - showCustomer()関数
ユーザーが上のドロップダウン リストで顧客を選択すると、呼び出される関数showCustomer()
が実行されます。この関数はonchange
イベントによってトリガーされます。
showCustomer
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
このshowCustomer()
関数は次のことを行います。
- 顧客が選択されているかどうかを確認する
- XMLHttpRequestオブジェクトを作成する
- サーバーの応答が準備できたときに実行する関数を作成する
- サーバー上のファイルにリクエストを送信する
- パラメータ(q)がURLに追加されていることに注意してください(ドロップダウンリストの内容を含む)。
AJAXサーバーページ
上記のJavaScriptによって呼び出されるサーバー上のページは、「getcustomer.php」というPHPファイルです。
「getcustomer.php」のソースコードは、データベースに対してクエリを実行し、結果をHTMLテーブルに返します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。