最近一段时间主要在看 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)' οnclick='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;width: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; width: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
![dot.gif](https://i-blog.csdnimg.cn/blog_migrate/2fb7a7a1351bea3c046ebb445cae4386.gif)
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)) + "
![dot.gif](https://i-blog.csdnimg.cn/blog_migrate/2fb7a7a1351bea3c046ebb445cae4386.gif)
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)' οnclick='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;width: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; width: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 >