قراءة RSS و AJAX و PHP

قراء RSS يستخدمون لقراءة قنوات RSS.

RSS يسمح بالتصفح السريع للأخبار والتحديثات.

قراء RSS AJAX

في هذا المثال AJAX، سنعرض قارئ RSS، حيث يتم تحميل محتوى RSS إلى صفحة الويب دون إعادة تحميل الصفحة.

اختر مشترك RSS新闻 في القائمة التالية

اختر قناة RSS-Feed:

سيتم عرض قنوات RSS هنا.

هذا المثال يشمل ثلاثة عناصر:

  • نموذج HTML بسيط
  • جافا سكريبت
  • صفحة PHP

نموذج HTML

هذه صفحة HTML. تحتوي على نموذج HTML بسيط وروابط تنفيذ ملف JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
اختر قناة RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>موفر RSS سيتم عرضه هنا.</b></div></p>
</body>
</html>

توضيح الأمثلة - نموذج HTML

كما ترون، يحتوي الصفحة HTML العليا على نموذج HTML بسيط يحتوي على قائمة منسدلة

كيف يعمل النموذج:

  1. عندما يختار المستخدم خيارًا من القائمة المنسدلة، يتم إطلاق حدث
  2. عندما يتم إطلاق الحدث، يتم تنفيذ وظيفة showRSS()

في أسفل النموذج هناك <div> يُدعى "rssOutput"، ويُستخدم كمكان حجز للبيانات التي تعود من وظيفة showRSS().

جافا سكريبت

كود الجافا سكريبت يتم تخزينه في "getrss.js"، وهو متصل بملف HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  }
 var url="getrss.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("rssOutput")
  .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 الوظائف مع طلبات AJAX و PHP مثال هذا القسم هو نفسه.

دالة showRSS()

تُنفذ هذه الدالة عند اختيار خيار من القائمة المنسدلة

  1. تحديد عنوان URL (اسم الملف) الذي سيُرسل إليه
  2. إضافة المعامل (q) إلى الرابط، حيث يكون المحتوى خيارًا من القائمة المنسدلة
  3. إضافة عدد عشوائي لتجنب تخزين ملف الخادم
  4. إجراء مكالمة لـ GetXmlHttpObject لتكوين objXMLHTTP، وإعلامه بتنفيذ دالة stateChanged عند التغيير
  5. فتح XMLHTTP باستخدام الرابط المحدد
  6. إرسال طلب HTTP إلى الخادم

صفحة 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://news.google.com/news?ned=us&topic=h&output=rss");
 }
elseif($q=="MSNBC")
 {
 $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
 }
$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>");
 }
?>

例子解释：

当一个选项从 JavaScript 发送时，会发生：

  1. PHP 找出哪个 RSS feed 被选中
  2. 为选中的 RSS feed 创建 XML DOM 对象
  3. 找到并输出来自 RSS 频道的元素
  4. 遍历前三个 RSS 项目中的元素，并进行输出