PHP ਅਤੇ AJAX XML ਉਦਾਹਰਣ

AJAX XML ਨਾਲ ਇੰਟਰੈਕਟਿਵ ਸੰਚਾਰ ਹੋ ਸਕਦਾ ਹੈ。

AJAX XML ਉਦਾਹਰਣ

ਹੇਠ ਦੇ AJAX ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਾਂਗੇ ਕਿ ਵੈੱਬਸਾਈਟ ਕਿਵੇਂ AJAX ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ XML ਫਾਇਲ ਤੋਂ ਸੂਚਨਾ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ。

ਹੇਠ ਦੇ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਸੀਡੀ ਚੁਣੋ

ਸੀਡੀ ਸੂਚਨਾ ਇੱਥੇ ਸੂਚੀਬੱਧ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਤਿੰਨ ਪੇਜ਼ਾਂ ਸ਼ਾਮਲ ਹਨ:

  • ਇੱਕ ਸਧਾਰਨ 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 info will be listed here.</b></div>
</p>
</body>
</html>

ਉਦਾਹਰਣ ਵਿਸਥਾਰ:

ਜਿਵੇਂ ਤੁਸੀਂ ਦੇਖਿਆ ਹੋਵੇਗਾ, ਇਹ ਸਿਰਫ਼ ਇੱਕ ਸਧਾਰਨ HTML ਫਾਰਮ ਹੈ, ਜਿਸ ਵਿੱਚ "cds" ਨਾਮ ਦਾ ਲੰਘਦਾਰ ਸੂਚੀ ਹੈ。

ਫਾਰਮ ਤੋਂ ਨੀਚੇ ਦਾ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ "txtHint" ਨਾਮ ਦਾ ਇੱਕ div ਹੈ। ਇਹ div ਵੈਬ ਸਰਵਰ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਸੂਚਨਾ ਦਾ ਜਗ੍ਹਾਂਦਾਰ ਹੈ。

ਜਦੋਂ ਉਪਭੋਗਤਾ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹੈ, ਤਾਂ "showCD" ਨਾਮ ਦਾ ਫੰਕਸ਼ਨ ਚਲਾਉਣ ਦਾ ਕੰਮ ਹੁੰਦਾ ਹੈ। ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਚਲਾਉਣ ਦਾ ਇਰਾਦਾ "onchange" ਈਵੈਂਟ ਵਲੋਂ ਹੁੰਦਾ ਹੈ。

ਮਤਲਬ, ਜਦੋਂ ਉਪਭੋਗਤਾ ਨੂੰ ਲੰਘਦਾਰ ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਮੁੱਲ ਬਦਲਦਾ ਹੈ, ਤਾਂ showCD ਫੰਕਸ਼ਨ ਚਾਲੂ ਹੁੰਦਾ ਹੈ。

XML ਫਾਇਲ

XML ਫਾਇਲ ਹੈ "cd_catalog.xml“. ਇਹ ਫਾਇਲ ਸੀ.ਡੀ. ਸੰਗ੍ਰਹਿ ਬਾਰੇ ਸੂਚਨਾ ਹੈ।

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
 {
 // ਫਾਇਰਫਾਕਸ, ਓਪਰਾ 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 ਬੇਨਤੀ ਭੇਜੋ

PHP ਪੰਨਾ

ਇਹ ਜਿਸਦੀ ਮਦਦ ਨਾਲ JavaScript ਦੁਆਰਾ ਬੁਲਾਇਆ ਜਾਂਦਾ ਸੇਵਾ ਪੰਨਾ, 'getcd.php' ਨਾਮ ਦਾ ਸਧਾਰਨ 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 />");
  } 
}
?>

مثال توضیح دینا

جب جاوااسکریپت کی جانب سے پیچیڈ سے پیچیڈ پیج پر درخواست کی جاتی ہے تو،

  1. PHP "cd_catalog.xml" فائل کا ایکسمل ڈوم انٹیٹی فائنل بنا رہا ہے
  2. تمام "artist" عناصر کو لوپ میں لایا جاتا ہے (nodetypes = 1)، جس کا نام جاوااسکریپت کی جانب سے فراہم کردہ اعداد کے ساتھ مطابقت رکھتا ہے
  3. CD میں شامل صحیح آرٹسٹ کو تلاش کیا جاتا ہے
  4. آلبم کی معلومات کو باہر لایا جاتا ہے اور "txtHint" نمائش کار میں بھیج دی جاتی ہے