<div style="text-indent: 2em;">

示例:点击查看示例

本文将讲述如何利用Ajax技术来读取RSS新闻源,如果你对什么Ajax技术不了解,可以参考《什么是Ajax?》;如果你对什么RSS不了解,可以参考《什么是RSS?》。

如果你只想赶紧用起来,在自己的网站上加入想要的RSS内容,那么你可能会惊讶它会是如此的简单,即只需要在HTML文档中加入两行代码即可实现(前提是在按照下面的方法做好一些准备工作后)。为了能将自己感兴趣的RSS内容添加到自己的网站上,你需要这个RSS源的Url,如 http://www.myfootprints.cn/blog/rss.xml;而要此RSS内容添加到网页的哪个位置呢?这需要那个位置的ID,如idReader。有了这两个参数,只需写如下两行代码即可达到目的。

var oRssReader = new mfRSSReader('idReader', 'http://www.myfootprints.cn/blog/rss.xml');
oRssReader.loadFeed();

需要做哪些准备工作呢?准备两个文件即可。

  1. 后台服务器代理查询文件。

    为什么需要这个文件呢?因为Ajax的本质是使用JavaScript查询网站的少量数据,而基于安全原因,客户端的JavaScript不能够跨域请求数据,即www.a.com网站上的JavaScript不可以请求www.b.com网站上的数据。然而,服务端的脚本却不存在这个限制,于是,在自己网站上添加别人的RSS新闻内容的这个需求上,有必要也有可能在客户端与别的服务器之间设置一个代理,它接收客户端JavaScript的请求,转发给目的地服务器,收到回复后将回复再转发给客户端JavaScript。(假如不是由于这个安全原因,就不需要这个文件了。)

    好了,说了这么多,要记住的就是这个文件仅仅起个传话筒的作用,将目的服务器的回复响应原封不动地转发给客户端JavaScript。它的构建非常简单,也不是重点,但却是个基础。我们的重点在于构建第二个文件,而第二个文件需要通过这个文件来获取目的服务器的数据。如果你的服务器脚本采用ASP,那么建立下面这样一个文件就行了(假设命名为newsfeeder.asp,保存在网站根目录)。

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <% Option Explicit %>
    <%Session.CodePage=65001%>
    <%
        Response.ContentType = "text/xml"
        Dim sRSSUrl, oHTTP
        sRSSUrl = Request.QueryString("rssurl")
        
        Set oHTTP = Server.CreateObject("Microsoft.XMLHTTP")
        oHTTP.Open "GET", sRSSURL, False
        oHTTP.Send
        
        Response.Write oHTTP.ResponseXML.XML
        Set oHTTP = Nothing
    %>
    

    如果你的服务器脚本是PHP,那么建立如下的文件就可以了(假设命名为newsfeeder.php,保存在网站根目录)。

    <?php
    header('Content-type: text/xml;');
    

    // 返回RSS源数据 echo filegetcontents($_REQUEST['rssurl']); ?>

  2. 获取RSS的核心JavaScript文件。

    此文件由一个mfRSSReader类以及一个辅助函数组成。正是这个mfRSSReader类隐藏了发送异步数据请求的细节,而辅助函数隐藏了如何处理响应数据的细节,使得最终使用它们是如此的简单。

    在详细展示它的代码前,我再做一些介绍。mfRSSReader类有如下几个属性,通过设置这些属性,你可以按照自己的偏好来使用它。

    • Request。这个属性就是XMLHTTP请求对象,它保存着服务器的响应数据,即RSS源的内容。它不需要设置。
    • ReaderDivId。这个属性就是HTML文档中的一个层(Div)或者一块其他区域的ID值,通过自定义这个属性,你可以将RSS源内容显示到HTML文档中的指定的地方。
    • RssUrl。这个属性保存着RSS源的Url地址。通过自定义这个值,你可以获取指定的RSS源内容。
    • WaitDesc。这个属性可以用来设置查询RSS源时的说明文字。它不是必需要进行设置的。
    • WaitImageSrc。这个属性是一个Url(可以是相对Url,如images/wait.gif,也可以是绝对Url,如http://www.myfootprints.cn/images/logo.gif)。它可以用来设置查询RSS源时的等待图标。它也不是必需要进行设置的。
    • AjaxStateId。这个属性保存了显示Ajax查询状态信息的HTML文档中的层的ID值。它不是必需的,如果进行了设置,那么在HTML文档的指定区域,会显示Ajax的查询状态(如查询是否成功等)。
    • FeedCount。这个属性不是必需设置的。它用来指定显示几条新闻。默认是10。它是用来给辅助处理函数(后面会讲到辅助处理函数)用的。
    • Handler。它是处理函数的引用。通过设置它的值,你可以选择以何种方式显示RSS源。它不是必需设置的,默认为将RSS源的内容显示为一个标题列表。
    • ServerFeeder。它存储着后台服务器查询代理的Url。
    • TimeoutIds。它不需要进行设置。

    以上是mfRSSReader类的属性,它还有一些方法,然而你真正会用到的就是loadFeed()方法,在设置好相关属性后(如果你懒得设置,可以一个都不设置),直接调用它,就完成了所有工作。

    辅助处理函数是干什么的呢?它就是对mfRSSReader类里的Request对象的xml数据(如上所述,Request对象保存着目的服务器的响应数据)进行分析,并以恰当的格式将数据呈现出来。你可以自定义这个函数,以自己的偏好来显示RSS新闻源内容。如果你将这个函数命名为myHandler(oRssReader),那么,将你的mfRSSReader类的实例的Handler属性指向它即可,如下所示。注意,这个处理函数有一个参数,就是你的mfRSSReader的实例,在处理函数内部对这个参数进行处理。

    // 定义一个mfRSSReader类的实例
    var oRssReader = mfRSSReader();
    // 做一些设置,如RSS源是什么,显示在HTML文档的哪个地方等
    // 然后,设置自己的处理函数
    oRssReader.Handler = myHandler;
    // 设置完成后,加载RSS源即可
    oRssReader.loadFeed();
    

    以下即将展示这个核心JavaScript文件的所有代码,有详细的注释方便阅读,如果你不想深究,那么将复制下来,保存为mfRSSReader.js,即可按照上述介绍使用它了!注意在网页的<head>部分加入对此文件的引用,即:

    <script type="text/javascript" src="mfRSSReader.js"><script/>
    

    mfRSSReader.js的代码:

    /**
     * mfRSSReader.js.
     * 
     * Version 2.0
     * Copyright (C) 2009- [email protected]
     * http://www.myfootprints.cn
     * 
     *
     * 用途:将指定的RSS源的内容显示在指定的DIV框架中
     */
    

    // // mfRSSReader 对象 // // 用途:用来构建 mfRSSReader 对象 // 参数: // sReaderDivId, RSS内容将会在HTML文档中的ID为sReaderDivId的Div层中显示 // sRssUrl, 指定的RSS源 // sWaitDesc, 可选参数,加载描述文字,如"正在加载" // sWaitImageSrc, 可选参数,加载提示图片的Url,可以是相对路径 // sAjaxStateDivId, 可选参数,用于显示提示Ajax状态的HTML文档中的Div层的Id,一般可以不在文档中放置这个层,这个参数可以省略 // function mfRSSReader(sReaderDivId, sRssUrl, sWaitDesc, sWaitImageSrc, sAjaxStateDivId) { if (sReaderDivId) { this.ReaderDivId = sReaderDivId; } else { this.ReaderDivId = ''; } if (sRssUrl) { this.RssUrl = sRssUrl; } else { this.RssUrl = ''; } if (sWaitDesc) { this.WaitDesc = sWaitDesc; } else { this.WaitDesc = '加载中……'; } if (sWaitImageSrc) { this.WaitImageSrc = sWaitImageSrc; } else { this.WaitImageSrc = 'http://www.myfootprints.cn/jsLib/ajaxtoolkit/wait.gif'; } if (sAjaxStateDivId) { this.AjaxStateDivId = sAjaxStateDivId; } else { this.AjaxStateDivId = null; } // 以下为默认属性 // 10条新闻 this.FeedCount = 10; // 处理XML文档的函数 this.Handler = mfRRA.handleFeedRequest; // 由于javascript的HTTP查询不能够跨越不同的服务器,需要配置一个服务器端的HTTP查询代理,在这里写上代理的服务器查询脚本的URL this.ServerFeeder = 'newsfeeder.asp?rssurl='; // Request 对象 this.Request = null; // 计时器ID this.TimeoutIds = null; }

    // // loadFeed 方法 // // 用途:用来加载RSS内容 // mfRSSReader.prototype.loadFeed = function() { // 清除上一次的源内容,同时显示加载中的提示信息 var oReaderDiv = document.getElementById(this.ReaderDivId); if (oReaderDiv) { var oChilds = oReaderDiv.childNodes; for (var i = oChilds.length - 1; i >= 0; i--) { oReaderDiv.removeChild(oChilds[i]); } if (this.WaitImageSrc) { var oImg = new Image(); oImg.src = this.WaitImageSrc; if (this.WaitDesc) { oImg.alt = this.WaitDesc; } else { oImg.alt = '加载中……'; } oReaderDiv.appendChild(oImg); } else if (this.WaitDesc) { var oText = document.createTextNode(this.WaitDesc); oReaderDiv.appendChild(oText); } } else { return; } // 发送 Ajax 请求加载新闻源内容 var oRSSReader = this; this.ajaxSendRequest('GET', this.ServerFeeder + encodeURIComponent(this.RssUrl), function() { oRSSReader.Handler(oRSSReader); }); };

    // // ajaxSendRequest() 方法 // // 用途:发送HTTP请求 // mfRSSReader.prototype.ajaxSendRequest = function(sType, sUrl, fnHandler, sPostDataType, vPostData) { if (this.Request == null) { // 创建一个新的 Request 对象 this.Request = this.createXMLHTTPRequest(); } else { // 杀掉之前的 Request 对象 this.Request.abort(); }

    if (this.Request == null) {
        throw new Error('Ajax 在创建 XMLHTTPRequest 对象时遇到错误。');
    } else {
        try {
    

    // var sReaderDivId = this.ReaderDivId; // var lFeedCount = this.FeedCount; // var sAjaxStateDivId = this.AjaxStateDivId; // var oRequest = this.Request;

    // if (!fnHandler) { // fnHandler = function() { mfRRA.handleFeedRequest(oRequest, sReaderDivId, lFeedCount, sAjaxStateDivId); }; // } this.Request.onreadystatechange = fnHandler; // 总是异步 第三个参数设置为true this.Request.open(sType, sUrl, true); if (sType.toLowerCase() == 'get') { // 发送一个GET请求,不涉及到数据 this.Request.send(null); } else { // 发送一个POST请求,最后一个参数是数据 this.Request.setRequestHeader('Content-Type', sPostDataType); this.Request.send(vPostData); } } catch (oError) { throw new Error('Ajax 在与服务器的通信中遇到错误。\n' + '详情:' + oError); } } };

    // // createXMLHTTPRequest()方法 // // 用途:创建一个新的Request对象 // mfRSSReader.prototype.createXMLHTTPRequest = function() { if (typeof XMLHttpRequest == 'undefined' && window.ActiveObject) { var arrSignatures = ["MSXML2.XMLHTTP.5.0", "XSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { var oRequest = new ActiveXObject(arrSignatures[i]); return oRequest; } catch (oError) { //忽略 return null; } } //throw new Error("MSXML 没有安装到你的系统中。"); } else if (window.XMLHttpRequest) { try { var oRequest = new XMLHttpRequest(); return oRequest; } catch (oError) { return null; }

    } else {
        return null;
    }
    

    };

    // // 隐藏Ajax状态信息 // 如果给定lDelay参数,则启动计时器,否则不启动 // mfRSSReader.prototype.toggleAjaxStateInfo = function(bShow, lDelay) { var oStateElem = document.getElementById(this.AjaxStateDivId);

    function toggleAjaxStateInfoTo() {
        if (bShow) {
            oStateElem.style.display = 'block';
        } else {
            oStateElem.style.display = 'none';
        }
    }
    if (oStateElem) {
        if (lDelay) {
            if (this.TimeoutIds) {
                this.TimeoutIds[this.TimeoutIds.length] = window.setTimeout(toggleAjaxStateInfoTo, lDelay);
            } else {
                this.TimeoutIds = window.setTimeout(toggleAjaxStateInfoTo, lDelay);
            }
        } else {
            toggleAjaxStateInfoTo();
        }
    }
    

    };

    // // 清除计时器 // mfRSSReader.prototype.clearHideAjaxStateInfoTimeout = function() { if (this.TimeoutIds) { for (var i = this.TimeoutIds.length - 1; i >= 0; i--) { window.clearTimeout(this.TimeoutIds[i]); this.TimeoutIds.splice(i, 1); } } };

    // // 更新Ajax状态 // // 参数: // oRequest(), 更新哪个XMLHttpRequest对象的状态 // sAjaxStateDivId(), 更新状态信息到HTML文档中ID为sAjaxStateDivId中 // mfRSSReader.prototype.ajaxUpdateState = function() { var oStateElem = document.getElementById(this.AjaxStateDivId); var oRequest = this.Request; if (oStateElem) { // 修饰一下状态元素 oStateElem.style.fontSize = 'small'; oStateElem.style.border = '1px solid'; oStateElem.style.textAlign = 'center'; try { this.clearHideAjaxStateInfoTimeout(); } catch (oError) { } finally { this.toggleAjaxStateInfo(true); } switch (oRequest.readyState) { // UNITIALIZED - Request has not yet been opened
    case 0: oStateElem.style.backgroundColor = "#FFFFFF"; // white //oStateElem.innerHTML = "Request uninitialized."; oStateElem.innerHTML = "查询没有启动。"; this.toggleAjaxStateInfo(false, 2000); break; // LOADING - Request has not yet been sent
    case 1: oStateElem.style.backgroundColor = "#999999"; // gray //oStateElem.innerHTML = "Request initialized."; oStateElem.innerHTML = "查询启动了。"; this.toggleAjaxStateInfo(false, 2000); break; // LOADED - Request has been sent
    case 2: oStateElem.style.backgroundColor = "#FF0000"; // red //oStateElem.innerHTML = "Waiting for response..."; oStateElem.innerHTML = "等待响应……"; this.toggleAjaxStateInfo(false, 2000); break; // INTERACTIVE - Response data is being downloaded
    case 3: oStateElem.style.backgroundColor = "#FFFF00"; // yellow //oStateElem.innerHTML = "Downloading response..."; oStateElem.innerHTML = "正在加载……"; this.toggleAjaxStateInfo(false, 2000); break; // COMPLETE - Request/response is complete
    case 4: if (oRequest.status == 200) { // Everything is OK oStateElem.style.backgroundColor = "#00FF00"; // green //oStateElem.innerHTML = "Request complete!"; oStateElem.innerHTML = "查询完成!"; this.toggleAjaxStateInfo(false, 2000); } else { // There was a problem oStateElem.style.backgroundColor = "#FF8800"; // orange //oStateElem.innerHTML = "Request failed!"; oStateElem.innerHTML = "查询失败!"; // 失败的信息不要隐藏 try { this.clearHideAjaxStateInfoTimeout(); } catch (oError) { } finally { this.toggleAjaxStateInfo(true, 2000); } } break; } } };

    mfRSSReader.prototype.getText = function(oElem) { // 获取一个元素的内部文本 var sText = ''; if (oElem != null) { if (oElem.childNodes) { for (var i = 0; i < oElem.childNodes.length; i++) { if (oElem.childNodes[i].nodeValue != null) { sText += oElem.childNodes[i].nodeValue; } } } } return sText; };

    // mfRSSReader 的助手,用来处理获取到的XML文档,你可以添加自定义的处理函数,并在调用mfRSSReader.loadFeed()方法前将 mfRSSReader.Handler 设置成为你自定义的处理函数 // 设置方法如下: // var oRssReader = new mfRSSReader('rssreader', 'http://www.myfootprints.cn/blog/rss.xml', '正在加载……', 'http://www.myfootprints.cn/jsLib/ajaxtoolkit/wait.gif'); // oRssReader.Handler = mfRRA.myHandleFeedRequest; // var mfRSSReaderAssistant = new Object(); var mfRRA = mfRSSReaderAssistant; // // handleFeedRequest() 方法 - 默认 // // 用途:获取到XML对象后的处理过程 // mfRRA.handleFeedRequest = function(oRSSReader) { var oRequest = oRSSReader.Request; if (oRequest.readyState == 4 && oRequest.status == 200) { // 保存XML响应数据 var oXMLData = oRequest.responseXML; // 从源标题开始生成源内容 var sFeedContent = ''; var oChannelElem = oXMLData.getElementsByTagName('channel')[0]; sFeedContent += '

    ';

        // 生成源条目组成的列表
        sFeedContent += '<ul>';
        var oFeedItems = oChannelElem.getElementsByTagName('item');
        var lFeedCount = oRSSReader.FeedCount;
        if (lFeedCount == -1) {
            lFeedCount = oFeedItems.length;
        }
        for (var i = 0; i &lt; (oFeedItems.length &lt; lFeedCount ? oFeedItems.length : lFeedCount); i++) {
            var sItemTitle = oRSSReader.getText(oFeedItems[i].getElementsByTagName('title')[0]);
            var sItemLink = oRSSReader.getText(oFeedItems[i].getElementsByTagName('link')[0]);
            var sItemPubDate = oRSSReader.getText(oFeedItems[i].getElementsByTagName('pubDate')[0]);
            if (sItemPubDate == '') {
                sItemPubDate = oRSSReader.getText(oFeedItems[i].getElementsByTagName('date')[0]);
            }
            if (sItemPubDate == '') {
                sFeedContent += '<li><a href="' + sItemLink + '" target="_blank" title="点击查看">' + sItemTitle + '</a></li>';
            } else {
                var sItemPubDateString = sItemPubDate;
                try {
                    var oDate = new Date(Date.parse(sItemPubDate));
                    sItemPubDate = oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDay();
                } catch (e) {
                    sItemPubDate = sItemPubDateString;
                } finally {
                }
                sFeedContent += '<li><a href="' + sItemLink + '" target="_blank" title="点击查看">' + sItemTitle + '<span class="itemdate">(' + sItemPubDate + ')</span></a></li>';
            }
        }
        sFeedContent += '</ul>';
    
        // 显示源内容
        document.getElementById(oRSSReader.ReaderDivId).innerHTML = sFeedContent;
    }        
    // 更新 Ajax 状态
    if (oRSSReader.AjaxStateDivId) {
        oRSSReader.ajaxUpdateState();
    }
    

    };

    // // handleFeedRequestFullTextLikeGoogle() 方法 - 与默认的标题列表不同,这里将每篇新闻的全文显示出来,模仿Google Reader的样式 // // 用途:获取到XML对象后的处理过程 // mfRRA.handleFeedRequestFullTextLikeGoogle = function(oRSSReader) { var oRequest = oRSSReader.Request; if (oRequest.readyState == 4 && oRequest.status == 200) { // 保存XML响应数据 var oXMLData = oRequest.responseXML; // 从源标题开始生成源内容 var sFeedContent = ''; var oChannelElem = oXMLData.getElementsByTagName('channel')[0]; sFeedContent += '

    ' + oRSSReader.getText(oChannelElem.getElementsByTagName('title')[0]) + ' »
    ';

        // 生成源条目组成的列表
        sFeedContent += '<div class="feedItems"><ul style="margin: 0; padding: 0; list-style-type: none;">';
        var oFeedItems = oChannelElem.getElementsByTagName('item');
        var lFeedCount = oRSSReader.FeedCount;
        if (lFeedCount == -1) {
            lFeedCount = oFeedItems.length;
        }
        for (var i = 0; i &lt; (oFeedItems.length &lt; lFeedCount ? oFeedItems.length : lFeedCount); i++) {
            var sItemTitle = oRSSReader.getText(oFeedItems[i].getElementsByTagName('title')[0]);
            var sItemLink = oRSSReader.getText(oFeedItems[i].getElementsByTagName('link')[0]);
            var sItemPubDate = oRSSReader.getText(oFeedItems[i].getElementsByTagName('pubDate')[0]);
            if (sItemPubDate == '') {
                sItemPubDate = oRSSReader.getText(oFeedItems[i].getElementsByTagName('date')[0]);
            }
    
            if (sItemPubDate == '') {
                sFeedContent += '<li><div class="feedItem"><div class="itemTitle"><a href="' + sItemLink + '" target="_blank" title="点击查看">' + sItemTitle + '<span class="itemTitleGo"></span></a></div>';
            } else {
                var sItemPubDateString = sItemPubDate;
                try {
                    var oDate = new Date(Date.parse(sItemPubDate));
                    sItemPubDate = oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDay();
                } catch (e) {
                    sItemPubDate = sItemPubDateString;
                } finally {
                }
                sFeedContent += '</div></li><li><div class="feedItem"><div class="itemTitle"><a href="' + sItemLink + '" target="_blank" title="点击查看">' + sItemTitle + '<span class="itemTitleGo"></span></a><span class="itemdate">' + sItemPubDate + '</span></div>';
                
            }
            var sAuthor = oRSSReader.getText(oFeedItems[i].getElementsByTagName('author')[0]);
            sFeedContent += '<div class="itemAuthor">由 ' + sAuthor + ' 发表</div>';
            var sItemContent = oRSSReader.getText(oFeedItems[i].getElementsByTagName('description')[0]);
            sFeedContent += '<div class="itemDesc">' + sItemContent + '</div></div></li>'
        }
        sFeedContent += '</ul></div>';
    
        // 显示源内容
        document.getElementById(oRSSReader.ReaderDivId).innerHTML = sFeedContent;
    } 
    // 更新 Ajax 状态
    if (oRSSReader.AjaxStateDivId) {
        oRSSReader.ajaxUpdateState();
    }
    

    };