مثال AJAX و XML في PHP

يمكن لـ AJAX التفاعل مع ملفات XML.

مثال AJAX XML

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

اختر CD من القائمة التالية أدناه

تسجيل معلومات CD هنا.

هذا المثال يشمل ثلاث صفحات:

  • نموذج HTML بسيط
  • ملف XML
  • ملف JavaScript
  • صفحة PHP

نموذج HTML

مثال أعلاه يحتوي على نموذج HTML بسيط، بالإضافة إلى رابط إلى JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
اختر أقراص مدمجة:
<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>سيتم عرض معلومات الأقراص المدمجة هنا.</b></div>
</p>
</body>
</html>

شرح المثال:

كما ترون، إنه نموذج HTML بسيط يحتوي على قائمة منسدلة تسمى "cds".

المقطع الذي يوجد تحت النموذج يحتوي على div يسمى "txtHint".

عندما يقوم المستخدم باختيار البيانات، يتم تنفيذ دالة "showCD" هذه الدالة يتم تنفيذها بواسطة أحداث "onchange".

بمعنى آخر، كلما قام المستخدم بتغيير قيمة القائمة المنسدلة، يتم استدعاء دالة showCD.

ملف XML

ملف XML هو "cd_catalog.xml". يحتوي هذا الملف على بيانات حول مجموعات الأقراص المدمجة.

JavaScript

هذا هو رمز JavaScript الموجود في ملف "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("المتصفح لا يدعم طلبات HTTP")
 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
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

شرح المثال:

دالة stateChanged() و دالة GetXmlHttpObject مشابهة للدوال في القسم السابق، يمكنك مراجعة الشرح في الصفحة السابقة.

دالة showCD()

إذا تم اختيار عنصر من القائمة المنسدلة، فإن الدالة تنفذ:

  1. استدعاء دالة GetXmlHttpObject لإنشاء ملف XMLHTTP
  2. تحديد URL لإرسالها إلى الخادم (اسم الملف)
  3. إضافة متغير يحتوي على محتوى القائمة المنسدلة (q) إلى URL
  4. إضافة عدد عشوائي لتجنب استخدام ملفات التخزين المؤقت للخادم
  5. استدعاء stateChanged عند تحفيز الحدث
  6. فتح ملف XMLHTTP باستخدام URL المحدد
  7. إرسال طلب HTTP إلى الخادم

صفحة PHP

هذه الصفحة الخادمة التي يتم استدعاؤها بواسطة JavaScript هي ملف PHP بسيط يُدعى "getcd.php".

هذه الصفحة مكتوبة بلغة PHP وتستخدم XML DOM لتحميل ملف XML "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 />");
  } 
}
?>

例子解释

当请求从JavaScript发送到PHP页面时，发生：

  1. PHP创建"cd_catalog.xml"文件的XML DOM对象
  2. 循环所有"artist"元素（nodetypes = 1），查找与JavaScript所传数据相匹配的名字
  3. 找到包含正确artist的CD
  4. 输出album的信息，并发送到"txtHint"占位符