捕风之巢

统计

留言簿(3)

java友情链接

阅读排行榜

评论排行榜

最近用javascript制作rss2.0阅读器的心得

思路还是很清晰的,虽然只是实现了样本功能,但是其它的也都是大同小异。
 
有这么几个地方值得以后借鉴:
 
1。特殊的for循环:
1 for (var a=1;a<td_item.childNodes.length;)     
2 {
3   delete_item_exits=td_item.childNodes[a];
4   td_item.removeChild(delete_item_exits);
5 }

   在这个循环里面,由于执行的是删除td_item的字节点,所以td_item.childNodes.length的长度是递减的。这个时候如果要让循环正常执行,a值应固定不变;
 
2。动态生成按钮并动态设置其onclick事件:
1 ch_input=document.createElement("input");
2      ch_input.type="button";
3      ch_input.value="查看主题"
4      ch_input.onclick=function(){ShowRssItem(callM);};  //注意这一句
5      ch_input.className="button";
6      ch_input.id="ch_input_"+callM;

 
其中ShowRssItem(callM)函数如下:
function  ShowRssItem(callShowNo)
{
 div_item[showNo].className
= " div_item hidden " ;
 div_channel[showNo].className
= " div_channel " ;
 showNo
= callShowNo;
 div_item[showNo].className
= " div_item " ;
 div_channel[showNo].className
= " div_channel_selected " ;
}

 
经过我的实验,ch_input.onclick事件需要上面这么添加才能够实现其功能,这里列举一下没有成功的方法:
1。
ch_input.onclick="ShowRssItem("+callM+")";
    这种方法生成的onclick在dom里查看是正常的,如下所示:
    <INPUT class=button onclick=ShowRssItem(0) type=button value=提交 id=ch_input_0>
    但就是不能执行其功能。甚至:手动修改生成后的dom中的onclick事件,然后再还原成修改前的样子(就相当于没有修改),竟然可以了!百思不得其解,不能给出一个好的解释。但是可以确定的是,这个方法不能实现。
 
2。
ch_input.onclick=new function(){};
    这种方法失败的原因是,页面在初始化的时候就会执行这个function,而不是在onclick事件。
 
 
目前还有一个问题亟待解决就是如何控制html实体转义。我通过遍历xml文档查找节点找到的无论是.text还是.xml还是.nodeValue里面的内容都被转义了。这样我就没有办法用innerHTML。等我在详细了解了解其中的原理。盼望高手解答。
 
以上谨代表个人观点。总的来说,这次做的还是比较愉快的,是我第一个较为完整的javascript。希望大家批评指正!
 
附源代码:(测试:ie6+RSS2.0)下载代码
html文件:
 1 <html>
 2     <head>
 3     <title>poppy's RSS2.0页面订阅器(test for IE6+)</title>
 4         <script src="getrss.js">function table_show_onclick() {
 5     
 6 }
 7 
 8 </script>
 9         <link href="rss.css" rel=stylesheet type="text/css">
10         <style type="text/css">
11 <!--
12 .style3 {
13     font-family: Geneva, Arial, Helvetica, sans-serif;
14     font-size: 24pt;
15 }
16 body {
17     
18 }
19 .style4 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; }
20 -->
21         </style>
22     <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/></head>
23 
24     <body onload="StartRequest(text.value)">
25 <table width="770" border="0" align="center" cellpadding="0" cellspacing="0" class="normal" id="table_show">
26         <tr>
27         <td colspan="2"><class="style3">poppy's RSS2.0页面订阅器(test for IE6+)</p>
28           <class="style4">仅支持RSS(2.0) | 仅支持IE6+ | 仅支持纯文本 | 测试请用http://xnotes.xearch.biz/rss.xml(人大校内)/http://poppy.cnblogs.com/rss.aspx(校外)
29               |
30           </p><hr /></td>
31   </tr>
32       <tr>
33         <td  align="left" valign="top" style="width: 200px;"><div id="div_notice" class="none"><p>没有订阅任何rss</p></div></td>
34         <td  align="right" style="" valign="middle"><div class="div_submit">订阅RSS(2.0)种子:http://
35               <input name="text" type="text" value="www.marketingman.net/rss.xml"/><input type="Submit" name="Submit" value="提交" onclick="StartRequest(text.value)" class="button"/>
36         </div></></td>
37       </tr>
38           <tr>
39             <td valign="top" ID="td_channel" style="height: 28px; width: 200px;">
40               <div>频道列表:</div>
41             </td>
42             <td width="570" align="left" valign="top" bgcolor="#FFFFCC" id="td_item" style="height: 28px"><div style="background-color:#FFFFFF;width:100%">主题列表:</div></td>
43           </tr>
44           <tr>
45             <td style="width: 200px"></td>
46             <td><div align="right">Powered By poppy,MSN:poppy_rr@msn.com :)</div></td>
47         </tr>
48     </table>
49     </body>
50 </html>

