PHP と AJAX XML インスタンス
- 前のページ AJAX Suggest
- 次のページ AJAX データベース
AJAXはXMLファイルと対話的に通信できます。
AJAX XML例
以下のAJAX例では、ウェブページがAJAX技術を使用してXMLファイルから情報を読み取る方法を示します。
以下のリストから1つのCDを選んでください
この例では、3つのページが含まれています：
- シンプルなHTMLフォーム
- XMLファイル
- JavaScriptファイル
- PHPページ
HTMLフォーム
上記の例では、シンプルなHTMLフォームとJavaScriptへのリンクが含まれています：
<html> <head> <script src="selectcd.js"></script> </head> <body> <form> CDを選んでください： <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </form> <p> <div id="txtHint"><b>CD情報はここに表示されます。</b></div> </p> </body> </html>
例説明：
ご覧の通り、これは単なる HTML フォームで、"cds" という名前のドロップダウンリストがあります。
フォームの下の段落には、"txtHint" という名前の div があります。この div はウェブサーバーから取得したデータのプレースホルダーとして使用されます。
ユーザーがデータを選択すると、"showCD" という名前の関数が実行されます。この関数の実行は "onchange" イベントによってトリガーされます。
言い換えれば、ユーザーがドロップダウンリストの値を変更するたびに、showCD 関数が呼び出されます。
XML ファイル
XML ファイルは "cd_catalog.xml「こちらのファイルには CD コレクションに関するデータが含まれています。」
JavaScript
これは "selectcd.js" ファイルに保存されている JavaScript コードです：
var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("ブラウザはHTTPリクエストをサポートしていません")
return
}
var url="getcd.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")
{
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;
}
例説明：
stateChanged()とGetXmlHttpObject関数は前節と同じで、前のページの関連説明を参照してください。
showCD()関数
ドロップダウンリストの項目が選択された場合、関数が実行されます：
- GetXmlHttpObject関数を呼び出してXMLHTTPオブジェクトを作成します
- サーバーに送信するURL（ファイル名）を定義します
- URLにドロップダウンリストの内容を持つパラメータ(q)を追加します
- ランダムな数を追加して、サーバーがキャッシュされたファイルを使用しないようにします
- イベントがトリガーされたときにstateChangedを呼び出します
- 指定されたURLでXMLHTTPオブジェクトを開きます
- サーバーにHTTPリクエストを送信
PHPページ
JavaScriptで呼び出されるこのサーバー側ページは、「getcd.php」と呼ばれるシンプルなPHPファイルです。
このページはPHPで書かれており、XML DOMを使用してXMLドキュメント「cd_catalog.xml"。
XMLファイルのクエリを実行し、HTMLで結果を返します：
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Elementノードのみを処理
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Elementノードのみを処理
if ($cd->item($i)->nodeType==1)
{
echo($cd->item($i)->nodeName);
echo(": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>
例解
JavaScriptからPHPページにリクエストが送信されたときに、以下が発生します：
- PHPで「cd_catalog.xml」ファイルのXML DOMオブジェクトを作成します。
- すべての「artist」要素（nodetypes = 1）をループし、JavaScriptで送信されたデータと一致する名前を検索します。
- CDに含まれる正しいアーティストを検出します。
- アルバムの情報を表示し、「txtHint」プレースホルダーに送信します。
- 前のページ AJAX Suggest
- 次のページ AJAX データベース
