PHP und AJAX-XML-Beispiel

AJAX kann interaktiv mit XML-Dateien kommunizieren.

AJAX XML-Beispiel

In diesem AJAX-Beispiel zeigen wir, wie eine Webseite AJAX-Technologie verwendet, um Informationen aus einer XML-Datei zu lesen.

Wählen Sie unten aus der folgenden Liste eine CD aus

Hier werden CD-Informationen aufgelistet.

Dieses Beispiel umfasst drei Seiten:

  • Ein einfaches HTML-Formular
  • Eine XML-Datei
  • Eine JavaScript-Datei
  • Eine PHP-Seite

HTML-Formular

Der obige Beispiel enthält ein einfaches HTML-Formular und einen Link zu JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Wählen Sie eine CD aus:
<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-Informationen werden hier aufgelistet.</b></div>
</p>
</body>
</html>

Beispielbehandlung:

Wie Sie sehen können, ist es nur ein einfaches HTML-Formular mit einer Dropdown-Liste namens "cds".

Der Absatz unter dem Formular enthält einen div mit dem Namen "txtHint". Dieser div dient als Platzhalter für Daten, die vom Webserver abgerufen wurden.

Wenn der Benutzer Daten auswählt, wird die Funktion "showCD" ausgeführt. Der Ausführung der Funktion wird das "onchange"- Ereignis ausgelöst.

Mit anderen Worten, wenn der Benutzer den Wert in der Dropdown-Liste ändert, wird die Funktion showCD aufgerufen.

Die XML-Datei

Die XML-Datei ist "cd_catalog.xml". Diese Datei enthält Daten über CD-Sammlungen.

JavaScript

Dies ist JavaScript-Code, der im "selectcd.js"-Datei gespeichert ist:

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 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;
}

Beispielbehandlung:

Die Funktionen stateChanged() und GetXmlHttpObject sind wie im vorherigen Abschnitt beschrieben, Sie können die Erklärungen auf der vorherigen Seite überprüfen.

showCD() Funktion

Falls ein Element der Dropdown-Liste ausgewählt wird, führt die Funktion aus:

  1. Rufen Sie die Funktion GetXmlHttpObject auf, um ein XMLHTTP-Objekt zu erstellen
  2. Definieren Sie die URL (Dateiname), an die gesendet wird
  3. Fügen Sie einen Parameter (q) mit dem Inhalt der Dropdown-Liste zur URL hinzu
  4. Fügen Sie eine Zufallszahl hinzu, um zu verhindern, dass der Server gespeicherte Dateien verwendet
  5. Aufruf von stateChanged, wenn ein Ereignis ausgelöst wird
  6. Öffnen Sie ein XMLHTTP-Objekt über die angegebene URL
  7. Senden Sie eine HTTP-Anfrage an den Server

PHP-Seite

Diese vom JavaScript aufgerufene Serverseite ist eine einfache PHP-Datei mit dem Namen "getcd.php".

Diese Seite wurde in PHP geschrieben und verwendet XML DOM, um das XML-Dokument "cd_catalog.xml"。

Die Ausführung des Codes richtet sich an die Abfrage von XML-Dokumenten und gibt die Ergebnisse in HTML zurück:

<?php
$q = $_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x = $xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Verarbeite nur Elementknoten
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++)
{ 
//Verarbeite nur Elementknoten
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Beispiel erläutern

Während der Anfrage von JavaScript an die PHP-Seite tritt auf:

  1. PHP erstellt das XML DOM-Objekt für die Datei "cd_catalog.xml"
  2. Schleife über alle "artist"-Elemente (nodetypes = 1), finden Sie Namen, die mit den von JavaScript übermittelten Daten übereinstimmen
  3. Finden Sie den CD-Band, der den richtigen Künstler enthält
  4. Geben Sie die Informationen des Albums aus und senden Sie sie an den "txtHint"-Platzhalter