PHP ja AJAX XML esimerkki

AJAX voi kommunikoida interaktiivisesti XML-tiedostojen kanssa.

AJAX XML-esimerkki

Tässä AJAX-esimerkissä näytämme, miten verkkosivu käyttää AJAX-tekniikkaa tietojen lukemiseen XML-tiedostosta.

Valitse allaolevasta luettelosta yksi CD

Tässä luetellaan CD-tiedot.

Tämä esimerkki sisältää kolme sivua:

  • Yksinkertainen HTML-lomake
  • XML-tiedosto
  • JavaScript-tiedosto
  • PHP-sivu

HTML-lomake

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

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Valitse 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>CD-tiedot listataan täällä.</b></div>
</p>
</body>
</html>

Esimerkki selityksestä:

Kuten näette, se on vain yksinkertainen HTML-lomake, jossa on nimeltään "cds"-pudotuslista.

Lomakkeen alapuolella oleva kappale sisältää nimeltään "txtHint"-divin. Tämä div toimii paikkaajana web-palvelimesta haettujen tietojen varalta.

Kun käyttäjä valitsee tietoja, suoritetaan nimeltään "showCD"-funktio. Tämä funktio suoritetaan "onchange"-tapahtuman kautta.

Toisin sanoen, aina kun käyttäjä muuttaa pudotuslistan arvoa, showCD-funktio kutsutaan.

XML-tiedosto

XML-tiedosto on "cd_catalog.xml". Tämä tiedosto sisältää tietoja CD-kokoelmasta.

JavaScript

Tämä on JavaScript-koodi, joka tallennetaan "selectcd.js"-tiedostoon:

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Selain ei tue HTTP-pyynnöitä")
 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;
}

Esimerkki selityksestä:

stateChanged() ja GetXmlHttpObject -funktiot ovat samat kuin edellisessä luvussa, voit tarkistaa edelliseltä sivulta.

showCD() -funktio

Jos valitaan pudotusvalikon jokin kohta, funktio suorittaa:

  1. Kutsu GetXmlHttpObject-funktiota XMLHTTP-objektin luomiseksi
  2. Määritä lähetettävän URL:n (tiedostonimi)
  3. Lisää parametri (q) URL:hen, joka sisältää pudotusvalikon sisällön
  4. Lisää satunnainen luku, jotta palvelin ei käytä tallennettua tiedostoa
  5. Kun tapahtuma käynnistyy, kutsutaan stateChanged
  6. Avaa XMLHTTP-objekti annetulla URL:llä
  7. Lähetä HTTP-pyyntö palvelimelle

PHP-sivu

Tämä palvelin sivu, joka kutsutaan JavaScriptin avulla, on yksinkertainen PHP-tiedosto nimeltä "getcd.php".

Tämä sivu on kirjoitettu PHP:llä ja käyttää XML DOM:ia XML-dokumentin "cd_catalog.xml"。

Koodin suoritus kohdistuu XML-tiedoston kyselyyn ja palauttaa tuloksen HTML-muodossa:

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

Esimerkki selityksestä

Kun pyyntö lähetetään JavaScriptistä PHP-sivulle, tapahtuu seuraava:

  1. PHP luo "cd_catalog.xml"-tiedoston XML DOM-objekti
  2. Toista kaikki "artist"-elementit (nodetypes = 1), jaetsa nimen, joka on samanlainen kuin JavaScriptin lähettämä data
  3. Löydä CD, joka sisältää oikean artistin
  4. Lähetä albumin tiedot ja lähetä "txtHint"-korvikkeeseen