مثال‌های AJAX و XML در PHP

AJAX می‌تواند به صورت تعاملی با فایل‌های XML ارتباط برقرار کند.

مثال AJAX XML

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

یک CD از لیست زیر انتخاب کنید

اطلاعات CD را در اینجا لیست می‌کنیم.

این مثال شامل سه صفحه است:

  • یک فرم HTML ساده
  • یک فایل XML
  • یک فایل JavaScript
  • یک صفحه PHP

فرم HTML

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

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
یک CD انتخاب کنید:
<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>اطلاعات CD در اینجا لیست خواهد شد.</b></div>
</p>
</body>
</html>

توضیح مثال:

همانطور که مشاهده می‌کنید، این فقط یک فرم ساده HTML است که دارای یک فهرست کشویی به نام "cds" است.

بخش پائینی فرم شامل یک div به نام "txtHint" است. این div به عنوان جایگزین برای داده‌هایی که از سرور وب دریافت می‌شوند استفاده می‌شود.

وقتی کاربر داده‌ها را انتخاب می‌کند، تابع "showCD" اجرا می‌شود. اجرای این تابع توسط رویداد "onchange" تحریک می‌شود.

به عبارت دیگر، هر بار که کاربر مقدار فهرست کشویی را تغییر دهد، تابع showCD فراخوانی می‌شود.

فایل XML

فایل XML به نام "cd_catalog.xmlاین فایل شامل داده‌های مربوط به مجموعه CD است.

JavaScript

این کد JavaScript در فایل "selectcd.js" ذخیره شده است:

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 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)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

توضیح مثال:

functions stateChanged() و GetXmlHttpObject مانند section قبلی هستند، می‌توانید توضیحات مربوطه را در صفحه قبلی مشاهده کنید.

function showCD()

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

  1. با فراخوانی GetXmlHttpObject function XMLHTTP object ایجاد می‌شود
  2. URL ارسالی به سرور (نام فایل) تعریف می‌شود
  3. پارامتر (q) با محتوای لیست کشویی به URL اضافه می‌شود
  4. یک عدد تصادفی اضافه می‌کند تا از استفاده از فایل‌های کاشته شده سرور جلوگیری شود
  5. وقتی که یک رویداد فعال می‌شود، stateChanged فراخوانی می‌شود
  6. XMLHTTP object را با استفاده از 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"占位符