Ajax

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

0 Comments 27 July 2006


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

  1. /*定义建立XMLHttpRequest的函数---------------------------------------------------------------开始*/
  2. function CreateXMLHttpRequest()
  3. {
  4. xmlhttp=false;
  5. if(window.XMLHttpRequest)//Mozilla,Sofari
  6.     {xmlhttp=new XMLHttpRequest();
  7.       if (xmlhttp.overrideMimeType)
  8.        {xmlhttp.overrideMimeType('text/xml');}
  9.     }
  10.     else if(window.ActiveXObject)//IE
  11.         {
  12.             try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
  13.             catch(e){
  14.                 try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  15.                 catch(e){}
  16.                 }
  17.             }
  18. }           
  19. /*定义建立XMLHttpRequest的函数---------------------------------------------------------------结束*/
  20. /*定义建立检查URL数据的函数---------------------------------------------------------------开始*/
  21. function checkURL()
  22. {
  23.     if(document.getElementById("rssURL").value=="")
  24.     {
  25.         alert("url不能为空");
  26.         }
  27.         else
  28.             {
  29.                 var rssURL=document.getElementById("rssURL").value;
  30.                 document.getElementById("rssURL").value="";
  31.                 loadXML(rssURL);
  32.                 }
  33.     }
  34. /*定义建立检查URL数据的函数---------------------------------------------------------------结束*/   
  35. /*定义建立装载XML数据的函数---------------------------------------------------------------开始*/
  36. function loadXML(dataURL)
  37. {
  38.     CreateXMLHttpRequest();
  39.     if(!xmlhttp)
  40.     {
  41.         document.getElementById("msg").style.display="";
  42.         document.getElementById("msg").innerHTML="<fontcolor=\"red\">对不起,服务器有故障,不能传送数据!</font>";
  43.         return false;
  44.         }
  45.         else
  46.             {
  47.                 xmlhttp.onreadystatechange=readXML;
  48.                 //URL="http://feeds.feedburner.com/SatelliteOfLove";
  49.                 xmlhttp.open("post",dataURL,true);
  50.                 xmlhttp.send(null);
  51.                 }
  52.     }
  53. /*定义建立装载XML数据的函数---------------------------------------------------------------结束*/
  54.  
  55. /*定义建立解析XML数据的函数---------------------------------------------------------------开始*/   
  56. function readXML()
  57. {
  58.     if(xmlhttp.readyState==4)
  59.     {
  60.         if(xmlhttp.status==200)
  61.         {
  62.             var xmlDoc=xmlhttp.responseXML;//取回rss的xml数据
  63.             var pageData=document.getElementById("data");//建立一个数据层div
  64.            
  65.             var dataUnit=document.createElement("div");//建立一个单元数据层div
  66.             dataUnit.className="dataUnit";
  67.            
  68.             var rssInfo=document.createElement("div");//建立一个标题层div
  69.             rssInfo.className="rssInfo";
  70.             var rssTitle=xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue;//取得rss的标题值
  71.             rssInfo.innerHTML=rssTitle;
  72.             rssInfo.innerHTML="<img src=\"images/close.gif\" alt='关闭' onclick=\"this.parentNode.parentNode.style.display='none'\"/>"+rssInfo.innerHTML;
  73.             dataUnit.appendChild(rssInfo);//将rss的标题值插入标题层中
  74.            
  75.             var rssData=document.createElement("div");//建立一个单元数据层中的数据层div
  76.             rssData.className="rssData";
  77.             var dataUl=document.createElement("ul");
  78.            
  79.             var items=xmlDoc.getElementsByTagName("item");//取得xml的数据形成数组
  80.             for(i=0;i<10;i++)//对数组进行循环整理
  81.             {
  82.                 urlData=items[i].getElementsByTagName("link")[0].firstChild.nodeValue;//获取单条数据url
  83.                 titleData=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;//获取单条数据title
  84.                
  85.                
  86.                 var dataChild=document.createElement("li");//建立一个标志li
  87.                 dataChild.setAttribute("title",titleData)
  88.                 dataText=document.createTextNode(titleData);//建立一个title的变量 用来保存title的值
  89.                 urlChild=document.createElement("a");//建立一个链接
  90.                
  91.                 dataChild.appendChild(urlChild);//插入一个链接
  92.                 urlChild.setAttribute("href",urlData);//设置链接的url属性
  93.                 urlChild.setAttribute("target","_blank")
  94.                 urlChild.appendChild(dataText);//插入title
  95.                 dataUl.appendChild(dataChild)//插入单条数据
  96.                 }
  97.                 rssData.appendChild(dataUl);
  98.                 dataUnit.appendChild(rssData);//在单元格中插入数据层
  99.                 pageData.appendChild(dataUnit);//把单元格插入页面;
  100.                 //alert(pageData.innerHTML);
  101.                 document.getElementById("msg").style.display="";
  102.                 document.getElementById("msg").innerHTML="数据装载完毕!";       
  103.         }
  104.        
  105.     }
  106.             else
  107.             {
  108.                 document.getElementById("msg").style.display="";
  109.                 document.getElementById("msg").innerHTML="<img src=\"images/loading.gif\" />数据装载中ing...";       
  110.                 }
  111. }   
  112. /*定义建立解析XML数据的函数---------------------------------------------------------------结束*

HTML部分的代码如下：

  1. <head>
  2. <title>rss阅读器</title>
  3. <link rel="stylesheet" type="text/css" href="css/default.css" />
  4. </head>
  5. <body>
  6. <script language="javacsript" type="text/javascript" src="js/ajax.js">
  7. </script>
  8. <input type="button" value="Satellite of love" onclick="loadXML('http://www.achome.cn/feed.asp')" />
  9. <input type="button" value="搜狐新聞" onclick="loadXML('xml/sohu_focus.xml')" />
  10. <input type="button" value="新浪新聞" onclick="loadXML('xml/sina_news.xml')" />
  11. <input type="text" size="20" id="rssURL"/>
  12. <input onclick="checkURL();" value="查看rss数据" type="button" />
  13. <div id="msg" style="display:none;">
  14. </div>
  15. <div id="data">
  16. </div>
  17.  
  18. <body>
«
»

Share your view

Post a comment

© 2006 Satellite Of Love. Powered by Wordpress.

Photo Edition, originally Daily Edition.