مثال responseXML با AJAX و PHP

يمكن استخدام AJAX لاسترداد معلومات قاعدة البيانات بتنسيق XML.

مثال AJAX Database إلى XML (ملاحظة الاختبار: لم يتم تنفيذ هذه الوظيفة بعد)

في هذا المثال AJAX، سنعرض كيف يمكن للصفحة من قراءة المعلومات من قاعدة البيانات MySQL، تحويل البيانات إلى وثيقة XML، واستخدام هذه الوثيقة في مواقع متعددة لعرض المعلومات.

هذا المثال يشبه المثال الذي ذكرناه في القسم السابق "PHP AJAX Database"، ولكن هناك فرق كبير: في هذا المثال، نحصل على بيانات XML الشكل من صفحة PHP باستخدام دالة responseXML.

استقبال وثيقة XML كردة فعل، يمنحنا القدرة على تحديث مواقع متعددة في الصفحة، وليس فقط عرض مخرجات PHP.

في هذا المثال، سنستخدم المعلومات التي نحصل عليها من قاعدة البيانات لتحديث عدة عناصر <span>.

اختر اسمًا من القائمة المنسدلة

يرجى اختيار مستخدم:

　

هذا العنصر يتكون من أربعة عناصر:

  • قاعدة بيانات MySQL
  • نموذج HTML بسيط
  • JavaScript
  • صفحة PHP

قاعدة البيانات

يبدو قاعدة البيانات التي سنستخدمها في هذا المثال كالتالي:

id الاسم الأول اسم العائلة العمر مدينة الأصل Job
1 Peter Griffin 41 Quahog مصنع البيرة
2 Lois Griffin 40 Newport مدرس بيانو
3 Joseph Swanson 39 Quahog مسؤول الشرطة
4 Glenn Quagmire 41 Quahog Pilot

نموذج 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> المحدد.

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 مثال پایگاه داده 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 页面时，会发生：

  • PHP 文档的 content-type 被设置为 "text/xml"
  • PHP 文档被设置为 "no-cache"，以防止缓存
  • 用 HTML 页面送来的数据设置 $q 变量
  • PHP 打开与 MySQL 服务器的连接
  • 找到带有指定 id 的 "user"
  • 以 XML 文档输出数据