PHP এবং AJAX XML ইনস্ট্যান্স
- পূর্ববর্তী পৃষ্ঠা AJAX Suggest
- পরবর্তী পৃষ্ঠা AJAX ডেটাবেস
AJAX XML-এর সঙ্গে ইন্টারএক্টিভ কমিউনিকেশন সম্ভব
AJAX XML উদাহরণ
নিচের 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 হল ডাটা এবং web সার্ভার থেকে পাওয়া data-এর প্রদর্শনের জন্য একটি placeholder
যখন ব্যবহারকারী ডাটা চিহ্নিত করেন, তখন "showCD" নামক ফাংশন বাস্তবায়িত হয়। এই ফাংশনের বাস্তবায়ন "onchange" ইভেন্ট দ্বারা প্রেরণিত হয়
অর্থাৎ, যখন ব্যবহারকারী ড্রপডাউন লিস্টের মান পরিবর্তন করেন, তখন showCD ফাংশন বিবেচিত হয়
XML ফাইল
XML ফাইল হল "cd_catalog.xml". এই ফাইলে সিড সংগ্রহের সম্পর্কিত তথ্য রয়েছে。
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
{
// 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;
}
উদাহরণ ব্যাখ্যা:
stateChanged() এবং GetXmlHttpObject() ফাংশনগুলি আগের অধ্যায়ের মতো, আপনি আগের পৃষ্ঠায় যে বিবরণ পেয়েছেন তা দেখতে পারেন。
showCD() ফাংশন
যদি ড্রপডাউন লিস্টের একটি অংশ নির্বাচিত হয়, তবে ফাংশন চালু হয়:
- GetXmlHttpObject() ফাংশন ব্যবহার করে XMLHTTP অবজেক্ট তৈরি করা
- সার্ভারের কাছে পাঠানো হওয়া URL-এর (নাম) নির্ধারণ
- URL-এ একটি ড্রপডাউন লিস্টের মাধ্যমে পারামিটার (q) যোগ করা হয়
- একটি স্বচ্ছতা সংখ্যা যোগ করে, যাতে সার্ভার ক্যাশেড ফাইল ব্যবহার না করে
- যখন ঘটনা সংঘটিত হলে stateChanged() কোড চালু হয়
- দেওয়া URL-এর মাধ্যমে XMLHTTP অবজেক্ট খোলা
- সার্ভারের কাছে HTTP রিকোর্ড পাঠানো হয়
PHP পৃষ্ঠা
এই জাভাস্ক্রিপ্ট-এর মাধ্যমে ক্রিয়াকরণ হওয়া সার্ভার পৃষ্ঠা, '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++)
{
//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 পৃষ্ঠাকে অনুরোধ করার সময় ঘটে:
- PHP "cd_catalog.xml" ফাইলের XML DOM অবজেক্ট তৈরি করা হয়
- সকল "artist" ইলেকট্রনমক্তকে (nodetypes = 1) পরিবর্তন করা হয়, JavaScript-এর পাঠানো ডাটা সঙ্গে মাটিলবন্ধন করা নাম খুঁজে পাওয়া হয়
- CD-এর সঠিক artist খুঁজে পাওয়া হয়
- album এর তথ্যটি বের করে "txtHint" স্থানটি পাঠানো হয়
- পূর্ববর্তী পৃষ্ঠা AJAX Suggest
- পরবর্তী পৃষ্ঠা AJAX ডেটাবেস