js文件:
  1 var showNo=0;                   //用于记录当前选定的channel序号
  2 var div_item=new Array();          //不同频道的items显示用的div数组,需要跨方法(BindRssItem()、ShowRssItem())调用,并且ShowRssItem需要直接从网页调用(含参数),所以定义为全局变量
  3 var div_channel=new Array();    //同上
  4 var xmlHttp;
  5 
  6 function CreateXMLHttpRequest()
  7 {
  8     if (window.ActiveXObject)
  9     {
 10         //alert("ie");
 11         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
 12     }
 13     else if (window.XMLHttpRequest)
 14     {
 15         //alert("firefox");
 16         xmlHttp=new XMLHttpRequest();
 17     }
 18 }
 19 
 20 function Notice(callReadyState,callStatus)
 21 {
 22     var div_notice=document.getElementById("div_notice");
 23     //alert(div_notice.getElementsByTagName("p").item(0).childNodes[0].nodeValue);
 24     if (callReadyState==4 && callStatus==200)
 25     {
 26         div_notice.getElementsByTagName("p").item(0).childNodes[0].nodeValue="加载成功!:-)";  
 27         div_notice.className="loaded";  
 28         div_notice.align="center";
 29     }
 30     else if (callReadyState!=4)
 31     {
 32         div_notice.getElementsByTagName("p").item(0).childNodes[0].nodeValue="正在加载";
 33         div_notice.className="loading";      
 34     }
 35     else if (callReadyState==4 && callStatus!=200)
 36     {
 37         div_notice.getElementsByTagName("p").item(0).childNodes[0].nodeValue="加载失败!:-(";
 38         div_notice.className="none";  
 39     }
 40 }
 41 
 42 function handleStateChange()
 43 
 44     //alert("readyState:"+xmlHttp.readyState);
 45     if (xmlHttp.readyState==4)
 46     {   
 47         //alert("status:"+xmlHttp.status);
 48         //alert(xmlHttp.responseXML.xml);
 49         //alert(xmlHttp.status);
 50         Notice(xmlHttp.readyState,xmlHttp.status);
 51         if(xmlHttp.status==200||xmlHttp.status==0)
 52         {
 53             DeleteLastPage();
 54             
 55             //创建xml标签并加载来自(callUrl)的rss种子(callUrl)
 56             var xml_rss=xmlHttp.responseXML;
 57                 //alert(xml_rss.xml);
 58             var channel=xml_rss.selectNodes("rss/channel");
 59                // alert(channel[0].text);
 60             BindRss(channel,0);             //调用BindRss方法
 61         }
 62     }
 63     else
 64     {
 65         Notice(xmlHttp.readyState,0);
 66     }
 67     
 68 }
 69 
 70 function DeleteLastPage()
 71 {
 72     var td_item=document.getElementById("td_item");             //网页中用于存放item的单元格
 73     var td_channel=document.getElementById("td_channel");       //网页中用于存放channel的单元格
 74     //当PostBack的时候对当前页面dom进行初始化(删除上一操作生成的所有节点)
 75     if (td_channel.childNodes.length>1)
 76     {    
 77         //alert (document.getElementsByTagName("xml").length);
 78         
 79         //var div_channel_exits=document.getElementsByTagName("DIV");
 80         //alert (div_channel_exits[2].childNodes[1].nodeName);
 81         //alert (td_item.childNodes.length);
 82         var delete_item_exits;
 83             for (var a=1;a<td_item.childNodes.length;)      
 84             {
 85                 delete_item_exits=td_item.childNodes[a];
 86                 //alert ("item node:"+delete_item_exits.nodeName+","+td_item.childNodes.length);
 87                 td_item.removeChild(delete_item_exits);
 88             }
 89         var delete_channel_exits;
 90             for (var a=1;a<td_channel.childNodes.length;)
 91             {
 92                 delete_channel_exits=td_channel.childNodes[a];
 93                 //alert ("channel node:"+delete_item_exits.nodeName+","+td_channel.childNodes.length);
 94                 td_channel.removeChild(delete_channel_exits);
 95             }
 96         showNo=0;
 97     }
 98 }
 99 
