Простой RSS-reader средствами jQuery

Простой RSS-reader средствами jQuery

Сегодня мы сделаем очень простую rss-читалку с помощью jQuery.

Внимательный читатель сможет почерпнуть для себя, как надо парсить rss feed, а еще забрать домой простые прокси-странички на asp.net и php.

Поставим задачу следующим образом: нам надо с некоего сайта считать рсс и показать зрителю.

Надо понимать, что к внешним рсс-фидам мы не можем просто так обращаться, если в браузере не установлены соответствующие правила безопасности, поэтому нам понадобится локальный серверный прокси-файл, который будет считывать фид и давать его нам.

Начнем.

Страница. Проще некуда:

<img src="files/images/ajax-loader.gif" id="indicator" alt="загрузка" />
<div id="rssContent"></div>
 

При загрузке страницы запускаем индикатор загрузки и функцию getRSS, которая параметром принимает адрес rss-фида. Для примера, возьмем блог jQuery

 $(document).ready(function() {
$('#indicator').show();
getRSS("http://feeds2.feedburner.com/jquery/");
})

Функция getRss выключает индикатор загрузки, парсит получаемый XML и заполняет блок #rssContent:

 function getRSS(feedUrl) {
$("#rssContent").empty();
$.get('proxy.ashx?url=' + feedUrl, function(data) {
$('#indicator').hide();
$(data).find('item').each(function() {
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var description = $(this).find('description').text();
var pubDate = $(this).find('pubDate').text();
var html;
html = "<div class="entry"><h2 class="postTitle">" + "<a href="" + url + "" target="_blank">"+title+"</a></div>" + "</h2>";
html += "<em class="date">" + pubDate + "</em>";
html += "<div class="description">" + description + "</div>";
$('#rssContent').append($(html));
});
});
}

 

Код простенького ashx хэндлера такой:

 <%@ WebHandler Language="C#" Class="proxy" %>

using System;
using System.Web;
using System.Net;
using System.IO;

public class proxy : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
string requestUriString = context.Request.QueryString["url"];
if (requestUriString != "")
{
WebRequest req = HttpWebRequest.Create(requestUriString);
WebResponse resp = req.GetResponse();
StreamReader myStreamReader = new StreamReader(resp.GetResponseStream());

string p = myStreamReader.ReadToEnd();
context.Response.ContentType = "text/xml";
context.Response.Write(p);
}
}

public bool IsReusable
{
get
{
return false;
}
}
}

 А если бы нам захотелось сделать это на пхп, мы бы сделали это как-то так:

  <?php
header('Content-type: application/xml');
$handle = fopen($_REQUEST['url'], "r");

if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
} ?>

 

Смотрим демо и загружаем готовенькое для asp.net или для php.

Жду ваших вопросов в комментах.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 25

Nalivaeff
Плохо что получаемый контент не индексируется
Павел
Если использовать PHP, то можно как-то так:
<?php
  header('Content-type: application/xml');
  echo file_get_contents($_REQUEST['url']);
?>  
#
Павел
nuxdie
Отличная статья!
Как раз то, что я искал!.)
Спасибо.
CrabNet
Cпасибо за статью! Отличная статья!
Вот еще бы картинки бы парсить из ленты. Может кто подскажет
как это сделать?

P.S. Я рад что попал на этот сайт - много нашел для себя интересного. Буду постоянным читателем. Всем спасибо.
#
CrabNet
Andrey
Спасибо за статью.
А что нужно "подкрутить" в Firefox, чтоБ импортировать новости напрямую, без прокси?
#
Andrey
Evgenij
Андрей, я что-то не уловил смысл вопроса...
Andrey
"Надо понимать, что к внешним рсс-фидам мы не можем просто так обращаться, если в браузере не установлены соответствующие правила безопасности"

Попробовал написать скрипт без прокси - так и есть... "свой" RSS поток грузится, а вот взять с другого сайта не получается. Где в лисе выставить нужную безопасность не нашел.
#
Andrey
Evgenij
В FF наверняка где-то есть, но я тоже не нашел. Зато нашел в IE.
Security settings -> Scripting -> Enable XSS filter
Надо поставить на disable.

Только я этого делать не советую, так как Ваш браузер станет уязвимым для XSS-атак.
Зачем это Вам вообще?
Andrey
хотел на бесплатном хосте сделать страничку а-ля социальных закладок для себя, ток чтобы к каждой закладке еще и RSS загружался, т.е. закладка а к ней новости с сайта - думаю было бы удобно.
#
Andrey
Evgenij
Так и загрузите на этот бесплатный хост прокси.
php и asp.net есть в статье.
Andrey
низя :( т.е. хостер не дает использовать никаких серверных скриптов, бд и т.д. А искать другой хостинг не хочется - это ведь просто идея и что из нее получится непонятно ;)
#
Andrey
fealza
а можно и напрямую $.get('rss.xml',....) указать - и все работает!
evgenij
2fealza
На своем домене - безусловно. Здесь описывались более сложная ситуация
#
evgenij
umvidocq
нужно, чтобы скрипт сохранял где-нибудь на сервере спарсенные новости - это возможно?
Evgenij
Со новостями, полученными на сервере можно делать что угодно. Сохранять, кэшировать и т.д.
umvidocq
Ок, спасибо, попробую - давно искал, что-нибудь подобное
Андрей
Как ограничить количество выводимых фидов?
#
Андрей
Евгений
Андрей, вы можете передавать параметром прокси-файлу, сколько элементов запрашивать. И уже на серверной часте будете решать сколько и отдавать.
9GYAR
Может кто сказать,как сделать чтоб показывал только одну статью,и еще подскажите как мне информацию взять с другого сайта,я изменяю в script.js в нижней строчке сайт,но он только показывает белую страницу
Zaktus
Статья оказала неоценимую своевременную помощь!
VoVaVc
Пробовал передавать большие объемы данных из xml на обработку js, в firefox все работает нормально, а в chrome возвращает пустое значение, может правда проблема в имени с двоеточием, можете помочь с проблемой? какое максимальное количество передаваемых данных?
#
VoVaVc
Евгений
Парни... ну подскажите, а то гуглить тему уже сил нет... Есть сайт, написанный на html(редактор geany) и на этом сайте есть форум в отдельном каталоге /forum. В общем есть у форума функция формирования ленты новостей в формате АТОМ. Хочу на главной странице сайта поместить читалку RSS и показывать данные с форума. (других вариантов показать форумные новости я не увидел). Скриптов, легко встраиваемых в html код валом, но они все поддерживают исключительно формат RSS1 или RSS2, но ни одна из ни АТОМа не поддерживает. Может подскажите решение? можете посмотреть сам сайт и сам форум: http://zlatovlasta.info
faton12
мне кажется или тут закрывающиеся теги div и h2 перяпутаны местами?
html = "" + ""+title+"" + "";
#
faton12
slavutici
как передавать параметром прокс фаилу чтоб ограничить количество фидов?
#
slavutici

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler