TECH I.S.

PHPの例 - AJAXとXML


AJAXは、XMLファイルとの対話型通信に使用できます。


AJAX XMLの例

次の例は、WebページがAJAXを使用してXMLファイルから情報を取得する方法を示しています。


ここにCDの情報が表示されます...

例の説明 - HTMLページ

ユーザーが上のドロップダウンリストでCDを選択すると、「showCD()」という関数が実行されます。

関数は「onchange」イベントによってトリガーされます。

<html> <head> <script> function showCD(str){  if (str=="") {    document.getElementById("txtHint").innerHTML="";     return;   }   var xmlhttp=new XMLHttpRequest();  xmlhttp.onreadystatechange=function() {    if (this.readyState==4 && this.status==200) {      document.getElementById("txtHint").innerHTML=this.responseText;     }   }  xmlhttp.open("GET","getcd.php?q="+str,true);  xmlhttp.send(); } </script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)">  <option value="">Select a CD:</option>  <option value="Bob Dylan">Bob Dylan</option>  <option value="Bee Gees">Bee Gees</option>  <option value="Cat Stevens">Cat Stevens</option> </select> </form> <div id="txtHint"><b>CD info will be listed here...</b></div> </body> </html>

showCD()関数は次のことを行います。

  • CDが選択されているかどうかを確認する。
  • XMLHttpRequest オブジェクトを作成する。
  • サーバーの応答が準備できたときに実行する関数を作成する。
  • サーバー上のファイルにリクエストを送信する。
  • パラメータ(q)がURLに追加されていることに注意してください (ドロップダウン リストの内容を含む)。

PHPファイル

上記の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++){  //Process only element nodes  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++){  //Process only element nodes  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ページに送信されると、次のことが起こります。

  1. PHPはXML DOMオブジェクトを作成します。
  2. JavaScriptから送信された名前に一致するすべての<artist>要素を検索します。
  3. アルバム情報を出力(「txtHint」プレースホルダーに送信)。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細