AJAX RSS Reader Step by Step Tutorial

在网上找到一篇关于ajax rss reader的文章,写得很好,而且简单明了,现翻译如下,不当之处,还请见谅(原文地址:http://ajax.phpmagazine.net/2005/11/ajax_rss_reader_step_by_step_t.html)

I received many emails requesting more AJAX workshops, and as I promised before, this is another tutorial about writing an AJAX RSS Reader. This AJAX reader is written in Javascript only, it just request a backend url on the same server then display the feed resulted as you can see in the screenshots below :

我收到很多电子邮件,要求提供更多的AJAX例子,而正如我所承诺的那样,这是另一篇AJAX RSS Reader指南.这个只用javascript写的AJAX reader,请求一个后端URL,然后显示结果如下面你可以看到的截图:

 

Preparing the XMLHttpRequest Object
In the first step the application prepared an XMLHttpRequest object to use it for loading remote RSS data. I tested the code with firefox only, but I added ActiveXObject in case IE was used.

准备XMLHttpRequest对象
第一步,先准备一个XMLHttpRequest对象,以便用它来获取远程的RSS数据,我只在firefox中测试了代码,但我也添加了在IE中使用的ActiveXObject.

var  RSSRequestObject  =   false ;  //  XMLHttpRequest Object

if  (window.XMLHttpRequest)  //  try to create XMLHttpRequest
    RSSRequestObject  =   new  XMLHttpRequest();

if  (window.ActiveXObject)     //  if ActiveXObject use the Microsoft.XMLHTTP
    RSSRequestObject  =   new  ActiveXObject( " Microsoft.XMLHTTP " );

Writing the HTML code
Just few lines are enough, two divs are used by the application the status will inform about the progress of requesting data, and the ajaxreader will be the container in which the result will be displayed. The first thing then to do onload page is to run the AJAX Reader.

书写HTML代码
只要几行就够了,程序用了两个div,status用来显示请求数据的进度,ajaxreader是将要显示的结果的容器,页面加载时做的第一件事就是运行AJAX Reader.

< body  onload ="RSSRequest();" >
< h2 >< acronym  title ="Asynchronous Javascript And XML" > AJAX </ acronym >   < acronym  title ="Rich Site Summary" > RSS </ acronym >  Reader </ h2 >
< div  id ="status"  style ="none" ></ div >
< div  id ="ajaxreader" ></ div >
</ body >

The AJAX RSS Reader
The AJAX Reader will request the backend URL and run a function ReqChange() when the data will be loaded. I have just added few additional function for usability purpose to display the status and hide it ...

AJAX RSS Reader
AJAX Reader将请求一个后端URL,并且在数据加载后运行一个函数ReqChange(),我还添加了几个函数来显示和隐藏状态以提高可用性.

var  Backend  =   ' http://ajax.phpmagazine.net/index.xml ' ;  //  Backend url

/**/ /*
* Main <acronym title="Asynchronous Javascript And XML">AJAX</acronym> <acronym title="Rich Site Summary">RSS</acronym> reader request
*/
function  RSSRequest()  ... {

    // change the status to requesting data
    HideShow('status');
    document.getElementById("status").innerHTML = "Requesting data ...";
    
    // Prepare the request
    RSSRequestObject.open("GET", Backend , true);
    // Set the onreadystatechange function
    RSSRequestObject.onreadystatechange = ReqChange;
    // Send
    RSSRequestObject.send(null); 
}

function  HideShow(id) ... {
    var el = GetObject(id);
    if(el.style.display=="none")
    el.style.display='';
    else
    el.style.display='none';
}

function  GetObject(id) ... {
    var el = document.getElementById(id);
    return(el);
}

Now we just inform the reader that we started requesting data by changing the status message then open the Backend URL which we choose as a single feed in our case.

现在我们仅告诉读者,我们开始请求数据,改变状态信息,然后打开一个我们选择的后端URL.

Process the data and display result
Finally we have just to finish by processing the data and display the result. If the data are received correctly, we have to parse the RSS data to retrive the channel information such title, url, description ... then browse different items to display the final result.

处理数据并且显示结果
最后我们要完成处理数据和显示结果.如果数据被正确地接收,我们就要解析RSS数据为频道信息,标题,URL,描述...然后浏览不同的项显示最终结果.

/**/ /*
* onreadystatechange function
*/
function  ReqChange()  ... {

    // If data received correctly
    if (RSSRequestObject.readyState==4) ...{
    
        // if data is valid
        if (RSSRequestObject.responseText.indexOf('invalid') == -1) 
        ...{     
            // Parsing RSS
            var node = RSSRequestObject.responseXML.documentElement; 
            
            
            // Get Channel information
            var channel = node.getElementsByTagName('channel').item(0);
            var title = channel.getElementsByTagName('title').item(0).firstChild.data;
            var link = channel.getElementsByTagName('link').item(0).firstChild.data;
            
            content = '<div class="channeltitle"><a href="'+link+'">'+title+'</a></div><ul>';
        
            // Browse items
            var items = channel.getElementsByTagName('item');
            for (var n=0; n < items.length; n++)
            ...{
                var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;
                var itemLink = items[n].getElementsByTagName('link').item(0).firstChild.data;
                try 
                ...{ 
                    var itemPubDate = '<font color=gray>['+items[n].getElementsByTagName('pubDate').item(0).firstChild.data+'] ';
                } 
                catch (e) 
                ...{ 
                    var itemPubDate = '';
                }
                
            
                content += '<li>'+itemPubDate+'</font><a href="'+itemLink+'">'+itemTitle+'</a></li>';
            }
            
            
            content += '</ul>';
            // Display the result
            document.getElementById("ajaxreader").innerHTML = content;

            // Tell the reader the everything is done
            document.getElementById("status").innerHTML = "Done.";
            
        }
        else ...{
            // Tell the reader that there was error requesting data
            document.getElementById("status").innerHTML = "<div class=error>Error requesting data.<div>";
        }
        
        HideShow('status');
    }
    
}

 

Update Feed
Now that we have finished this AJAX reader, I added a timer to update feeds every 20 minutes. The timer is just two lines independant from the previous code. I just put it in a separated function so I can play with it later and have more flexibility to add new features.

更新Feed
现在我们已经完成了AJAX reader,我添加了一个计时器来每20分钟更新一次Feed,计时器只添加了两行代码.我把它放在一个单独的函数,以便稍后维护它,同时也有更多的弹性来添加新特性.

window.setInterval( " update_timer() " ,  1200000 );  //  update the data every 20 mins

/**/ /*
* Timer
*/
function  update_timer()  ... {
    RSSRequest();
}

 Conclusion and Demo
You can find the AJAX RSS Reader script running online or download it here, tested with Firefox 1.0.7 only. This was a basic code that show how to create a simple AJAX RSS Reader, it could be extended to support more feeds for examples or to retrive stock quotes ... etc. You may copy the source and play freely with it, I'll be interested to know how you use it or how it could be extended.

结束语和范例
你可以找到AJAX RSS Reader,在线运行或在这儿下载它.它只在Firefox 1.0.7中做了测试.这是一个基础代码,它展示了怎样创建一个简单的AJAX RSS Reader,它可以被扩展为支持更多feed,或者修改作它用...等,你可以复制这些代码并且免费使用它,我很想知道你如何使用它,或者它被如何扩展.