पीएचपी और एज़ीएक्स responseXML उदाहरण

AJAX, XML रूप में डाटाबेस जानकारी वापस करने के लिए इस्तेमाल किया जा सकता है。

AJAX Database से XML उदाहरण (परीक्षण सहीवाद: इस उदाहरण की कार्यक्षमता नहीं है)

नीचे दिए गए AJAX उदाहरण में, हम वेबपृष्ठ को MySQL डाटाबेस से जानकारी पढ़ने, डाटा को XML दस्तावेज़ में बदलने और इस दस्तावेज़ को विभिन्न स्थानों पर इस्तेमाल करने को दिखाएंगे。

यह उदाहरण, पिछले अनुभाग में "PHP AJAX Database" उदाहरण के साथ काफी अधिक भिन्न है, लेकिन एक बड़ा अंतर है: इस उदाहरण में, हम PHP पृष्ठ से responseXML फ़ंक्शन के जरिए XML रूप के डाटा प्राप्त करते हैं。

XML दस्तावेज को प्रतिसाद के रूप में प्राप्त करने से हमें एक साथ कई स्थानों पर पृष्ठ को अद्यतन करने की क्षमता प्राप्त होती है, न केवल एक PHP आउटपुट को प्राप्त करने और इसे दिखाने के लिए。

इस उदाहरण में, हम डाटाबेस से प्राप्त की जाने वाली जानकारी को इस्तेमाल करके कई <span> तत्वों को अद्यतन करेंगे。

ड्रॉपडाउन सूची में एक नाम चुनें

एक उपयोगकर्ता चुनें:

　

इस स्तम्भ को चार तत्वों से बनाया गया है:

  • MySQL डाटाबेस
  • साधारण HTML फॉर्म
  • JavaScript
  • PHP पृष्ठ

डाटाबेस

इस उदाहरण में इस्तेमाल किए जाने वाले डाटाबेस इस तरह दिखता है:

id पहला नाम अंतिम नाम आयु होमटाउन जॉब
1 पीटर ग्रिफिन 41 क्वाहोग ब्रूअरी
2 लॉइस ग्रिफिन 40 न्यूपोर्ट पियानो शिक्षक
3 जोसेफ स्वानसन 39 क्वाहोग पुलिस अधिकारी
4 ग्लेन क्वागमायर 41 क्वाहोग पाइलट

HTML फॉर्म

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

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
एक उपयोगकर्ता चुनें:
<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>

उदाहरण व्याख्या - HTML फ़ॉर्म

  • HTML फ़ॉर्म एक ड्रॉपडाउन सूची है जिसके name एट्रिब्यूट का मूल्य "users" है और विकल्पों के मूल्य डाटाबेस के id फ़ील्ड के साथ मेल खाते हैं
  • फ़ॉर्म के नीचे कुछ <span> एलीमेंट हैं जो हमें प्राप्त किए गए विभिन्न मूल्यों के लिए प्लेसहोल्डर के रूप में काम करते हैं
  • जब उपयोगकर्ता विशिष्ट विकल्प चुनता है, तो फ़ंक्शन "showUser()" चलता है। इस फ़ंक्शन का चलन "onchange" इवेंट से ट्रिगर किया जाता है

इस तरह, जब उपयोगकर्ता ड्रॉपडाउन सूची में एक मूल्य बदलता है, तो फ़ंक्शन showUser() चलता है और निर्दिष्ट <span> एलीमेंट में परिणाम आउटपुट में लिखता है。

JavaScript

यह JavaScript कोड "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
 }

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

showUser() और GetXmlHttpObject फ़ंक्शन पीएचपी और एज़ीएक्स माइक्रोसॉफ्ट सिस्टम एडवांसेड प्रोग्रामिंग लैंग्वेज (एसीसी+) डाटाबेस उदाहरण इस खंड में के उदाहरण समान हैं. आप संबंधित स्पष्टीकरणों को देख सकते हैं.

stateChanged() फ़ंक्शन

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

  1. responseXML फ़ंक्शन का उपयोग करके, "xmlDoc" वेरियेबल को एक XML दस्तावेज़ के रूप में परिभाषित किया जाता है
  2. इस XML दस्तावेज़ से डाटा निकाला जाता है, इसे सही "span" एलीमेंट में रखा जाता है

PHP पृष्ठ

यह JavaScript द्वारा बुलाए गए सर्वर पृष्ठ, "responsexml.php" नामक एक साधारण PHP फ़ाइल है。

यह पृष्ठ PHP से लिखा है और MySQL डेटाबेस का उपयोग करता है。

कोड डेटाबेस के लिए SQL की एक जांच चलाता है और परिणामों को XML दस्तावेज़ में वापस करता है:

<?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);
?>

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

जब JavaScript से PHP पृष्ठ पर क्वेरी पहुँचती है तो यह होता है:

  • PHP दस्तावेज़ के content-type को 'text/xml' के रूप में सेट करें
  • PHP दस्तावेज़ को 'no-cache' के रूप में सेट करें, ताकि कैश को रोका जा सके
  • HTML पृष्ठ से भेजे गए डाटा को $q वेरियेबल में सेट करें
  • PHP द्वारा MySQL सर्वर से कनेक्शन खोलें
  • विशिष्ट id के साथ 'user' खोजें
  • डाटा को एक एक्सएमएल दस्तावेज़ के रूप में आउटपुट करें