पीएचपी और एज़ेक्स एक्सएमएल इंस्टेंस

AJAX XML फ़ाइल से इंटरैक्टिव कॉम्यूनिकेशन कर सकता है。

AJAX XML उदाहरण

नीचे दिए गए AJAX उदाहरण में, हम दर्शाएंगे कि वेब पृष्ठ AJAX तकनीक के द्वारा XML फ़ाइल से जानकारी पढ़ता है。

नीचे दिए गए सूची में एक CD चुनें

CD जानकारी को यहाँ सूचीबद्ध किया जाता है。

इस उदाहरण में तीन पृष्ठ शामिल हैं:

  • एक साधारण HTML फॉर्म
  • एक XML फ़ाइल
  • एक JavaScript फ़ाइल
  • एक PHP पृष्ठ

HTML फॉर्म

उपरी उदाहरण में एक साधारण HTML फॉर्म और JavaScript के लिए लिंक शामिल है:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
एक 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 जानकारी यहाँ सूचीबद्ध होगी.</b></div>
</p>
</body>
</html>

उदाहरण व्याख्या:

जैसा कि आप देख रहे हैं, यह एक साधारण HTML फ़ॉर्म है, जिसमें "cds" नामक ड्रॉपडाउन सूची है。

फ़ॉर्म के नीचे का पैराग्राफ एक "txtHint" नामक div को शामिल करता है। यह div वेब सर्वर से प्राप्त हुए डाटा के प्लेसहोल्डर के रूप में प्रयोग किया जाता है。

जब उपयोगकर्ता डाटा चुनता है, तब "showCD" नामक फ़ंक्शन चलाया जाता है। इस फ़ंक्शन का चलन "onchange" इवेंट से ट्रिगर किया जाता है。

अन्य रूप से, जब तक उपयोगकर्ता ड्रॉपडाउन सूची में वैल्यू बदलता है, तब तक showCD फ़ंक्शन को बुलाया जाता है。

XML फ़ाइल

XML फ़ाइल है "cd_catalog.xml". इस फ़ाइल में CD संग्रह के बारे में जानकारी है。

जावास्क्रिप्ट

यह "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
 {
 // फ़ायरफॉक्स, ऑपेरा 8.0+, सैफ़री
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // इंटरनेट एक्सप्लोरर
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

उदाहरण व्याख्या:

stateChanged() और GetXmlHttpObject फ़ंक्शन उसी पृष्ठ के साथ हैं, आप पिछले पृष्ठ में के संबंध में स्पष्टीकरण को देख सकते हैं。

showCD() फ़ंक्शन

अगर ड्रॉपडाउन सूची में कोई वस्तु चुनी गई है, तो फ़ंक्शन चलता है:

  1. GetXmlHttpObject फ़ंक्शन को बुलाकर XMLHTTP ऑब्जैक्ट बनाएं
  2. सर्वर को भेजने वाले URL (फ़ाइल नाम) को परिभाषित करें
  3. URL में ड्रॉपडाउन सामग्री वाले पारामीटर (q) जोड़ें
  4. रांडोम संख्या जोड़ें, ताकि सर्वर की कैशेड फ़ाइलों का उपयोग न किया जाए
  5. जब कोई घटना ट्रिगर होती है तो stateChanged को बुलाया जाता है
  6. दिए गए URL को खोलकर XMLHTTP ऑब्जैक्ट खोलना
  7. सर्वर को HTTP अनुरोध भेजना

PHP पृष्ठ

यह जावास्क्रिप्ट द्वारा बुलाई गई सर्वर पृष्ठ, 'getcd.php' नामक साधारण PHP फ़ाइल है。

यह पृष्ठ PHP से लिखा है, XML डॉक्यूमेंट लोड करने के लिए XML DOM का उपयोग करता है:cd_catalog.xml"。

XML फ़ाइलों पर क्यूरी चलाने के लिए कोड चलाया जाता है और नतीजे को 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++)
{
//केवल एलीमेंट नोडों को प्रसंस्करण करें
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++)
{ 
//केवल एलीमेंट नोडों को प्रसंस्करण करें
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

उदाहरण व्याख्या

जब जावास्क्रिप्ट द्वारा PHP पृष्ठ को अनुरोध किया जाता है तो यह होता है:

  1. PHP "cd_catalog.xml" फ़ाइल के एक्सएमएल डॉम ऑब्जैक्ट बनाएं
  2. सभी "artist" एलीमेंट (nodetypes = 1) को चक्कर करें, और जिससे जावास्क्रिप्ट द्वारा भेजे गए डाटा के नाम के साथ मेल खाते होने की तलाश करें
  3. CD में ठीक कलाकार को खोजें
  4. album के बारे में जानकारी निकालें और "txtHint" प्लेसहोल्डर को भेजें