AJAX を使用すると、XML ファイルと対話的に通信できます。
次の例は、Web ページが AJAX を通じて XML ファイルから情報を読み取る方法を示しています。
ユーザーが上のドロップダウン リストで CD を選択すると、「showCD()」という名前の関数が実行されます。この関数は、「onchange」イベントによってトリガーされます。
<html><head><script>function showCD(str){ if (str=="") { document.getElementById("txtHint").innerHTML="" } if (window.XMLHttpRequest) { // IE7 以降、Firefox、Chrome、Opera、Safari ブラウザは xmlhttp=new XMLHttpRequest() を実行します } else { // IE6、IE5ブラウザーは xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint") を実行します。 innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send();}</script></head><body><form>CD を選択してください:<名前を選択してください="cds" onchange="showCD(this.value)"><option value="">CD を選択します:</option><option value="Bob Dylan">Bob Dylan</option><option value="ボニー・タイラー">ボニータイラー</option><option value="Dolly Parton">ドリー パートン</option></select></form><div id="txtHint"><b>CD 情報がここにリストされます...</ b></div></body></html>
showCD() 関数は次の手順を実行します。
CD が選択されているかどうかを確認する
XMLHttpRequest オブジェクトを作成する
サーバー応答の準備ができたときに実行する関数を作成する
サーバー上のファイルにリクエストを送信します
URL の末尾にパラメータ (q) が追加されていることに注意してください (ドロップダウン リストの内容が含まれます)。
JavaScript を通じて上記で呼び出されるサーバー ページは、「getcd.php」という名前の PHP ファイルです。
PHP スクリプトは、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++){ // 要素ノードを処理 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++){ // 要素ノードを処理します if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b > "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); }}?>
CD クエリが JavaScript から PHP ページに送信されると、次のことが起こります。
PHPはXML DOMオブジェクトを作成します
JavaScript によって渡されたデータと一致するすべての <artist> 要素内の名前を検索します。
アルバム情報を出力し、「txtHint」プレースホルダーを送り返します