使用 jQuery 解析 RSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/226663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parse RSS with jQuery
提问by Andy Brudtkuhl
I want to use jQuery to parse RSS feeds. Can this be done with the base jQuery library out of the box or will I need to use a plugin?
我想使用 jQuery 来解析 RSS 提要。这可以使用开箱即用的基本 jQuery 库来完成还是我需要使用插件？
回答by Andrew Childs
WARNING
警告
The Google Feed APIis officially deprecatedand doesn't work anymore!
Google Feed API已正式弃用，不再有效！
No need for a whole plugin. This will return your RSS as a JSON object to a callback function:
不需要整个插件。这会将您的 RSS 作为 JSON 对象返回给回调函数：
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
回答by Nathan Strutz
回答by David Hammond
For those of us coming to the discussion late, starting with 1.5 jQuery has built-in xml parsing capabilities, which makes it pretty easy to do this without plugins or 3rd party services. It has a parseXml function, and will also auto-parse xml when using the $.get function. E.g.:
对于我们这些迟到讨论的人来说，从 1.5 开始，jQuery 具有内置的 xml 解析功能，这使得在没有插件或 3rd 方服务的情况下很容易做到这一点。它有一个 parseXml 函数，并且在使用 $.get 函数时也会自动解析 xml。例如：
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
回答by sdepold
Update (Oct 15, 2019)
更新（2019 年 10 月 15 日）
I extracted the core logic from jquery-rss to a new library called Vanilla RSSwhich is using the fetch API and can work without any additional dependencies:
我将 jquery-rss 的核心逻辑提取到一个名为Vanilla RSS的新库中，该库使用了 fetch API，无需任何额外的依赖即可工作：
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
Original
原来的
post:
邮政：
You can also use jquery-rss, which comes with nice templating and is super easy to use:
您还可以使用jquery-rss，它带有漂亮的模板并且非常易于使用：
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})
yields (as of Sept 18, 2013):
收益率（截至 2013 年 9 月 18 日）：
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
See http://jsfiddle.net/sdepold/ozq2dn9e/1/for a working example.
有关工作示例，请参阅http://jsfiddle.net/sdepold/ozq2dn9e/1/。
回答by Mark Steggles
回答by Andy Brudtkuhl
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
回答by yogman
Use Google AJAX Feed API unless your RSS data is private. It's fast, of course.
除非您的 RSS 数据是私有的，否则请使用 Google AJAX Feed API。当然，它很快。
回答by SpYk3HH
UPDATE[4/25/2016] Now better written and fully supported version with more options and abilities hosted at GitHub.jQRSS
更新[2016 年 4 月 25 日] 现在编写更好且完全受支持的版本，在GitHub.jQRSS 上提供更多选项和功能
I saw the SelectedAnswerby Nathan Strutz, however, the jQuery Plugin page link is still down and the home page for that site did not seem to load. I tried a few other solutions and found most of them to be, not only out-dated, but EASY! Thus I threw my hat out there and made my own plugin, and with the dead links here, this seems like a great place to submit an answer. If you're looking for this answer in 2012 (soon to b 2013) you may notice the frustration of dead links and old advice here as I did. Below is a link to my modernplugin example as well as the code to the plugin! Simply copy the code into a JS file & link it in your header like any other plugin. Use is EXTREMELY EZ!
我看到所选答案由弥敦道Strutz，然而，jQuery插件页面链接仍下跌和该网站的主页上似乎没有负载。我尝试了一些其他的解决方案，发现其中大部分是，不仅不合时宜，但EASY！因此，我扔掉了我的帽子并制作了我自己的插件，这里有死链接，这似乎是提交答案的好地方。如果您在 2012 年（即将到 2013 年）寻找这个答案，您可能会像我一样注意到死链接和旧建议的挫败感。下面是我的现代插件示例的链接以及插件的代码！只需将代码复制到 JS 文件中，然后像任何其他插件一样将其链接到您的标题中。使用非常EZ！
jsFiddle
js小提琴
Plugin Code
2/9/2015 - made long overdue update to check forconsolebefore sending commands to it! Should help with older IE issues.
插件代码
2/9/2015 -console在向其发送命令之前进行了过期更新以进行检查！应该有助于解决旧的 IE 问题。
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}
if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
USE
用
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })
$.jQRSS('Search Words Here instead of a Link', function(feed) { /* do work */ })
// TODO: Needs fixing
$.jQRSS('在此处搜索单词而不是链接', function(feed) { /* do work */ })
// TODO：需要修复
Options
选项
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
回答by John Magnolia
(function(url, callback) {
jQuery.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
回答by Dylan Valade
I agree with @Andrew, using Google is a solid, reusable way to do it with the huge benefit that you get JSON back instead of XML. An added advantage of using Google as a proxy is that services that might block your direct access to their data are unlikely to stop Google. Here is an example using ski report and conditions data. This has all of the common real world applications: 1) Third party RSS/XML 2) JSONP 3) Cleaning strings and string to array when you can't get the data exactly the way you want it 4) on load add elements to the DOM. Hope this helps some people!
我同意@Andrew 的观点，使用 Google 是一种可靠的、可重用的方法，它的巨大好处是您可以返回 JSON 而不是 XML。使用 Google 作为代理的另一个优势是，可能会阻止您直接访问其数据的服务不太可能阻止 Google。这是一个使用滑雪报告和条件数据的示例。这具有所有常见的现实世界应用程序：1) 第三方 RSS/XML 2) JSONP 3) 当您无法完全按照您想要的方式获取数据时，将字符串和字符串清理到数组 4) 在加载时将元素添加到DOM。希望这可以帮助一些人！
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';
html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';
html += '<li>Ski Report Date: ' + publishedDate + '</li>';
html += '</ul>';
$('body').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
