پی ایچ پی اور ایجیکس ایکس ایم ال مثال

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> 
Select a 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" نام کا درجہ بندی ہے.

فرم کے نیچے کا پاراگراف میں "txtHint" نام کا ایک div ہے. یہ div ویکس پیئرس سے حاصل کی گئی اعداد و شمار کا نمائندہ ہے.

جب بلاور کسی بات کو منتخب کردیگا تو "showCD" نام کی فنکشن کو چلایا جائے گا. اس فنکشن کا چلنا onchange ایونٹ کی وجہ سے ہوتا ہے.

مزید برآمد، جب بلاور درجہ بندی میں کسی بھی چیزی کو تبدیل کردیگا، تو showCD فنکشن کو بلا دیا جائے گا.

XML فائل

XML فائل "cd_catalog.xml". اس فائل میں CD مجموعے کے بارے میں معلومات شامل ہیں.

JavaScript

یہ "selectcd.js" فائل میں ذخیرہ کی گئی JavaScript کوڈ ہے:

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
 {
 // فائرفاکس، آپریا 8.0+، سافری
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // انٹرنیٹ ایکسپلورر
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

مثال توجیہ:

stateChanged() اور GetXmlHttpObject فونکشن پچھلے سیکشن میں کی جاتی ہیں، آپ میں پچھلے صفحے میں کی جاتی ہیں، وہاں کا تعریف دیکھ سکتے ہیں。

showCD() فونکشن

اگر درج کیا جانے والا سلیکٹ آئیٹم منتخب کیا گیا تو فونکشن چل جاتا ہے:

  1. GetXmlHttpObject فونکشن کو کال کرکے XMLHTTP آئی او بنتا ہے
  2. سرور کو بھیجنا والی URL (فائل نام) کی تعریف کی جاتی ہے
  3. URL میں درج کیا جاتا ہے، پڑاؤ سے لیندی جانے والی پارامتر (q)
  4. ایک رینڈم نمبر اضافے کیاجاتا ہے، تاکہ سرور کا فائل کا کچا استعمال نہ کیا جائے
  5. وقتی واقعیہ بجلی جائے تو stateChanged کال کیا جاتا ہے
  6. دینے والی URL کے ذریعے XMLHTTP آئی او کھولنا
  7. سرور کو ایچ تی پی رکرسٹ (HTTP) درخواست بھیجنا

پیچی پیچی صفحہ

یہ سرور صفحہ جو جاوا اسکریپٹ کے ذریعے بلاک کیا جاتا ہے، ایک سادہ پیچی پیچی فائل 'getcd.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++)
{
//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($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

توضیحات مثال

وقتی درخواست از جاوااسکریپت به صفحه PHP ارسال می‌شود، این اتفاق می‌افتد:

  1. PHP یک شیء XML DOM برای ایجاد فایل "cd_catalog.xml" ایجاد می‌کند
  2. تمام عناصر "artist" را حلقه کنید (nodetypes = 1)، و نام‌هایی که با داده‌های ارسالی جاوااسکریپت مطابقت دارند را پیدا کنید
  3. CD حاوی هنرمند صحیح را پیدا کنید
  4. اطلاعات آلبوم را پیدا کرده و به جایگاه "txtHint" ارسال کنید