一个基于ajax的rss阅读器的雏形

最新推荐文章于 2024-10-11 06:14:30 发布

yefei679

最新推荐文章于 2024-10-11 06:14:30 发布

阅读量580

点赞数

分类专栏：与RSS有关的资料文章标签： rss ajax xmlhttprequest xml button stylesheet

与RSS有关的资料专栏收录该内容

74 篇文章 0 订阅

订阅专栏

主要的技术是 ajax，rss的数据源只是一个规范的xml文档，只要用javascript对其进行解析就行了，实验很快就有了成果，不过还比较简陋，没有进行任何装饰，但希望能为正在学习ajax或者rss的朋友们提供一些参考，整个结构很简单，一个建立xmlhttprequest的函数，一个装载xml数据的函数，一个解析xml数据的函数，另外我要告诉大家的是在FIREFOX下，xmlhttp对象不能跨域访问，也就是说只能访问本地或者服务器端的文件，据说IE也将推出此功能，不过这确实不是太好的功能：（，看来rss阅读器都是下载xml文件到本地在解析的了。
js部分的代码如下：

/*定义建立XMLHttpRequest的函数---------------------------------------------------------------开始*/
function CreateXMLHttpRequest()
{
xmlhttp=false;
if(window.XMLHttpRequest)//Mozilla,Sofari
    {xmlhttp=new XMLHttpRequest();
      if (xmlhttp.overrideMimeType)
       {xmlhttp.overrideMimeType('text/xml');}
    }
    else if(window.ActiveXObject)//IE
        {
            try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e){
                try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
                catch(e){}
                }
            }
}
/*定义建立XMLHttpRequest的函数---------------------------------------------------------------结束*/
/*定义建立检查URL数据的函数---------------------------------------------------------------开始*/
function checkURL()
{
    if(document.getElementById("rssURL").value=="")
    {
        alert("url不能为空");
        }
        else
            {
                var rssURL=document.getElementById("rssURL").value;
                document.getElementById("rssURL").value="";
                loadXML(rssURL);
                }
    }
/*定义建立检查URL数据的函数---------------------------------------------------------------结束*/
/*定义建立装载XML数据的函数---------------------------------------------------------------开始*/
function loadXML(dataURL)
{
    CreateXMLHttpRequest();
    if(!xmlhttp)
    {
        document.getElementById("msg").style.display="";
        document.getElementById("msg").innerHTML="<fontcolor=/"red/">对不起,服务器有故障,不能传送数据!</font>";
        return false;
        }
        else
            {
                xmlhttp.onreadystatechange=readXML;
                //URL="http://feeds.feedburner.com/SatelliteOfLove";
                xmlhttp.open("post",dataURL,true);
                xmlhttp.send(null);
                }
    }
/*定义建立装载XML数据的函数---------------------------------------------------------------结束*/

/*定义建立解析XML数据的函数---------------------------------------------------------------开始*/
function readXML()
{
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status==200)
        {
            var xmlDoc=xmlhttp.responseXML;//取回rss的xml数据
            var pageData=document.getElementById("data");//建立一个数据层div

            var dataUnit=document.createElement("div");//建立一个单元数据层div
            dataUnit.className="dataUnit";

            var rssInfo=document.createElement("div");//建立一个标题层div
            rssInfo.className="rssInfo";
            var rssTitle=xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue;//取得rss的标题值
            rssInfo.innerHTML=rssTitle;
            rssInfo.innerHTML="<img src=/"images/close.gif/" alt='关闭' οnclick=/"this.parentNode.parentNode.style.display='none'/"/>"+rssInfo.innerHTML;
            dataUnit.appendChild(rssInfo);//将rss的标题值插入标题层中

            var rssData=document.createElement("div");//建立一个单元数据层中的数据层div
            rssData.className="rssData";
            var dataUl=document.createElement("ul");

            var items=xmlDoc.getElementsByTagName("item");//取得xml的数据形成数组
            for(i=0;i<10;i++)//对数组进行循环整理
            {
                urlData=items[i].getElementsByTagName("link")[0].firstChild.nodeValue;//获取单条数据url
                titleData=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;//获取单条数据title


                var dataChild=document.createElement("li");//建立一个标志li
                dataChild.setAttribute("title",titleData)
                dataText=document.createTextNode(titleData);//建立一个title的变量用来保存title的值
                urlChild=document.createElement("a");//建立一个链接

                dataChild.appendChild(urlChild);//插入一个链接
                urlChild.setAttribute("href",urlData);//设置链接的url属性
                urlChild.setAttribute("target","_blank")
                urlChild.appendChild(dataText);//插入title
                dataUl.appendChild(dataChild)//插入单条数据
                }
                rssData.appendChild(dataUl);
                dataUnit.appendChild(rssData);//在单元格中插入数据层
                pageData.appendChild(dataUnit);//把单元格插入页面;
                //alert(pageData.innerHTML);
                document.getElementById("msg").style.display="";
                document.getElementById("msg").innerHTML="数据装载完毕!";
        }

    }
            else
            {
                document.getElementById("msg").style.display="";
                document.getElementById("msg").innerHTML="<img src=/"images/loading.gif/" />数据装载中ing...";
                }
}
/*定义建立解析XML数据的函数---------------------------------------------------------------结束*
HTML部分的代码如下：

<head>
<title>rss阅读器</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<script language="javacsript" type="text/javascript" src="js/ajax.js">
</script>
<input type="button" value="Satellite of love" οnclick="loadXML('http://www.achome.cn/feed.asp')" />
<input type="button" value="搜狐新聞" οnclick="loadXML('xml/sohu_focus.xml')" />
<input type="button" value="新浪新聞" οnclick="loadXML('xml/sina_news.xml')" />
<input type="text" size="20" id="rssURL"/>
<input οnclick="checkURL();" value="查看rss数据" type="button" />
<div id="msg" style="display:none;">
</div>
<div id="data">
</div>

<body>