如上图所示的新闻列表在各大网站中并不少见有了新闻列表就少不了分页今天我们要谈的就是各分页间的切换方式传统的方法是将页码以URL参数的形式传到列表页列表页内程序根据传入的参数来显示不同的内容这之间就有了一次刷新然而很多时候页面中的新闻列表只占该页布局的一小部分分了更新这小部分的内容却得刷新整个页面的内容有人抗议了于是之后就有人采用XMLHTTPAJAX等技术来实现无刷新更新列表今天我们也要实现无刷新更新列表但不使用XMLHTTPAJAX等新技术只使用传统的Javascript和ASP语言来实现
图 最终效果图
一问题的提出
公司网站要更新前台昨天做完了今天由我套程序图为公司新闻页中的新闻列表看到它就突发奇想做为网络公司的网站应该有点技术含量才行那今天这列表也来玩玩无刷新要达到只在局部进行更新其实用浮动框架(iframe)也能做到但是这个页面有背景图片且图案不是规则的用浮动框架很难达到背景统一那用XMLHTTPAJAX？可惜这两个也只是接触一点皮毛要用它们来实现无刷新还得翻阅一些资料我也不想用它因为我想到了用 JavaScript+ASP也可以实现的虽然思路暂时不是很清晰但相信一定能行！
二分析问题
有玩过动网的人应该知道它在注册和登录页中都有验证码这一项这验证码还有个功能当数字不是很清晰时你可以用左键点击一下验证码就能刷新成新的验证码了注意只刷新验证码页面其他部分没刷新哦！以前我专门针对这个研究了好久查阅了资料后来总结成一篇文章叫script调用asp实现过程有兴趣的朋友务必先看看要不下边的您可能就看得不太明白了
看了script调用asp实现过程再回头想想动网的验证码您也大概知道我要怎么做了吧呵呵我们继续说下边我们先来分析下图中列表处的代码代码如下
<div ID=titleLiNews>
<ul>
<li><a #>于召开宽带异常掉线研究试点工作讨论会的通知</a> ()</li>
<li><a #>做好年中秋节网络监控和话务疏通工作的要</a> ()</li>
<li><a #>于要求做好中秋务高峰期间智能网业务通信保障相关</a>()</li>
<li><a #>加强防御第号台风卡努的紧急通知</a>()</li>
<li><a #>地下载月第周话单方式的ADSL掉线统计及清</a>()</li>
<li><a #>于要求做好中秋务高峰期间智能网业务通信保障相关</a>()</li>
<li><a #>于加强防御第号台风卡努的紧急通知</a>()</li>
<li><a #>于召开宽带异常掉线研究试点工作讨论会的通知</a> ()</li>
<li><a #>做好年中秋节网络监控和话务疏通工作的要</a> ()</li>
<li><a #>于要求做好中秋务高峰期间智能网业务通信保障相关</a>()</li>
</ul>
</div>
在tianxiacss文件中我还找到了控制它的样式
#titleLiNews {
}
#titleLiNews ul {
liststyletype: none;
margin: px;
padding: px;
width: px;
}
#titleLiNews ul li {
fontsize: px;
lineheight: px;
color: #FF;
textdecoration: none;
backgroundimage: url(images/linejpg);
backgroundrepeat: norepeat;
margin: px px px px;
padding: px;
fontfamily: Verdana Arial Helvetica sansserif;
liststyleposition: inside;
liststyletype: disc;
borderbottomwidth: px;
borderbottomstyle: dotted;
borderbottomcolor: #A;
}
#titleLiNews ul li a {
color: #FFFFFF;
textdecoration: none;
fontsize: px;
}
#titleLiNews ul li a:hover {
color: #FFFF;
textdecoration: underline;
fontsize: px;
}
ID类伪类看这些样式我不得不想到Web标准我想美工在Web标准上也是下过功夫的不由得对他又多了些敬佩OK结合上边全部听到的看到的我们不难想出这么一条思路设计一个ASP页面这个页面可接受参数即显示页数该页程序查询数据库后根据参数进行分页并将结果以JS语法输出公司新闻页中只须加一条语句调用即可
三解决问题
假设公司新闻页文件名newsasp查询页文件名newslitasp
newsasp主要代码如下
<html>
<head>
<meta httpequiv=ContentType content=text/html; charset=gb />
<title>公司新闻</title>
<script language=JavaScript type=text/javascript>
function showpage(n){
documentscripts[]src = newslistasp?page_no= + n;
}
</script>
<script language=JavaScript type=text/javascript src=></script>
</head>
<body>
<div ID=titleLiNews>
</div>
<a javascript:showpage();></a>& nbsp;<a javascript:showpage();></a>& nbsp;<a javascript:showpage();></a>
<script language=JavaScript type=text/javascript>showpage();</script>
</body>
</html>
newslistasp代码
<%
Dim conn
Set conn=servercreateobject(nnection)
nnectionstring=provider=microsoftjetoledb; data source= & servermappath(dbmdb)
connopen
Dim page_nosqlstrrsistr
page_no = requestquerystring(page_no)
Sqlstr = select * from news
Set rs = ServerCreateObject(ADODBRecordSet)
Rsopen sqlstrconn
Rspagesize =
Rsabsolutepage = page_no
Str = documentgetElementById(titleLiNews)innerHTML = <Ul>
If rseof then str = str & <li>暂无新闻</li> & </Ul>;
i =
Do while not rseof and i >
i = i
str = str & <li><a & rs(id) & > & rs(title) & </a></li>
rsmovenext
Loop
str = str & </Ul>;
set rs=nothing
set conn = nothing
Responsewrite str
%>
四后记
从动网验证码到script调用asp实现过程再到Javascript+ASP打造无刷新新闻列表我们可以举一反三例如注册用户时无刷新判断用户名是否被注册无刷新表单验证等都可以用Javascript+ASP来实现了
