AJAX را می توان برای ارتباط تعاملی با یک فایل XML استفاده کرد.
در ادامه مثالی برای استفاده از XML در ایجکس و زبان پی اچ پی خواهیم داشت . در این مثال کاربر از یک لیست کشویی، نام آلبوم موسیقی را انتخاب می کند و با کمک AJAX مشخصات کامل موسیقی را بدست آورده و نشان می دهیم.
طراحی فرم HTML و جاوا اسکریپت
در این مثال هنگامی که یک کاربر یک CD را در لیست کشویی بالا انتخاب می کند، یک تابع جاوااسکریپت به نام “showCD ()” اجرا می شود. این تابع توسط رویداد “onchange” فعال می شود:
<html>
<head>
<script>
function showCD(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>
در قطعه کد فوق می بینید که تابع showCD() زیر را انجام می دهد:
- بررسی می کند که آیا یک CD انتخاب شده است؟
- یک شیء XMLHttpRequest ایجاد می کند.
- تابعی ایجاد می کند که هنگام آماده شدن پاسخ سرور اجرا شود.
- درخواست را به یک فایل در سرور ارسال می کند
توجه داشته باشید که پارامتر (q) به URL اضافه می شود (با محتوای لیست کشویی)
کدنویسی فایل پی اچ پی
اسکریپت PHP که باید روی سرور قرارداشته باشد “getcd.php” نام دارد.
اسکریپت PHP فایل 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++) {
//Process only element nodes
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++) {
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>
هنگامی که درخواست CD از جاوا اسکریپت به صفحه پی اچ پی ارسال می شود، موارد زیر اتفاق می افتد:
- پی اچ پی یک شی XML DOM ایجاد می کند.
- تمام عناصر <artist> را پیدا می کند که با نام ارسالی از جاوا اسکریپت مطابقت دارند.
- اطلاعات آلبوم به خروجی فرستاده می شود.