Mga Halimbawa ng AJAX at XML ng PHP

Maaaring makipag-interactive na komunikasyon ang AJAX sa XML file.

AJAX XML instance

Sa mga sumusunod na halimbawa ng AJAX, amin na ipapakita kung paano gumagamit ang web page ng AJAX teknolohiya upang mabasa ang impormasyon mula sa XML file.

Pumili ng isang CD mula sa ibabang bilang na ito

Ito ang paglalista ng impormasyon ng CD.

Ang eksemplo na ito ay naglalaman ng tatlong pahina:

  • isang simple HTML form
  • isang XML file
  • isang JavaScript file
  • isang PHP pahina

HTML form

Ang halimbawa na ito ay naglalaman ng isang simple na HTML form at isang link patungo sa JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Select a 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 info will be listed here.</b></div>
</p>
</body>
</html>

Halimbawa sa paliwanag:

Tulad ng nakikita ninyo, ito ay isang simple na HTML form na may dropdown list na may pangalan na "cds".

Ang paragrapong nasa ilalim ng form ay naglalaman ng div na may pangalan na "txtHint". Ginagamit ito bilang placeholder para sa impormasyon na hinahanap mula sa web server.

Kapag pinili ng user ang data, isasakatuparan ang function na may pangalan na "showCD". Ito ay inilabas ng event na onchange.

Sinasabi nito, bawat pagbabago ng halaga ng dropdown list ng user, ay may pagtawag sa function na showCD.

Ang XML file

Ang XML file ay "cd_catalog.xml". Ang file na ito ay naglalaman ng impormasyon tungkol sa koleksyon ng CD.

JavaScript

Ito ang JavaScript code na nakatago sa file na "selectcd.js":

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;
}

Halimbawa sa paliwanag:

Ang stateChanged() at ang function GetXmlHttpObject ay katulad ng sa nakaraang section, maari mong basahin ang kanyang paliwanag sa nakaraang pahina.

showCD() function

Kung napili ang isang item sa dropdown list, ang function ay nagpapatuloy:

  1. Tumawag sa function GetXmlHttpObject upang lumikha ng XMLHTTP object
  2. Tukuyin ang URL na magpadala sa server (filename)
  3. Magdagdag ng parameter na may dropdown list content sa URL (q)
  4. Magdagdag ng random number upang maiwasan na mag-cache ng file ng server
  5. Tumawag sa stateChanged kapag nangyari ang event
  6. Buksan ang XMLHTTP object sa ibig sabihin na URL
  7. Magpadala ng HTTP request sa server

PHP pahina

Ang pahina na ito, na tinatawag na "getcd.php", ay isang simple na PHP file na tinatawag ng JavaScript.

Ang pahina na ito ay naitala gamit ang PHP, gamit ang XML DOM upang maglunsad ng XML document "cd_catalog.xml"。

Ang pagpili sa XML file na nagsasalita at nagbibigay ng resulta bilang HTML:

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

Halimbawa na nagpaliwanag

Nangyari: kapag ang kahilingan ay ipinasa mula sa JavaScript sa PHP page

  1. PHP gumawa ng XML DOM object para sa file na "cd_catalog.xml"
  2. Ulitin ang lahat ng "artist" na elemento (nodetypes = 1), hanapin ang pangalan na katugma sa data na ipinasa ng JavaScript
  3. Hanapin ang CD na naglalaman ng tamang "artist"
  4. Magpalabas ng impormasyon ng "album" at ipagkakita sa placeholder na "txtHint"