100 function StartRequest(callUrl)
101 {
102     CreateXMLHttpRequest();
103     xmlHttp.onreadystatechange=handleStateChange;
104     xmlHttp.open("GET","http://"+callUrl,true);
105     xmlHttp.send();
106 }
107 
108 //BindRss方法:调用BindRssChannel、BindRssItem方法加载channel和item信息,最后ShowRssItem方法设定当前选定的channel下的items
109 function BindRss(channel,callShowNo)
110 {
111     for(var m=0;m<channel.length;m++)
112     {
113         div_channel[m]=document.createElement("div");
114             div_channel[m].className="div_channel";
115             td_channel.appendChild(div_channel[m]);
116         BindRssChannel(div_channel[m],channel,m);
117     
118         div_item[m]=document.createElement("div");
119             div_item[m].className="div_item hidden";
120             td_item.appendChild(div_item[m]);
121         BindRssItem(div_item[m],channel,m);    
122     }
123     ShowRssItem(callShowNo);
124 }
125 
126 //BindRssChannel方法:提取Chanel信息并且设定显示样式
127 function BindRssChannel(callDiv,callChannel,callM)
128 {
129     var div_channel=callDiv;
130     channel=callChannel;
131     var channel_title=channel[callM].getElementsByTagName("title");
132     var channel_link=channel[callM].getElementsByTagName("link");
133     var channel_description=channel[callM].getElementsByTagName("description");
134     //var channel_language="";
135     //var channel_image="";
136     //var channel_image_title="";
137     //var channel_image_url="";
138     //var channel_image_link="";
139 
140     //alert (channel_description.item(0).text);
141     var ch_description=document.createTextNode("简介:"+channel_description.item(0).text);
142     var ch_link_text=document.createTextNode("[频道"+(callM+1)+":]"+channel_title.item(0).text);
143         var ch_br=document.createElement("br");
144         var ch_p=document.createElement("p");
145     var ch_a=document.createElement("a");
146         ch_a.href=channel_link.item(0).text;
147         ch_a.appendChild(ch_link_text);
148         ch_a.target="blank";
149     ch_input=document.createElement("input");
150         ch_input.type="button";
151         ch_input.value="查看主题"
152         ch_input.onclick=function(){ShowRssItem(callM);};  //这句非常好!!!!
153         ch_input.className="button";
154         ch_input.id="ch_input_"+callM;
155     var ch_div=document.createElement("div");
156         ch_div.className="normal";
157     div_channel.appendChild(ch_a);
158     div_channel.appendChild(ch_br);
159     div_channel.appendChild(ch_input);
160     div_channel.appendChild(ch_p);
161     ch_p.appendChild(ch_div);
162     ch_div.appendChild(ch_description);
163     
164 }
165 
166 // ShowRssItem:显示不同channel的items http://www.ppitt.net/2317.HTM
167 function ShowRssItem(callShowNo)
168 {
169     div_item[showNo].className="div_item hidden";
170     div_channel[showNo].className="div_channel";
171     showNo=callShowNo;
172     div_item[showNo].className="div_item";
173     div_channel[showNo].className="div_channel_selected";
174 }
175 
176 //BindRssItem:提取指定频道的Item并且设定显示样式
177 function BindRssItem(callDiv,callChannel,callM)
178 {
179     channel_item=callChannel(callM).getElementsByTagName("item");
180     for (var n=0;n<channel_item.length;n++)
181     {
182         channel_item_title=channel_item.item(n).getElementsByTagName("title");
183         channel_item_description=channel_item.item(n).getElementsByTagName("description");
184         channel_item_link=channel_item.item(n).getElementsByTagName("link");
185             
186         var p=document.createElement("p");
187         var span=document.createElement("span");
188             span.className="notice";
189         var zhaiYao=document.createTextNode("摘要:");
190         var description=document.createTextNode(channel_item_description.item(0).text);
191         
192         var link_text=document.createTextNode(n+1+".标题:"+channel_item_title.item(0).text);
193         var a=document.createElement("a");
194             a.href=channel_item_link.item(0).text;
195             a.appendChild(link_text);
196             a.target="blank";
197         //alert(channel_item_description.item(0).text)
198         span.appendChild(zhaiYao);
199         callDiv.appendChild(a);
200         callDiv.appendChild(p);
201         p.appendChild(span);
202         p.appendChild(description);
203         //p.innerText+=channel_item_description.item(0).text;
204         //span.innerHTML=description;
205         td_item.appendChild(callDiv);
206     }
207 }

