مثال responseXML با AJAX و PHP

AJAX می‌تواند برای بازگرداندن اطلاعات داده‌بان به فرمت XML استفاده شود.

مثال داده‌بان AJAX به XML (توضیح تست: این مثال کار نمی‌کند)

در این مثال AJAX، ما نشان می‌دهیم که چگونه یک وب‌سایت می‌تواند اطلاعاتی از داده‌بان MySQL بخواند، داده‌ها را به مستند XML تبدیل کند و این مستند را در مکان‌های مختلفی از صفحه استفاده کند.

این مثال با مثال "PHP AJAX Database" در بخش قبلی بسیار مشابه است، اما یک تفاوت بزرگ وجود دارد: در این مثال، ما از طریق استفاده از تابع responseXML از صفحه PHP داده‌های فرمتی XML دریافت می‌کنیم.

دریافت مستقیم مستند XML به عنوان پاسخ، به ما امکان می‌دهد تا چندین مکان از صفحه را به‌روزرسانی کنیم، نه فقط یک خروجی PHP را دریافت و نمایش دهیم.

در این مثال، ما از اطلاعاتی که از داده‌بان دریافت می‌کنیم برای به‌روزرسانی چندین علامت <span> استفاده خواهیم کرد.

یک نام را در لیست کشویی انتخاب کنید

لطفاً یک کاربر را انتخاب کنید:

　

این ستون از چهار عنصر تشکیل شده است:

  • داده‌بان MySQL
  • فرم ساده HTML
  • JavaScript
  • PHP page

داده‌بان

داده‌بانهای مورد استفاده در این مثال به این شکل به نظر می‌رسند:

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
 }

Example explanation:

showUser() and GetXmlHttpObject functions with مثال پایگاه داده MySQL با AJAX و PHP 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 executes:

  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 by JavaScript is a simple PHP file named "responsexml.php".

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

Example explanation:

When a query is sent from JavaScript to the PHP page, the following occurs:

  • PHP document's content-type is set to "text/xml"
  • PHP document is set to "no-cache" to prevent caching
  • Set the $q variable with data sent by an HTML page
  • PHP opens a connection to the MySQL server
  • Find a "user" with a specified id
  • Output data as an XML document