基于web的RSS阅读器，盗用AJAX之名

技术2022-05-11 68

终于有时间做一下总结了……这是我在WC培训的第一个项目，内容如题。盗用AJAX之名是何解呢？其实项目中只是用了XMLHttpRequest请求RSS feed，并没有实现什么与服务器的异步交互，用这个名字，胖子说是为了以后项目组来看人的时候有卖点。唉，浮躁~~项目之后就说，自己懂HTML/XML,CSS,DOM,AJAX,javascipt，挺能忽悠人的。需求分析倒是没有什么好说的了，毕竟地球人都用过RSS。只是我们的胖子比较变态，要我们用CSS的滤镜实现摘要内容的渐变效果。呵呵，如果你以为三行代码就搞定那种就错了，他指定用Alpha滤镜，晕吧！主要的难处就是用javascript修改CSS、设置改变的时间间隔，从而控制alpha滤镜，实现渐变效果。 l l把处于透明状态的层置于不透明的层之上，这时依然能看到下层（不透明的层）的内容，通过透明的层； l然后，逐渐让上层不透明、下层透明，达到渐变的效果 l由setInterval()控制渐变的速度 l注意，setInterval()时间参数与setTimeout()时间参数要保持一定比例，确保clearInterval()执行时，渐变已完成看看代码吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Kam's Rss Reader</title><style type="text/css"></style></head><body οnlοad="loadXML()"><script type="text/javascript">//由于不善于利用JS，也懒得传参数，所以滥用了一些全局变量 var running; //用于判断是否在自动播放，ruuning==1时为自动播放，running==0时手动 var items; //记录RSS feed中item节点的数组 var channel_title; //记录当前频道名称 var x; var i; var j; //x，i，j均为setInterval()的返回参数 var count; //记录当前项目的变量 var URL; //记录当前feed地址的变量 //对xml文件的请求，判断使用何种浏览器 function makeRequest() { 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){} } } } //请求并获取xml文件function loadXML() { makeRequest(); if(!xmlhttp) { spanCount.innerHTML = "sorry, there is something wrong!"; return false; } else { xmlhttp.onreadystatechange = readXML;//当xmlhttp发生更改时，执行readXML()函数 y = document.getElementById("menu");//从下拉列表获取URL，即feed的地址 URL = y.options[y.selectedIndex].value; xmlhttp.open("Get",URL,true);//open(string method, string url, boolean asynch, string username, string password) xmlhttp.send(null); //向服务器发送 HTTP 请求并接收响应。使用 send() 方法发送的数据可以是字符串、无符号字节数组或 XML DOM 对象。使用 send() 方法发送的数据是可选的，并且可能为空。根据 open() 方法中的 asynch 参数值，send() 方法为同步或异步。如果为同步，则在检索整个响应之前该方法将不返回。如果为异步，则该方法将立即返回 } }function readXML() {//调用 send() 方法之后，readyState 属性将设置为 2。当请求完成加载时，readyState 属性将设置为 4 if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { spanCount.innerHTML="Finished!";//测试语句 var xmlDoc = xmlhttp.responseXML;//从服务器中检索 XML DOM 对象形式的响应 count = 0;//初始化计数器 items = xmlDoc.getElementsByTagName("item");//获取xml文件中所有item节点并存储到items数组中 var tmp = new Array(); tmp = xmlDoc.getElementsByTagName("channel"); //这里为什么是.data而不是.nodevalue???????????????? channel_title = tmp[0].getElementsByTagName("title")[0] .firstChild.data;//获取频道名称信息 running = 1;//设置running状态，令一启动即自动播放 next_m(count);//开始播放item节点的内容 } } else { spanCount.innerHTML="loading...!"; } }function play()//自动播放函数 { if( running == 0 )//若在自动播放状态 { x = setInterval("next_m()",3000);//每隔3秒执行播放下一个item节点的内容 running = 1; document.Form1.stand.value = "暂停";//改变按钮上的提示字 } else if( running == 1 )//若在手动播放状态 { clearInterval(x);//停止计时器，根据setInterval()的返回值确定 running = 0; document.Form1.stand.value = "开始"; } }function change()//产生渐变效果函数 { //具体思想： //把处于透明状态的层置于不透明的层之上，这时依然能看到下层（不透明的层）的内容，通过透明的层； //然后，逐渐让上层不透明、下层透明，达到渐变的效果 //由setInterval()控制渐变的速度 //注意，setInterval()时间参数与setTimeout()时间参数要保持一定比例，确保clearInterval()执行时，渐变已完成 if(divNews1.filters.alpha.Opacity == 100 && divNews2.filters.alpha.Opacity == 0) { //alert(divNews1.filters.alpha.Opacity); divNews1.style.zIndex = 1; divNews2.style.zIndex = 2; i = setInterval("see2()",5); setTimeout("clearInterval(i)",2000); } else //if(divNews2.filters.alpha.Opacity==100 && divNews1.filters.alpha.Opacity==0) { divNews1.style.zIndex = 2; divNews2.style.zIndex = 1; j = setInterval("see1()",5); setTimeout("clearInterval(j)",2000); } }function see2(m,n) { divNews1.filters.item("alpha").Opacity -= 5;//每次变化10的性能比较好，但画面有点卡 divNews2.filters.item("alpha").Opacity += 5;//5可能比较慢 }function see1(m,n) { divNews1.filters.item("alpha").Opacity += 5; divNews2.filters.item("alpha").Opacity -= 5; }function next_m() { if(running == 1)//防止渐变的计数器与播放的计数器重叠，影响播放效果，所以让其重新计数 { clearInterval(x); x = setInterval("next_m()",3000); } count++; if(count > items.length)//令items数组能实现循环 count = 1; if( divNews1.style.zIndex == 1)//把下一个要显示的items的内容显示在下方且透明的层上 { divNews1.innerHTML = display_m(count); change(); } else //if( divNews2.style.zIndex == 1) { divNews2.innerHTML = display_m(count); change(); } }function pre_m()//同next_m() { if(running == 1) { clearInterval(x); x = setInterval("next_m()",3000); } count--; if(count < 1) count = items.length; if( divNews1.style.zIndex == 1) { divNews1.innerHTML = display_m(count); change(); } else //if( divNews2.style.zIndex == 1) { divNews2.innerHTML = display_m(count); change(); } }//把next_m和pre_m变为一个函数，可以实现的，可缩短代码量function display_m( m )//提取items内容并显示的函数 { m--;//数组下标从0开始，而count从1开始，-1以匹配 try//异常捕获，当出现节点为空、编码不兼容等问题时，保证网页不会崩溃 { title_D = items[m].getElementsByTagName("title")[0].firstChild.nodeValue; url_D = items[m].getElementsByTagName("link")[0].firstChild.nodeValue; desc_D = items[m].getElementsByTagName("description")[0].firstChild.nodeValue; date_D = items[m].getElementsByTagName("pubDate")[0].firstChild.nodeValue; } catch(e){} spanCount.innerText = "Message " + (++m) + " of " + items.length;//更新在右上角的计数栏 return "<b>"+channel_title+": </b><a href="+url_D+">"+title_D+"</a><hr/>"+date_D+"<hr/>"+desc_D; //返回页面要显示的其他内容 }function add_s()//给下拉选择单添加新的feed，并自动开始播放新添加的feed { url_n = prompt("请输入要订阅的feed名称"); url = prompt("请输入要订阅的feed地址"); tmp = document.getElementById("menu"); tmp.add(new Option( url_n, url )); oo = document.getElementsByTagName("option"); tmp.selectedIndex = oo.length - 1; loadXML(); }</script><form name="Form1"> <div id="divNewsTitle"> <b>Rss阅读器</b> <span id="spanCount"></span> </div> <hr/> <div id="divAd"> <div id="divNews1"></div> <div id="divNews2"></div> </div> <hr/> <div id="divControls" align="center"> <input name="pre" type="button" value="后退" οnclick="pre_m()"/> <input name="stand" type="button" value="暂停" οnclick="play()"/> <input name="next" type="button" value="前进" οnclick="next_m()"/> <hr/> <select id="menu" οnchange="loadXML()"> <option value="http://blog.csdn.net/ganhui/Rss.aspx">kam的blog</option> <option value="http://192.168.0.55//Rss.xml">fei的blog</option> </select> <input name="" type="button" value="添加Feed" οnclick="add_s()"/> </div></form></body></html> 记录下来，以后自己嘲笑自己一下，试试放到googlepages上去，嘻嘻。这个版本只能在IE上运行，自己用的是firefox，说这话真羞愧…… ps 真郁闷，为何有些语句IE和FF不都支持呢。

专利

最新回复(0)