PHP und AJAX-responseXML-Beispiel

AJAX kann verwendet werden, um Datenbankinformationen in XML zurückzugeben.

AJAX Database zu XML-Beispiel (Testhinweis: Diese Funktion ist nicht implementiert)

Im folgenden AJAX-Beispiel zeigen wir, wie eine Webseite Informationen aus einer MySQL-Datenbank liest, diese in ein XML-Dokument umwandelt und dieses Dokument an verschiedenen Stellen zur Anzeige verwendet.

Dieses Beispiel ist sehr ähnlich zum Beispiel "PHP AJAX Database" im vorherigen Abschnitt, aber es gibt einen großen Unterschied: In diesem Beispiel erhalten wir durch die Verwendung der Funktion responseXML von der PHP-Seite Daten in XML-Format.

Das Empfangen eines XML-Dokuments als Antwort ermöglicht es uns, mehrere Positionen auf der Seite zu aktualisieren, und nicht nur eine PHP-Ausgabe zu empfangen und anzuzeigen.

In diesem Beispiel verwenden wir Informationen, die wir aus der Datenbank erhalten, um mehrere <span>-Elemente zu aktualisieren.

Wählen Sie einen Namen aus der Dropdown-Liste aus

Wählen Sie einen Benutzer aus:

　

Diese Spalte besteht aus vier Elementen:

  • MySQL-Datenbank
  • Einfaches HTML-Formular
  • JavaScript
  • PHP-Seite

Datenbank

Die in diesem Beispiel verwendete Datenbank ähnelt etwa folgendermaßen:

id Vorname Nachname Alter Heimatort Job
1 Peter Griffin 41 Quahog Brauerei
2 Lois Griffin 40 Newport Pianolehrer
3 Joseph Swanson 39 Quahog Polizeibeamter
4 Glenn Quagmire 41 Quahog Pilot

HTML-Formular

Der obige Beispiel enthält eine einfache HTML-Formular und einen Link zu JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Wählen Sie einen Benutzer aus:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

Beispiel erläutert - HTML-Formular

  • Das HTML-Formular ist eine Dropdown-Liste, deren Name-Attribut den Wert "users" hat und die Werte der Optionen mit dem id-Feld der Datenbank entsprechen
  • Unter dem Formular befinden sich mehrere <span>-Elemente, die als Platzhalter für die verschiedenen empfangenen Werte dienen
  • Wenn der Benutzer eine spezifische Option wählt, wird die Funktion "showUser()" ausgeführt. Der Ausführung dieser Funktion wird das "onchange"-Ereignis ausgelöst

Mit anderen Worten, jede Änderung des Wertes in der Dropdown-Liste des Benutzers führt dazu, dass die Funktion showUser() ausgeführt wird und das Ergebnis im angegebenen <span>-Element ausgibt.

JavaScript

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

var xmlHttp
function showUser(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert("Browser does not support HTTP Request");
  return;
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Beispiel Erklärung:

showUser() und die Funktion GetXmlHttpObject mit PHP und AJAX-MySQL-Datenbankbeispiel Die Beispiele in diesem Abschnitt sind identisch. Sie können die zugehörigen Erklärungen therein lesen.

Die Funktion stateChanged()

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

  1. Durch die Verwendung der Funktion responseXML wird die Variable "xmlDoc" als XML-Dokument definiert
  2. Daten werden aus diesem XML-Dokument abgerufen und in die richtigen "span"-Elemente eingefügt

PHP-Seite

Diese von JavaScript aufgerufene Serverseite ist eine einfache PHP-Datei namens "responsexml.php".

Diese Seite wurde in PHP geschrieben und verwendet die MySQL-Datenbank.

Der Code führt eine SQL-Abfrage an der Datenbank durch und gibt die Ergebnisse als XML-Dokument zurück:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
sql="SELECT * FROM user WHERE id = \
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

Beispiel Erklärung:

Wenn eine Abfrage von JavaScript an die PHP-Seite gesendet wird, passiert:

  • Der content-type des PHP-Dokuments wird auf "text/xml" gesetzt
  • Das PHP-Dokument wird auf "no-cache" gesetzt, um das Caching zu verhindern
  • Setzen Sie die Variable $q mit den Daten aus der HTML-Seite
  • PHP öffnet eine Verbindung zum MySQL-Server
  • Finden Sie den "user" mit der angegebenen id
  • Daten als XML-Dokument ausgeben