RSS читатель AJAX с PHP

RSS-ридер используется для чтения RSS Feed.

RSS позволяет быстро просматривать новости и обновления.

AJAX RSS Reader

В следующем примере AJAX мы покажем RSS-ридер, через который содержимое RSS загружается на страницу без перезагрузки.

Выберите RSS-новостную подписку из списка ниже

Выберите RSS-Feed:

Здесь перечислены RSS Feed.

Этот пример включает три элемента:

  • Простая HTML форма
  • JavaScript
  • PHP страница

HTML форма

Это HTML страница. Она содержит простую HTML форму и ссылку на выполнение JavaScript файла:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Select an 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 Feed will be listed here.</b></div></p>
</body>
</html>

Пример的解释 - HTML-форма

Как вы видите,上面的 HTML-страница содержит простую форму с выпадающим списком.

Как работает форма:

  1. Когда пользователь выбирает элемент из выпадающего списка, срабатывает событие
  2. Когда срабатывает событие, выполняется функция showRSS()

Под формой находится <div> с именем "rssOutput". Он используется в качестве маркера для данных, возвращаемых функцией showRSS().

JavaScript

Код JavaScript хранится в файле "getrss.js", который подключен к HTML-документу:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp = GetXmlHttpObject();
 if (xmlHttp == null)
  {
  alert("Браузер не поддерживает HTTP-запросы");
  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
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Интернет-Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
возвращает xmlHttp;
}

Пример объяснения:

Функции stateChanged() и GetXmlHttpObject с Запросы AJAX с PHP Примеры в этом разделе такие же.

Функция showRSS()

Эта функция выполняется каждый раз, когда выбирается элемент в выпадающем списке:

  1. Определение url (имя файла), отправляемого на сервер
  2. Добавление параметра (q) к url, содержащего选定ное значение из выпадающего списка
  3. Добавление случайного числа, чтобы предотвратить кэширование файла сервером
  4. Вызов функции GetXmlHttpObject для создания объекта XMLHTTP и告知 объекту выполнять функцию stateChanged при наступлении изменений
  5. Открываем XMLHTTP по заданному url
  6. Запуск HTTP запроса к серверу

PHP страница

Серверная страница, которая вызывает код JavaScript, это файл PHP с именем "getrss.php":

<?php
//получение параметра q из URL
$q=$_GET["q"];
//узнайте,哪个源被选中
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);
//получение элементов из "<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;
//вывод элементов из "<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-фид был выбран
  2. Создать объект XML DOM для выбранного RSS-фида
  3. Найти и вывести элементы из RSS-канала
  4. Перебор элементов первых трех RSS-проектов и вывод их