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

最新推荐文章于 2025-04-05 10:45:07 发布

ganhui

最新推荐文章于 2025-04-05 10:45:07 发布

阅读量858

点赞数

文章标签： ajax rss web xmlhttprequest function url

本文链接：https://blog.youkuaiyun.com/ganhui/article/details/1501210

版权

终于有时间做一下总结了……
这是我在WC培训的第一个项目，内容如题。
盗用AJAX之名是何解呢？
其实项目中只是用了XMLHttpRequest请求RSS feed，并没有实现什么与服务器的异步交互，用这个名字，胖子说是为了以后项目组来看人的时候有卖点。
唉，浮躁~~
项目之后就说，自己懂HTML/XML,CSS,DOM,AJAX,javascipt，挺能忽悠人的。
需求分析倒是没有什么好说的了，毕竟地球人都用过RSS。
只是我们的胖子比较变态，要我们用CSS的滤镜实现摘要内容的渐变效果。
呵呵，如果你以为三行代码就搞定那种就错了，他指定用Alpha滤镜，晕吧！
主要的难处就是用javascript修改CSS、设置改变的时间间隔，从而控制alpha滤镜，实现渐变效果。

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">

<head>

<title>Kam's Rss Reader</title>

<!--

#divNews1

{

filter:alpha(Opacity=100);

position:absolute;

margin-top:auto;

z-index:2;

height:400px;

width:500px;

overflow:scroll;

}

#divNews2

{

filter:alpha(Opacity=0);

position:absolute;

margin-top:auto;

z-index:1;

height:400px;

width:500px;

overflow:scroll;

}

#divAd

{

height:400px;

width:500px;

}

body

{

border:groove;

width:500px;

height:400px;

}

-->

</style>

</head>

//由于不善于利用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>

<div id="divNewsTitle"> <b>Rss阅读器</b>                        <span id="spanCount"></span>  </div>

<hr/>

</div>

<hr/>

<hr/>

<option value="http://blog.youkuaiyun.com/ganhui/Rss.aspx">kam的blog</option>

<option value="http://192.168.0.55//Rss.xml">fei的blog</option>

</select>

</div>

</form>

</body>

</html>

记录下来，以后自己嘲笑自己一下，试试放到googlepages上去，嘻嘻。
这个版本只能在IE上运行，自己用的是firefox，说这话真羞愧……

ps 真郁闷，为何有些语句IE和FF不都支持呢。