最近一段时间主要在看 ajax 的资料，挺有意思的。。。做了一个简单的 RSS 阅读器（网页版）。
今天改了一下，增加一个分页。有些 RSS 请求回来动辄上百条 item 记录，不方便阅读。。。请求回来后在内存分页，不能说是真正意义上的分页~
<!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>
<title>我的聚合阅读器</title>
<style type="text/css">
body,div{font-size:12px;}
#list { line-height:24px;}
#pager a { text-decoration:none;color:blue; }
#pager a:hover { text-decoration:underline; color:Red; }
hr { width:500px; text-align:left;}
#bg { background-color:#666; display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
#mrssList { background-color:#fff;position:absolute; display:none; text-align:center; width:400px; height:300px;}
#t {height:21px;background-color:#ccc;text-align:right;padding:5px 5px 0px 5px;}
#t a { text-decoration:none;}
</style>
<script type="text/javascript">
// JScript source code
var curPage;
var ajax;
function getList()
{
var tips = document.getElementById("tips");
var r = document.getElementById("rssUrl").value.length==0 ?
document.getElementById("rssList").options[document.getElementById("rssList").selectedIndex].value :
document.getElementById("rssUrl").value;
if(r.length<=0)
{
list.innerHTML = "<font color=red>请选择一个 RSS 目录项目或输入 RSS 地址！</font>";
}
else
{
document.getElementById("list").innerHTML = "loading
";
ajax = new XMLHttpRequest();
var url = r + "?" + Math.random();
ajax.open("get",url,true);
ajax.send(null);
ajax.onreadystatechange = function()
{
if((ajax.readyState==4)&&(ajax.status==200))
showPage();
else if((ajax.readyState==4)&&(ajax.status!=200))
document.getElementById("list").innerHTML = "读取数据错误！";
}
}
}
function showPage(p0)
{
curPage = isNaN(p0) ? 1 : parseInt(p0);//当前页
var pager = document.getElementById("pager");
pager.innerHTML = "";
var f = 0;
document.getElementById("list").innerHTML = "";
items = ajax.responseXML.getElementsByTagName("item");
var tl = t_len.options[t_len.selectedIndex].text; //标题字数
var pz = parseInt(pageSize.options[pageSize.selectedIndex].text); //显示的记录数
var pageCount = Math.ceil(items.length / pz); //总页数
//不是最后一页，显示到当前页的记录数，否则，显示到总记录数
var prc = (curPage == pageCount) ? items.length : pz * curPage;
for(var i = pz * (curPage - 1); i < prc; i++) //总页数 当前页记录数据
{
title = items[i].getElementsByTagName("title")[0].text;
if((title.indexOf(keyw.value) > 0) || (keyw.value.length<=0))
{
link = items[i].getElementsByTagName("link")[0].text;
var t = title.length>parseInt(tl) ? title.substring(0,parseInt(tl)) + "" : title;
a = "<a href='" + link + "' target='_blank' title='" + title + "'>" + t + "</a>";
document.getElementById("list").innerHTML += (i + 1) + ". " + a + "<br />";
f++;
}
}
/*没有找到结果*/
if(f==0)
document.getElementById("list").innerHTML = "没有找到符合要求的结果！";
/*分页显示*/
if(items.length > pz)
{
for(var i2 = 0;i2 < (items.length / pz);i2++)
{
if((i2 + 1) == curPage)
pager.innerHTML += " <font color=red>[" + curPage + "]</font> ";
else
pager.innerHTML += " <a href='javascript:void(0)' onclick='javascript:showPage(" + (i2 + 1) + ")'>[" + (i2 + 1) + "]</a> ";
}
}
pager.innerHTML += "<br />共接收到 " + items.length + " 条记录！";
}
function clsRssUrl()
{
document.getElementById("rssUrl").value="";
}
function mRssList()
{
bg.style.width = "100%";
bg.style.height = "100%";
bg.style.display = "block";
var ms = mrssList.style;
ms.display = "none";
ms.left = "100px";
ms.top = "60px";
ms.display = "block";
}
function hRssList()
{
bg.style.display = "none";
mrssList.style.display = "none";
}
</script>
</head>
<body topmargin="0" leftmargin="0">
<div id="bg"></div>
<div id="mrssList">
<div id="t">
<span style="float:left;">管理 RSS 目录</span>
<a href="javascript:void(0)" onclick="hRssList()"><b>×</b></a>
</div>
</div>
<input type="text" id="rssUrl" style="font-size:12px;500px;" /><br />
RSS 目录：
<select id="rssList" onchange="clsRssUrl()">
<option value="">选择一个</option>
<option value="http://www.cnblogs.com/jarod99/rss/">我的博客</option>
<option value="http://forum.csdn.net/Rss/Ajax/UnClosedList/">CSDN Ajax</option>
<option value="http://forum.csdn.net/Rss/J2SE/UnClosedList/">CSDN Java</option>
<option value="http://rss.sina.com.cn/news/allnews/tech.xml">新浪：焦点新闻</option>
<option value="http://rss.sina.com.cn/tech/rollnews.xml">新浪：科技要闻汇总</option>
<option value="http://rss.sina.com.cn/tech/notebook/193_1.xml">新浪：笔记本</option>
<option value="http://rss.sina.com.cn/finance/jsy.xml">新浪：股市及时雨</option>
<option value="http://rss.sina.com.cn/roll/stock/hot_roll.xml">新浪：股票要闻汇总</option>
</select> <a href="javascript:void(0)" onclick="javascript:mRssList()">管理目录</a>
<br />
标题显示字数设置：
<select id="t_len">
<option>20</option>
<option>30</option>
<option>40</option>
<option selected>50</option>
</select>
记录数：
<select id="pageSize">
<option>10</option>
<option>15</option>
<option>20</option>
<option>30</option>
<option>50</option>
</select>
<hr />
关键字：
<input type="text" value="" style="font-size:12px; 100px;" id="keyw" />
<input type="button" style="font-size:12px;" value="查找" id="search" onclick="getList()" />
<a href="javascript:void(0)" onclick="history.go()">刷新</a>
<hr />
<div id="list"></div>
<hr />
<div id="pager"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>我的聚合阅读器</title>
<style type="text/css">
body,div{font-size:12px;}
#list { line-height:24px;}
#pager a { text-decoration:none;color:blue; }
#pager a:hover { text-decoration:underline; color:Red; }
hr { width:500px; text-align:left;}
#bg { background-color:#666; display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
#mrssList { background-color:#fff;position:absolute; display:none; text-align:center; width:400px; height:300px;}
#t {height:21px;background-color:#ccc;text-align:right;padding:5px 5px 0px 5px;}
#t a { text-decoration:none;}
</style>
<script type="text/javascript">
// JScript source code
var curPage;
var ajax;
function getList()
{
var tips = document.getElementById("tips");
var r = document.getElementById("rssUrl").value.length==0 ?
document.getElementById("rssList").options[document.getElementById("rssList").selectedIndex].value :
document.getElementById("rssUrl").value;
if(r.length<=0)
{
list.innerHTML = "<font color=red>请选择一个 RSS 目录项目或输入 RSS 地址！</font>";
}
else
{
document.getElementById("list").innerHTML = "loading
";ajax = new XMLHttpRequest();
var url = r + "?" + Math.random();
ajax.open("get",url,true);
ajax.send(null);
ajax.onreadystatechange = function()
{
if((ajax.readyState==4)&&(ajax.status==200))
showPage();
else if((ajax.readyState==4)&&(ajax.status!=200))
document.getElementById("list").innerHTML = "读取数据错误！";
}
}
}
function showPage(p0)
{
curPage = isNaN(p0) ? 1 : parseInt(p0);//当前页
var pager = document.getElementById("pager");
pager.innerHTML = "";
var f = 0;
document.getElementById("list").innerHTML = "";
items = ajax.responseXML.getElementsByTagName("item");
var tl = t_len.options[t_len.selectedIndex].text; //标题字数
var pz = parseInt(pageSize.options[pageSize.selectedIndex].text); //显示的记录数
var pageCount = Math.ceil(items.length / pz); //总页数
//不是最后一页，显示到当前页的记录数，否则，显示到总记录数
var prc = (curPage == pageCount) ? items.length : pz * curPage;
for(var i = pz * (curPage - 1); i < prc; i++) //总页数 当前页记录数据
{
title = items[i].getElementsByTagName("title")[0].text;
if((title.indexOf(keyw.value) > 0) || (keyw.value.length<=0))
{
link = items[i].getElementsByTagName("link")[0].text;
var t = title.length>parseInt(tl) ? title.substring(0,parseInt(tl)) + "
" : title;a = "<a href='" + link + "' target='_blank' title='" + title + "'>" + t + "</a>";
document.getElementById("list").innerHTML += (i + 1) + ". " + a + "<br />";
f++;
}
}
/*没有找到结果*/
if(f==0)
document.getElementById("list").innerHTML = "没有找到符合要求的结果！";
/*分页显示*/
if(items.length > pz)
{
for(var i2 = 0;i2 < (items.length / pz);i2++)
{
if((i2 + 1) == curPage)
pager.innerHTML += " <font color=red>[" + curPage + "]</font> ";
else
pager.innerHTML += " <a href='javascript:void(0)' onclick='javascript:showPage(" + (i2 + 1) + ")'>[" + (i2 + 1) + "]</a> ";
}
}
pager.innerHTML += "<br />共接收到 " + items.length + " 条记录！";
}
function clsRssUrl()
{
document.getElementById("rssUrl").value="";
}
function mRssList()
{
bg.style.width = "100%";
bg.style.height = "100%";
bg.style.display = "block";
var ms = mrssList.style;
ms.display = "none";
ms.left = "100px";
ms.top = "60px";
ms.display = "block";
}
function hRssList()
{
bg.style.display = "none";
mrssList.style.display = "none";
}
</script>
</head>
<body topmargin="0" leftmargin="0">
<div id="bg"></div>
<div id="mrssList">
<div id="t">
<span style="float:left;">管理 RSS 目录</span>
<a href="javascript:void(0)" onclick="hRssList()"><b>×</b></a>
</div>
</div>
<input type="text" id="rssUrl" style="font-size:12px;500px;" /><br />
RSS 目录：
<select id="rssList" onchange="clsRssUrl()">
<option value="">选择一个</option>
<option value="http://www.cnblogs.com/jarod99/rss/">我的博客</option>
<option value="http://forum.csdn.net/Rss/Ajax/UnClosedList/">CSDN Ajax</option>
<option value="http://forum.csdn.net/Rss/J2SE/UnClosedList/">CSDN Java</option>
<option value="http://rss.sina.com.cn/news/allnews/tech.xml">新浪：焦点新闻</option>
<option value="http://rss.sina.com.cn/tech/rollnews.xml">新浪：科技要闻汇总</option>
<option value="http://rss.sina.com.cn/tech/notebook/193_1.xml">新浪：笔记本</option>
<option value="http://rss.sina.com.cn/finance/jsy.xml">新浪：股市及时雨</option>
<option value="http://rss.sina.com.cn/roll/stock/hot_roll.xml">新浪：股票要闻汇总</option>
</select> <a href="javascript:void(0)" onclick="javascript:mRssList()">管理目录</a>
<br />
标题显示字数设置：
<select id="t_len">
<option>20</option>
<option>30</option>
<option>40</option>
<option selected>50</option>
</select>
记录数：
<select id="pageSize">
<option>10</option>
<option>15</option>
<option>20</option>
<option>30</option>
<option>50</option>
</select>
<hr />
关键字：
<input type="text" value="" style="font-size:12px; 100px;" id="keyw" />
<input type="button" style="font-size:12px;" value="查找" id="search" onclick="getList()" />
<a href="javascript:void(0)" onclick="history.go()">刷新</a>
<hr />
<div id="list"></div>
<hr />
<div id="pager"></div>
</body>
</html>