استخدام AJAX مع تغذية RSS

By · · ·


تستخدم تغذية RSS لقراءة آخر الأخبار من أي موقع يتم الاشتراك به .



استخدام AJAX مع تغذية RSS


في المثال التالي سيتم اختيار احدى تغذيات RSS والتي سيتم تحميلها من السيرفر أو مباشرة من خلال رابط تغذية الموقع.

مثال مباشر لاستخدام AJAX مع تغذية RSS

مثال مشروح – صفحة HTML


عندما يختار المستخدم احدى أنواع التغذية من القائمة المنسدلة سيتم عمل الدالّة showResult() والذي بدوره مرتبط مع الحدث عند التغيير onchange .
<html>
<head>
<script type="text/javascript">
function showRSS(str)
{
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getrss.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select onchange="showRSS(this.value)">
<option value="">اختر موقع التعذية</option>
<option value="Google">دروس HTML</option>
<option value="MSNBC">المعهد العربي للبرمجة</option>
</select>
</form>
<br />
<div id="rssOutput">تم إنشاء تغذية Rss وهي مصنفةهنا</div>
</body>
</html>


يقوم الدالّة showResult() بما يلي :



  • فحص تغذية RSS عند اختياره .

  • إنشاء الكائن XMLHttpRequest .

  • إنشاء دالّة عندما تكون استجابة السيرفر جاهزة .

  • ارسال الطلب الى ملف على السيرفر .

  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .





ملف PHP


يتم استدعاء الصفحة من السيرفر من خلال الجافاسكربت في الأعلى من خلال صفحة PHP المسماة getrss.php :
<?php
//get the q parameter from URL
$q=$_GET["q"];//find out which feed was selected
if($q=="Google")
{
$xml=("http://www.w3arabiconline.com/feed");
}
elseif($q=="MSNBC")
{
$xml=("http://www.w3arabiconline.com/feed");
}
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

//get elements from "<channel>"
$channel=$xmlDoc->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;

//output elements from "<channel>"
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");

//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link
. "'>" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>


عند ارسال أمر التغذية من خلال الجافاسكربت عندها سيحدث مايلي :



  • فحص اي واحدة من التغذية تم اختيارها .

  • إنشاء كائن XML DOM جديد .

  • تحميل ملف RSS في متغير xml .

  • فك و إظهار العناصر من العنصر <channel> .

  • فك و إظهار العناصر من العنصر <item> .





ليست هناك تعليقات:

إرسال تعليق