从RSS Feed和YQL创建数据表

  • Yahoo Query Language( YQL )是一种查询语言,例如SQL。
  • 使用YQL,我们可以Web服务 查询过滤联接数据。
  • YQL也可以阅读RSS feed。
  • 响应可以是JSON或XML。
  • 雅虎提供了一个YQL控制台,用于调试测试诊断 YQL语句。
  • YQL控制台的链接为http://developer.yahoo.com/yql/console/
  • 该演示显示:
    • 使用YQL阅读我的博客RSS Feed(http://www.tutorialsavvy.com/feeds/posts/default)。
    • 获取JSON格式的供稿。
    • 在YUI3数据表中显示数据。
  • 项目结构
  • 本演示使用以下yui3模块' node ',' yql ',' datatable ',' datatable-scroll ',' datatype-date '。
  • 使用的YQL语句是: 选择标题,发布日期,来自rss的链接,其中url ='http://www.tutorialsavvy.com/feeds/posts/default?alt = rss&format = json&diagnostics = true'
  • YQL控制台输出为:
  • YQL演示脚本yql-demo.htmlHTML标记
<!DOCTYPE html>
<html><head><title>YQL Query Reading RSS Feed Demo</title><script src='http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js'></script><style>.response-status {font-weight: bold;color:grey;list-style: none;}.response-text {font-size:16px;color : orange;}#yui-blogger-rss-feed-table {width:650px;}.yui3-skin-sam #yui-blogger-rss-feed-table .yui3-datatable-cell {font-size:11px;}.blogger-post-title {color: Green;font-style: italic;font-weight: bold;}.blogger-post-link {text-decoration: none;font-style: italic;font-weight:bold;}.blogger-post-link:hover {color:orange;text-decoration: underline;font-weight:bold;}</style></head><body class='yui3-skin-sam'><!-- This DIV Element is for displaying posts from the YQL QUERY RESPONSE(JSON)details in YUI3 DATATABLE --><div id='yui-blogger-rss-feed-table'></div><!-- This UL Element is for displaying post count, created date,language --><ul class='response-status'></ul><script>YUI().use('node', 'yql', 'datatable', 'datatable-scroll', 'datatype-date', function (Y) {var resultItems,results, postTable,/*This YQL query is for my Blogger's RSS feed.*/yqlRssUrl = 'select title, pubDate, link from rss where ' +'url='http://www.tutorialsavvy.com/feeds/posts/default?alt=rss&format=json&diagnostics=true'',responseStatus = Y.one('.response-status'),rssYqlFeedTable = Y.one('#yui-blogger-rss-feed-table'),/*HTML template for LINK of the post*/formatLink = '<td class='yui3-datatable-cell'><a  class='blogger-post-link' href='{content}'>{content}</a></td>',/*HTML template for TITLE of the post*/formatTitle = '<td class='yui3-datatable-cell blogger-post-title'>{content}</td>',/*Formatter function for formatting a date, pubDate*/formatPubDate = function (o) {return Y.DataType.Date.format(Y.DataType.Date.parse(o.value), {format: '%Y-%m-%d'});}/* This will return 25 results As Blogger return 25 posts by DEFAULT.* This can be changed to some other number using* LIMIT parameter.*/Y.YQL(yqlRssUrl, function (feed) {results = feed.query;resultItems = feed.query.results.item;responseStatus.appendChild('<li> Count of Posts (in response) : <span class='response-text'>' + results.count + '</span></li>');responseStatus.appendChild('<li>Created Date : <span class='response-text'>' + results.created + '</span></li>');responseStatus.appendChild('<li>Post Language : <span class='response-text'>' + results.lang + '</span></li>');postTable = new Y.DataTable({columns: [{key: 'title',label: 'POST TITLE',cellTemplate: formatTitle},{key: 'pubDate',label: 'PUBLICATION DATE',formatter: formatPubDate},{key: 'link',label: 'POST LINK',cellTemplate: formatLink}],data: resultItems,scrollable: 'y',height: '250px',caption: '[ YQL READING RSS FEED FROM TUTORIAL SAVVY(http://www.tutorialsavvy.com/feeds/posts/default)' + 'AND DISPLAYING IN DATATABLE]'}).render(rssYqlFeedTable);})});</script></body></html>
  • 萤火虫检查
  • 该演示的JS Fiddle链接为:
  • http://jsfiddle.net/techblogger/sr67C/2/embedded/result/

  • JS小提琴输出:
  • 输出(屏幕截图):

    演示代码下载:

    下载代码链接

    参考: My Small Tutorials博客上的JCG合作伙伴 Sandeep Kumar Patel 从RSS Feed和YQL创建数据表 。

    翻译自: https://www.javacodegeeks.com/2013/02/creating-datatable-from-rss-feed-and-yql.html

Published by

风君子

独自遨游何稽首 揭天掀地慰生平