PHP och AJAX responseXML-exempel

AJAX kan användas för att returnera databasinformation i XML.

AJAX Database till XML-exempel (testförklaring: Denna funktion är inte implementerad)

I följande AJAX-exempel kommer vi att visa hur en webbsida läser information från en MySQL-databas, konverterar data till ett XML-dokument och använder detta dokument på olika platser för att visa information.

Detta exempel liknar föregående avsnitts "PHP AJAX Database"-exempel, men med en stor skillnad: I detta exempel får vi XML-formaterad data från PHP-sidan genom att använda responseXML-funktionen.

Att ta emot ett XML-dokument som svar ger oss förmågan att uppdatera flera platser på sidan, inte bara att ta emot en PHP-utdata och visa den.

I detta exempel kommer vi att använda information som mottas från databasen för att uppdatera flera <span>-element.

Välj ett namn från rullgardinsmenyn

Välj en användare:

　

Denna kolumn består av fyra element:

  • MySQL-databas
  • En enkel HTML-formulär
  • JavaScript
  • PHP-sida

Databas

Databasen som används i detta exempel ser ut ungefär så här:

id Förnamn Efternamn Ålder Hemstad Jobb
1 Peter Griffin 41 Quahog Bryggeri
2 Lois Griffin 40 Newport Pianolärare
3 Joseph Swanson 39 Quahog Polis
4 Glenn Quagmire 41 Quahog Pilot

HTML-formulär

Exempelmen innehåller en enkel HTML-formulär samt en länk till JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Välj en användare:
<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>

Exempel förklaring - HTML-formulär

  • HTML-formuläret är en rullgardin med name-attributet "users" som motsvarar värdena i databasens id-fält
  • Nedan finns flera <span>-element som används som platshållare för de olika värden vi mottar
  • När användaren väljer ett specifikt alternativ körs funktionen "showUser()" som utlösas av "onchange"-händelsen

Det vill säga, varje gång användaren ändrar värde i en rullgardin, körs funktionen showUser() och resultatet skrivs ut i det angivna <span>-elementet.

JavaScript

Detta är JavaScript-koden som lagras i filen "responsexml.js":

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
 om (window.XMLHttpRequest)
  {
  objXMLHttp = new XMLHttpRequest()
  }
 annars om (window.ActiveXObject)
  {
  objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Exempel förklaring:

showUser() och GetXmlHttpObject-funktioner med PHP och AJAX MySQL-databasexempel Exempeln i denna sektion är desamma. Du kan läsa de relevanta förklaringarna i dem.

stateChanged()-funktionen

Om ett objekt i rullgardinsmenyn har valts, utför denna funktion:

  1. Använd responseXML-funktionen för att definiera variabeln "xmlDoc" som ett XML-dokument
  2. Hämta data från detta XML-dokument och placera dem i de korrekta "span"-elementen

PHP-sida

Denna server-side sida som anropas av JavaScript är en enkel PHP-fil med namnet "responsexml.php".

Denna sida är skriven i PHP och använder MySQL-databas.

Koden kommer att köra en SQL-förfrågan mot databasen och returnera resultaten som ett XML-dokument:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//En datum i det förflutna
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 = ".$q."";
$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);
?>

Exempel förklaring:

När en fråga från JavaScript skickas till PHP-sidan händer följande:

  • PHP-dokumentets content-type sätts till "text/xml"
  • PHP-dokumentet sätts till "no-cache" för att förhindra cachning
  • Ställ in variabeln $q med data från HTML-sidan
  • Öppna en anslutning till MySQL-servern med PHP
  • Hitta "user" med specifikt id
  • Skriv ut data som XML-dokument