Przykład AJAX i XML w PHP

AJAX może komunikować się interaktywnie z plikami XML.

Przykład AJAX XML

W poniższym przykładzie AJAX pokażemy, jak strona internetowa korzysta z technologii AJAX do odczytu informacji z pliku XML.

Wybierz jeden z poniższych CD w liście poniżej

Wymień informacje o CD tutaj.

Ten przykład obejmuje trzy strony:

  • Prosty formularz HTML
  • Plik XML
  • Plik JavaScript
  • Strona PHP

Formularz HTML

Przykładowy przykład zawiera prosty formularz HTML oraz link do JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Wybierz 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>Informacje o CD zostaną wymienione tutaj.</b></div>
</p>
</body>
</html>

Przykład wyjaśnienia:

Jak widać, to prosty formularz HTML z rozwijaną listą o nazwie "cds".

Paragraf pod formularzem zawiera div o nazwie "txtHint". Ten div służy jako占位符 dla danych pobranych z serwera web.

Gdy użytkownik wybiera dane, wykonywana jest funkcja o nazwie "showCD". Wykonanie tej funkcji jest wywoływane przez wydarzenie "onchange".

Innymi słowy, gdy użytkownik zmienia wartość w rozwijanej liście, wywoływana jest funkcja showCD.

Plik XML

Plik XML to "cd_catalog.xml". Plik zawiera dane dotyczące kolekcji CD.

JavaScript

Oto kod JavaScript przechowywany w pliku "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Przeglądarka nie obsługuje żądań 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;
}

Przykład wyjaśnienia:

Funkcje stateChanged() i GetXmlHttpObject są takie same jak w poprzednim rozdziale, możesz przeczytać związane wyjaśnienia na poprzedniej stronie.

Funkcja showCD()

Jeśli wybrano pewien element z listy rozwijanej, funkcja wykonuje się:

  1. Wywołaj funkcję GetXmlHttpObject, aby utworzyć obiekt XMLHTTP
  2. Zdefiniuj URL wysyłania do serwera (nazwa pliku)
  3. Dodaj parametr do URL zawierający zawartość listy rozwijanej (q)
  4. Dodaj losową liczbę, aby zapobiec użyciu pliku w pamięci podręcznej serwera
  5. Wywołanie funkcji stateChanged przy wywołaniu zdarzenia
  6. Otwieranie obiektu XMLHTTP za pomocą podanego URL
  7. Wysyłanie żądania HTTP do serwera

Strona PHP

Ta strona serwerowa wywoływana przez JavaScript, to prosty plik PHP o nazwie "getcd.php".

Ta strona jest napisana w PHP, używając XML DOM do ładowania dokumentu XML "cd_catalog.xml"。

Wyszukiwanie kodu dotyczące XML plików i zwracanie wyników w formacie 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++)
{
//Przetwarzaj tylko węzły elementów
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++)
{ 
//Przetwarzaj tylko węzły elementów
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Przykłady wyjaśnienia

Gdy żądanie jest wysyłane z JavaScript do strony PHP, następuje:

  1. PHP tworzy obiekt XML DOM pliku "cd_catalog.xml"
  2. Przejdź przez wszystkie elementy "artist" (nodetypes = 1), aby znaleźć imię, które pasuje do danych przekazanych przez JavaScript
  3. Znajdź CD zawierającego poprawnego artystę
  4. Wyświetl informacje o albumie i wyślij je do "txtHint" jako占位符