পিএইচপিতে AJAX এবং XML এর ব্যবহার
XML এর সাথে ইন্টারেক্টিভ(interactive) এবং ডাইনামিক যোগাযোগ তৈরি করার জন্য আমরা AJAX ব্যবহার করি। আপনি AJAX ব্যবহার করে XML থেকে সম্পূর্ণ তথ্য কুয়েরি না করে, বরং আপনি ক্ষুদ্র ক্ষুদ্র তথ্য কুয়েরি করতে পারেন।
AJAX এবং XML এর উদাহরণ
আমাদের এই উদাহরণে দেখবো, AJAX ব্যবহার করে কিভাবে আমরা XML থেকে সম্পূর্ণ তথ্য অ্যাক্সেস না করে ক্ষুদ্র ক্ষুদ্র তথ্য অ্যাক্সেস করতে পারি। উদাহরণের ব্যাখ্যার জন্য আমরা সম্পূর্ণ কোড তিনভাগে ভাগ করেছিঃ এইচটিএমএল কোড, AJAX কোড এবং পিএইচপি কোড।
<!DOCTYPE html>
<html>
<head>
<title>পিএইচপি AJAX এবং XML এর উদাহরণ</title>
</head>
<body>
<form>
একটি বই সিলেক্ট করুনঃ
<select name="books" onchange="showBookDetails(this.value)">
<option value="">বই সিলেক্ট করুনঃ</option>
<option value="বিষাদ সিন্ধু">বিষাদ সিন্ধু</option>
<option value="উজান">উজান</option>
<option value="মেঘ বৃষ্টি আলো">মেঘ বৃষ্টি আলো</option>
<option value="ভালোবেসে তোমাকে">ভালোবেসে তোমাকে</option>
<option value="আনন্দ সহচরী">আনন্দ সহচরী</option>
<option value="ইতি...">ইতি...</option>
</select>
</form>
<div id="bookdetails">বইয়ের সারাংশ এখানে আসবে...</div>
</body>
</html>
উপরের উদাহরণে ইউজার যখন ড্রপডাইন তালিকা থেকে একটি বইয়ের নাম সিলেক্ট করবে, তখন showBookDetails() ফাংশনটি সম্পাদিত হবে এবং উক্ত বইয়ের বিস্তারিত তথ্য প্রদর্শিত হবে। onchange ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।
<script>
//এই ফাংশনের মধ্য দিয়ে ড্রপ-ডাউন লিস্ট থেকে স্ট্রিং/বইয়ের নাম অতিক্রম করানো হয়।
function showBookDetails(string) {
//কোন বইয়ের নাম অতিক্রম করানো না হলে প্রোগ্রামের কন্ট্রোল ফাংশন থেকে বের হয়ে যায়।
if (string == "") {
document.getElementById("bookdetails").innerHTML="";
return;
}
//বইয়ের নাম অতিক্রম করানো হলে request নামে একটি অবজেক্ট তৈরি হয়।
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
// Microsoft(internet explore) এর জন্য request অবজেক্ট তৈরি
request = new ActiveXObject("Microsoft.XMLHTTP");
}
//সার্ভার কার্য সম্পাদনের জন্য প্রস্তুত হলে এই অবজেক্টটি একটি এনোনিমাস ফাংশন তৈরি করে।
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status==200) {
// উপরের শর্ত true হলে নির্বাচিত বইয়ের তথ্য দিয়ে bookDetails আইডি বিশিষ্ট div এলিমেন্টটি পূরন হয়।
document.getElementById("bookdetails").innerHTML = request.responseText;
}
}
// সার্ভারে অবস্থিত "booksummary.php" ফাইলে p স্ট্রিং(বই) এর তথ্যের জন্য অনুরোধ পাঠায়।
request.open("GET","booksummary.php?p=" +string, true);
request.send();
}
</script>কোডের ব্যাখ্যাঃ
প্রথমেই আমরা চেক করে নিব ইউজার কোনো বইয়ের নাম সিলেক্ট করেছে কিনা। যদি না করে থাকে তাহলে ফাংশনটি সম্পাদিত হবে না।
অপরদিকে ইউজার যদি কোনো বইয়ের নাম সিলেক্ট করে থাকে তাহলে নিম্নের ঘটনা সমুহ ঘটবেঃ
- একটি XMLHttpRequest অবজেক্ট তৈরি হবে।
- কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
- সার্ভারে অবস্থিত "booksummary.php" ফাইলে তথ্যের জন্য অনুরোধ পাঠায়।
- লক্ষ্য করুন আমরা "booksummary.php" ফাইলের সাথে একটি প্যারামিটার p যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
- string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।
পিএইচপি ফাইল
উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(booksummary.php) এর সাথে যোগাযোগ সৃষ্টি করা হয়।
পিএইচপি ফাইলটি XML ফাইল(books.xml) কে লোড করবে এবং XML ফাইল থেকে কাংখিত তথ্য কুয়েরি করবে। পরিশেষে প্রাপ্ত ফলাফল এইচটিএমএল ফর্ম্যাটে ব্রাউজারে প্রদর্শিত হবেঃ
<?php
// AJAX কর্তৃক পাঠানো বইয়ের নাম গ্রহণ করবে।
$p = $_GET["p"];
// xmlDocument নামে একটি ডোম অবজেক্ট তৈরি হবে।
$xmlDocument = new DOMDocument();
//XML ফাইল লোড হবে।
$xmlDocument->load("books.xml");
$summary = $xmlDocument->getElementsByTagName('summary');
for ($i=0; $i<=$summary->length-1; $i++) {
if ($summary->item($i)->nodeType==1) {
if ($summary->item($i)->childNodes->item(0)->nodeValue == $p) {
$list = ($summary->item($i)->parentNode);
}
}
}
$book = ($list->childNodes);
for ($i=0;$i<$book->length;$i++) {
if ($book->item($i)->nodeType==1) {
echo("<b>" . $book->item($i)->nodeName . ":</b> ");
echo($book->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>কোডের ব্যাখ্যা
জাভাস্ক্রিপ্ট(AJAX) থেকে কুয়েরিটি যখন পিএইচপি ফাইলে পাঠানো হয় তখন নিম্নের ঘটনাসমুহ ঘটেঃ
- AJAX কর্তৃক পাঠানো বইয়ের নাম গ্রহন করবে।
- একটি XML ডোম(DOM) অবজেক্ট তৈরি করে
- সকল <title> এলিমেন্ট এর মধ্য থেকে AJAX কর্তৃক পাঠানো বইয়ের তথ্য খুজে বের করে।
- বইয়ের তথ্য এইচটিএমএল আকারে ব্রাউজারে ফেরত পাঠায়
আমাদের উদাহরণে ব্যবহৃত books.xml ফাইলটি দেখুন।
আপনি উপরের উদাহরণের এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড গুলোর সমন্বয়ে একটি ফাইল এবং পিএইচপি কোডগুলোর জন্য একটি ফাইল তৈর করে Ajax সম্বলিত এইচটিএমএল ফাইলটি রান করালে বাউজারে নিম্নের ন্যায় ফলাফল দেখবেন।
AJAX এর প্রয়োগ দেখার জন্য ড্রপ ডাউন লিস্ট থেকে যেকোনো একটি বই এর নাম সিলেক্ট করুনঃ
