مثال responseXML با AJAX و PHP

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

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

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

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

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

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

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

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

　

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

  • داده‌بانک MySQL
  • فرم ساده HTML
  • جاوااسکریپت
  • صفحه PHP

داده‌بانک

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

شناسه نام نام خانوادگی سن سرا شغل
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 یک لیست پایین است که ارزش نام属性 آن "users" است و گزینه‌های آن با فیلد id پایگاه داده مطابقت دارد
  • در زیر فرم چندین عناصر <span> وجود دارد که به عنوان جایگزین‌های مختلف ارزش‌هایی که دریافت می‌کنیم استفاده می‌شوند
  • وقتی کاربر گزینه خاصی را انتخاب می‌کند، فنکشن "showUser()" اجرا می‌شود. اجرای این فنکشن توسط رویداد "onchange" تحریک می‌شود

به عبارت دیگر، هر بار که کاربر ارزشی را در لیست پایین تغییر می‌دهد، فنکشن showUser() اجرا می‌شود و نتیجه را در عناصر <span> مشخص شده چاپ می‌کند.

جاوااسکریپت

این کد جاوااسکریپت در فایل "responsexml.js" ذخیره شده است:

ورای متغیر xmlHttp
فنکشن شوی اُس(استر)
 { 
 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;
 }
}
توابع GetXmlHttpObject();
 { 
 var objXMLHttp=null;
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest();
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 return objXMLHttp;
 }

توضیح مثال:

توابع showUser() و GetXmlHttpObject با مثال پایگاه داده MySQL با AJAX و PHP مثال‌های این بخش مشابه هستند. شما می‌توانید توضیحات مربوطه را در آن‌ها ببینید.

توابع stateChanged()

اگر یک پروژه از لیست کشویی انتخاب شود، این تابع اجرا می‌شود:

  1. با استفاده از تابع responseXML، متغیر "xmlDoc" به عنوان یک مستند XML تعریف می‌شود
  2. داده‌ها از این مستند XML گرفته می‌شوند و در "span" عناصر صحیح قرار می‌گیرند

صفحه PHP

این صفحه سرور که توسط JavaScript فراخوانی می‌شود، یک فایل PHP ساده به نام "responsexml.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 ارسال می‌شود، اتفاق می‌افتد:

  • content-type document PHP به "text/xml" تنظیم می‌شود
  • دокумент PHP به "no-cache" تنظیم می‌شود تا از ذخیره کردن در حافظه جلوگیری شود
  • داده‌هایی که از صفحه HTML ارسال می‌شوند برای تنظیم متغیر $q استفاده می‌شوند
  • PHP اتصال به سرور مایاسکول باز می‌کند
  • یاب و "user" با id مشخص یاب
  • داده‌ها به صورت مستند XML خروجی داده می‌شوند