css样式表:
 1 .div_item
 2 {
 3     border-width:1;
 4     border-style:dashed;
 5     border-color:#666666;
 6     background-color:#FFFFCC;
 7     font-size:9pt;
 8     white-space:normal;
 9     width:570px;
10     
11 }
12 
13 .normal
14 {
15     font-size:9pt;
16 }
17 
18 .div_channel
19 {
20     border-width:1;
21     border-style:dashed;
22     border-color:#666666;
23     font-size:14px;
24     font-family:"黑体";
25     white-space:normal;
26     width:200px;
27     filter:BlendTrans(duration=5); 
28 }
29 
30 .div_channel_selected
31 {
32     border-width:1;
33     border-style:dashed;
34     border-color:#666666;
35     background-color:#FFFFCC;
36     font-size:9pt;
37     white-space:normal;
38     width:200px;
39 }
40 
41 .hidden
42 {
43     display:none;
44     filter:BlendTrans(duration=5);
45 }
46 
47 .div_submit
48 {
49     color:#333333
50     background-color:#FFFFFF;
51     border-width:1px;
52     border-style:dashed;
53     border-color:#666666;
54     height:100%;
55 }
56 
57 .button
58 {
59     border-style:double;
60     border-width:1px;
61     background-color:#FFFFFF;
62 }
63 
64 .notice
65 {
66     color:#993300;
67     font-size:12pt;
68     font-family:"??";
69     font-weight:bold;
70 }
71 
72 .loading
73 {
74     background-color:Red;
75     color:White;
76     width:80px;
77 }
78 
79 .loaded
80 {
81     color:White;
82     width:50%;
83     background-color:Green;    
84 }
85 
86 .none
87 {
88     background-color:Gray;    
89     color:White;
90     width:80px;
91 }




下载的文件已经更新。

190-202行改动如下:
var description=document.createTextNode(channel_item_description.item(0).childNodes[0].text);
var obj=channel_item_description.item(0).childNodes[0];
obj.text=obj.text.replace(/<!\[CDATA\[[^\]]/,"");
var hr=document.createElement("hr");
var link_text=document.createTextNode(n+1+".标题:"+channel_item_title.item(0).text);
var a=document.createElement("a");
a.href=channel_item_link.item(0).text;
a.appendChild(link_text);
a.target="blank";
span.appendChild(zhaiYao);
callDiv.appendChild(a);
callDiv.appendChild(p);
p.appendChild(span);
callDiv.innerHTML+=obj.text+"<hr/>";

posted on 2006-11-01 17:29 捕风 阅读(813) 评论(0)  编辑  收藏 所属分类: web 页面开发


只有注册用户登录后才能发表评论。


网站导航: