AJAX এবং RSS Feed
RSS ফিড পড়ার জন্য RSS Reader ব্যবহার করা হয়।
AJAX ব্যবহার করে RSS Feed লোড
আমাদের এই উদাহরণে আমরা দেখবো কিভাবে AJAX এর মাধ্যমে একটি ওয়েব পেজকে পুনরায় লোড করা ছাড়াই RSS Feed লোড করা যায়।
এক্ষেত্রেও আমরা পূর্বের ন্যায় কোডসমূহকে তিন ভাগে বিভক্ত করবোঃ এইচটিএমএল কোড, জাভাস্ক্রিপ্ট(AJAX) কোড এবং পিএইচপি কোড। সুতরাং দেরি না করে চলুন কোডিং করা শুরু করি।
<!DOCTYPE html>
<html>
<head>
<title> পিএইচপি এবং AJAX ব্যবহার করে RSS Feed লোড </title>
</head>
<body>
<form>
<select onchange="showRSSFeed(this.value)">
<option value="">একটি আরএসএস ফিড সিলেক্ট করুনঃ </option>
<option value="google">গুগল বাংলা সংবাদ</option>
<option value="kalerkantha">কালের কণ্ঠ সংবাদ</option>
</select>
</form>
<br>
<div id="rssResult">আরএসএস(RSS) ফিড(Feed) সমুহ এখানে প্রদর্শিত হবে...</div>
</body>
</html>
উপরের উদাহরণে ইউজার যখন ড্রপডাইন তালিকা থেকে একটি আরএসএস(RSS) ফিড সিলেক্ট করবে, তখন showRSSFeed() ফাংশনটি সম্পাদিত হবে এবং সংবাদ শিরোনাম প্রদর্শিত হবে। onchange ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।
<script>
function showRSSFeed(string) {
if (string.length==0) {
document.getElementById("rssResult").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("rssResult").innerHTML = request.responseText;
}
}
request.open("GET","rssfeed.php?p=" +string, true);
request.send();
}
</script>কোডের ব্যাখ্যাঃ
প্রথমেই আমরা অপশন ভ্যালু সিলেক্ট করা হয়েছে কিনা string.length == 0 এর মাধ্যমে চেক করে নিব। যদি এটি ফাঁকা হয় তাহলে প্রোগ্রামের নিয়ন্ত্রণ showSuggestion() ফাংশন থেকে বের হয়ে যায়।
অপরদিকে যদি যেকোন একটি অপশন ভ্যালু সিলেক্ট করা হয় সেক্ষেত্রে নিম্নের ঘটনা গুলো ঘটবেঃ
- একটি XMLHttpRequest অবজেক্ট তৈরি করবে।
- কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
- সার্ভারে অবস্থিত "searchResult.php" ফাইলে তথ্যের জন্য একটি অনুরোধ পাঠাবে।
- লক্ষ্য করুন আমরা "searchResult.php" ফাইলের সাথে একটি প্যারামিটার p যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
- string ভ্যারিয়েবলটি সিলেক্ট বক্সের অপশন ভ্যালু ধারন করে।
পিএইচপি ফাইল
উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(rssfeed.php) এর সাথে যোগাযোগ সৃষ্টি করা হয়।
<?php
// লিংক থেকে প্যারামিটার ধারন করে
$p = $_GET["p"];
// কোন ফিডটি সিলেক্ট হয়েছে তা খুঁজে বের করে
if($p == "google") {
$data = ("https://news.google.com/news/rss/?ned=bn_bd&hl=bn");
}
elseif($p == "kalerkantha") {
$data = ("http://www.kalerkantho.com/rss.xml");
}
$xmlDocument = new DOMDocument();
$xmlDocument->load($data);
// চ্যানেল থেকে এলিমেন্ট ধারন করে
$channel = $xmlDocument->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
// চ্যানেল থেকে এলিমেন্ট গুলো আউটপুট দেয়
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br>");
echo($channel_desc . "</p>");
// আইটেম এলিমেন্ট গুলো আউটপুট দেয়
$xmlTag = $xmlDocument->getElementsByTagName('item');
for ($i = 0; $i <= 2; $i++) {
$item_title = $xmlTag->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link = $xmlTag->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_description = $xmlTag->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
echo ("<p><a href='" . $item_lin
. "'>" . $item_title . "</a>");
echo ("<br>");
echo ($item_description . "</p>");
}
?>জাভাস্ক্রিপ্ট যখন RSS Feed এর জন্য পিএইচপি ফাইলে অনুরোধ পাঠায় তখন নিম্নোক্ত প্রক্রিয়াসমূহ সম্পন্ন হয়ঃ
- প্রথমেই AJAX কর্তৃক পাঠান প্যারামিটার গ্রহণ করবে।
- কোন ফিডটি সিলেক্ট করা হয়েছে পরিক্ষা করে দেখবে।
- একটি XML DOM অবজেক্ট তৈরি করবে।
- $xml ভ্যাবিয়েবল এর RSS ডকুমেন্ট লোড করবে।
- <channel> এলিমেন্ট থেকে এলিমেন্টসমুহ খুঁজে বের করবে।
- <item> এলিমেন্ট থেকে এলিমেন্ট সমুহ খুঁজে বের করেবে।
আপনি উপরের উদাহরণের এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড গুলোর সমন্বয়ে একটি ফাইল এবং পিএইচপি কোডগুলোর জন্য একটি ফাইল তৈর করে Ajax সম্বলিত এইচটিএমএল ফাইলটি রান করালে বাউজারে নিম্নের ন্যায় ফলাফল দেখবেন।
AJAX এর মাধ্যমে আরএসএস(RSS) ফিড লোড করার জন্য যেকোন একটি সংবাদ সিলেক্ট করুনঃ
