从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

从RSS Feed和YQL创建数据表

输出（屏幕截图）：

演示代码下载：

相关推荐