思路还是很清晰的,虽然只是实现了样本功能,但是其它的也都是大同小异。
有这么几个地方值得以后借鉴:
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"><p class="style3">poppy's RSS2.0页面订阅器(test for IE6+)</p>
28 <p 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><p /></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/>";