PHP ja AJAX responseXML esimerkki

AJAX voidaan käyttää tietokannan XML-muodossa olevien tietojen palauttamiseen.

AJAX Database to XML -esimerkki (testausohjeet: tämä esimerkki ei ole toteutettu)

Seuraavassa AJAX-esimerkissä näytämme, miten sivu lukee tietoja MySQL-tietokannasta, muuntaa ne XML-dokumentiksi ja käyttää tätä dokumenttia tietojen näyttämiseen eri paikoissa.

Tämä esimerkki on hyvin samanlainen kuin edellisessä luvussa oleva "PHP AJAX Database"-esimerkki, mutta siinä on yksi merkittävä ero: tässä esimerkissä saamme PHP-sivulta responseXML-funktiolla XML-muodossa olevia tietoja.

Vastaanotettava XML-dokumentti mahdollistaa sivun useiden paikkojen päivittämisen, ei vain PHP:n tuottaman tuloksen näyttämisen.

Tässä esimerkissä päivitämme useita <span>-elementtejä tietokannasta saadulla tiedolla.

Valitse nimi pudotusvalikosta

Valitse käyttäjä:

　

Tämä sarake koostuu neljästä elementistä:

  • MySQL-tietokanta
  • Yksinkertainen HTML-lomake
  • JavaScript
  • PHP page

Tietokanta

Tässä esimerkissä käytettävä tietokanta näyttää tältä:

id Etunimi Sukunimi Ikä Kotikaupunki Työpaikka
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Pianopedagogi
3 Joseph Swanson 39 Quahog Poliisimies
4 Glenn Quagmire 41 Quahog Pilot

HTML-lomake

Esimerkki sisältää yksinkertaisen HTML-lomakkeen ja linkin JavaScriptiin:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Valitse käyttäjä:
<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>

Esimerkki selityksestä - HTML-lomake

  • HTML-lomake on pudotusvalikko, jonka name-ominaisuuden arvo on "users" ja vaihtoehtojen arvot vastaavat tietokannan id-kenttää
  • Lomakkeen alla on useita <span>-elementtejä, jotka toimivat vastaanottamiemme eri arvojen paikkamerkkeinä
  • Kun käyttäjä valitsee erityisen vaihtoehdon, funktio "showUser()" suoritetaan. Funktion suorittaminen käynnistetään "onchange"-tapahtumalla

Toisin sanoen, aina kun käyttäjä muuttaa arvoa pudotusvalikossa, funktio showUser() suoritetaan ja tulostaa tuloksen määritetyssä <span>-elementissä.

JavaScript

Tämä on JavaScript-koodi, joka tallennetaan tiedostoon "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
 if (window.XMLHttpRequest)
  {
  objXMLHttp = new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Esimerkki selityksestä:

showUser() and GetXmlHttpObject functions with PHP ja AJAX MySQL tietokantaesimerkki The examples in this section are the same. You can refer to the relevant explanations in them.

stateChanged() function

If an item in the dropdown list is selected, this function is executed:

  1. Using the responseXML function, define the "xmlDoc" variable as an XML document
  2. Retrieve data from this XML document and place them in the correct "span" elements

PHP page

This server page, called "responsexml.php", is a simple PHP file called by JavaScript.

This page is written in PHP and uses the MySQL database.

The code will run a SQL query against the database and return the results as an XML document:

<?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 = " . $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);
?>

Esimerkki selityksestä:

Kun kysely saapuu PHP-sivulle JavaScriptistä:

  • PHP-dokumentin content-type asetetaan "text/xml"
  • PHP-dokumentti asetetaan "no-cache", jotta sitä ei varastoida
  • Asetetaan $q muuttuja HTML-sivulta tulevalla datalla
  • PHP avaa yhteyden MySQL-palvelimeen
  • Löydetään "user"-objekti, jolla on määritelty id
  • Tulosta tiedot XML-dokumenttina