PHPとAJAX responseXML 実例
- 前のページ AJAX データベース
- 次のページ AJAX Live Search
AJAXを使用して、XML形式でデータベース情報を返すことができます。
AJAX Database 转 XML 实例 （テスト説明：このインスタンスの機能は未実装です）
以下のAJAX例では、ウェブページがMySQLデータベースから情報を読み取り、データをXMLドキュメントに変換し、異なる場所でそのドキュメントを使用して情報を表示する方法を示します。
この例は、前節の「PHP AJAX Database」の例と非常に似ていますが、大きな違いがあります：この例では、responseXML関数を使用してPHPページからXML形式のデータを取得しています。
XMLドキュメントを受け取ることで、ページの複数の場所を更新できる能力が得られます。それは、PHPの出力を一つ受け取り表示するだけでなく、XML形式のデータを取得するからです。
この例では、データベースから受け取った情報を使用して、複数の<span>要素を更新します。
ドロップダウンリストから名前を選んでください
この列は四つの要素で構成されています：
- MySQLデータベース
- シンプルなHTMLフォーム
- JavaScript
- PHPページ
データベース
この例で使用するデータベースはこんな感じです：
| id | 名 | 姓 | 年齢 | 故郷 | 仕事 |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | 醸造所 |
| 2 | Lois | Griffin | 40 | Newport | ピアノ教師 |
| 3 | Joseph | Swanson | 39 | Quahog | 警察官 |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
HTMLフォーム
以下の例では、シンプルなHTMLフォームとJavaScriptへのリンクが含まれています：
<html> <head> <script src="responsexml.js"></script> </head> <body> <form> ユーザーを選択してください： <select name="users" onchange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <h2> <span id="firstname"></span> <span id="lastname"></span> </h2> <span id="job"></span> <div style="text-align: right"> <span id="age_text"></span> <span id="age"></span> <span id="hometown_text"></span> <span id="hometown"></span> </div> </body> </html>
例解 - HTMLフォーム
- HTMLフォームは「users」というname属性を持つドロップダウンリストで、オプションの値はデータベースのidフィールドに対応しています。
- フォームの下にはいくつかの<span>要素があります。これらは受信した異なる値の占位符として使用されます。
- ユーザーが特定のオプションを選択すると、showUser()関数が実行されます。この関数の実行は「onchange」イベントによってトリガーされます。
つまり、ユーザーがドロップダウンリストの値を変更するたびに、showUser()関数が実行され、指定された<span>要素に結果を出力します。
JavaScript
これはファイル「responsexml.js」に保存されているJavaScriptコードです：
var xmlHttp
function showUser(str)
{
xmlHttp = GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="responsexml.php"
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 || xmlHttp.readyState=="complete")
{
xmlDoc=xmlHttp.responseXML;
document.getElementById("firstname").innerHTML=
xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
document.getElementById("lastname").innerHTML=
xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
document.getElementById("age_text").innerHTML="Age: ";
document.getElementById("age").innerHTML=
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
document.getElementById("hometown_text").innerHTML="<br/>From: ";
document.getElementById("hometown").innerHTML=
xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
例説明：
showUser()とGetXmlHttpObject関数と PHPとAJAX MySQL データベース実例 このセクションの例は同じです。関連する説明を参照してください。
stateChanged()関数
下拉リストの項目が選択された場合、この関数が実行されます：
- responseXML関数を使用して、"xmlDoc"変数をXMLドキュメントとして定義します
- このXMLドキュメントからデータを取り出し、それを正しい"span"要素に配置します
PHPページ
このJavaScriptで呼び出されるサーバーページは、"responsexml.php"という名前のシンプルなPHPファイルです。
このページはPHPで書かれており、MySQLデータベースを使用しています。
コードはデータベースに対するSQLクエリを実行し、結果をXMLドキュメントとして返します：
<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//過去の日付
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
SELECT * FROM user WHERE id = ".".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<firstname>" . $row['FirstName'] . "</firstname>";
echo "<lastname>" . $row['LastName'] . "</lastname>";
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['Hometown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";
mysql_close($con);
?>
例説明：
JavaScript から PHP ページにクエリが送信された場合、以下のことが起こります：
- PHP ドキュメントの content-type が "text/xml" に設定されています
- PHP ドキュメントが "no-cache" に設定され、キャッシュを防ぐために設定されています
- HTML ページから送られてきたデータで $q 変数を設定する
- PHP で MySQL サーバーとの接続を開く
- 指定された id を持つ "user" を見つける
- XML ドキュメントとしてデータを出力する
- 前のページ AJAX データベース
- 次のページ AJAX Live Search
