JS+ASP打造无刷新新闻列表

最新推荐文章于 2022-09-18 19:10:00 发布
最新推荐文章于 2022-09-18 19:10:00 发布
阅读量110 收藏
点赞数
文章标签： ASP JavaScript Ajax 框架 工作 ViewUI
如上图所示的新闻列表在各大网站中并不少见，有了新闻列表就少不了分页，今天我们要谈的就是各分页间的切换方式。传统的方法是将页码以URL参数的形式传到列表页，列表页内程序根据传入的参数来显示不同的内容，这之间就有了一次刷新。然而很多时候页面中的新闻列表只占该页布局的一小部分，分了更新这小部分的内容却得刷新整个页面的内容，有人抗议了，于是之后就有人采用XMLHTTP、AJAX等技术来实现无刷新更新列表。今天我们也要实现无刷新更新列表，但不使用XMLHTTP、AJAX等新技术，只使用传统的Javascript和ASP语言来实现。
一、问题的提出
公司网站要更新，前台昨天做完了，今天由我套程序，图1为公司新闻页中的新闻列表，看到它就突发奇想：做为网络公司的网站应该有点技术含量才行，那今天这列表也来玩玩无刷新。要达到只在局部进行更新，其实用浮动框架(iframe)也能做到，但是这个页面有背景图片且图案不是规则的，用浮动框架很难达到背景统一；那用XMLHTTP、AJAX？可惜这两个也只是接触一点皮毛，要用它们来实现无刷新还得翻阅一些资料，我也不想用它，因为我想到了用JavaScript+ASP也可以实现的，虽然思路暂时不是很清晰，但相信一定能行！
二、分析问题
有玩过动网的人应该知道它在注册和登录页中都有验证码这一项，这验证码还有个功能：当数字不是很清晰时你可以用左键点击一下验证码，就能刷新成新的验证码了。注意，只刷新验证码，页面其他部分没刷新哦！以前我专门针对这个研究了好久，查阅了资料，后来总结成一篇文章叫"script调用asp实现过程"，有兴趣的朋友务必先看看，要不下边的您可能就看得不太明白了。
看了"script调用asp实现过程"再回头想想动网的验证码，您也大概知道我要怎么做了吧，呵呵。我们继续说，下边我们先来分析下图1中列表处的代码，代码如下：
=================
<divID="titleLiNews">
<ul>
<li><ahref="#">于召开宽带异常掉线研究试点工作讨论会的通知</a>(2005-01-12)</li>
<li><ahref="#">做好2005年中秋节网络监控和话务疏通工作的要</a>...(2005-01-12)</li>
<li><ahref="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
<li><ahref="#">加强防御第15号台风“卡努”的紧急通知</a>(2005-01-12)</li>
<li><ahref="#">地下载9月第2周话单方式的ADSL掉线统计及清</a>...(2005-01-12)</li>
<li><ahref="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2003-01-12)</li>
<li><ahref="#">于加强防御第15号台风“卡努”的紧急通知</a>(2007-10-12)</li>
<li><ahref="#">于召开宽带异常掉线研究试点工作讨论会的通知</a>(2005-01-12)</li>
<li><ahref="#">做好2005年中秋节网络监控和话务疏通工作的要</a>...(2005-01-12)</li>
<li><ahref="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
</ul>
</div>
===================
在tianxia.css文件中我还找到了控制它的样式：
#titleLiNews{
}
#titleLiNewsul{
list-style-type:none;
margin:0px;
padding:0px;
width:550px;
}
#titleLiNewsulli{
font-size:9px;
line-height:21px;
color:#0099FF;
text-decoration:none;
background-image:url(images/line02.jpg);
background-repeat:no-repeat;
margin:0px10px0px20px;
padding:0px;
font-family:"Verdana","Arial","Helvetica","sans-serif";
list-style-position:inside;
list-style-type:disc;
border-bottom-width:1px;
border-bottom-style:dotted;
border-bottom-color:#0051A2;
}
#titleLiNewsullia{
color:#FFFFFF;
text-decoration:none;
font-size:12px;
}
#titleLiNewsullia:hover{
color:#FFFF00;
text-decoration:underline;
font-size:12px;
}
=====================
ID类、伪类，看这些样式，我不得不想到Web标准，我想美工在Web标准上也是下过功夫的，不由得对他又多了些敬佩。OK，结合上边全部听到的看到的，我们不难想出这么一条思路：设计一个ASP页面，这个页面可接受参数即显示页数，该页程序查询数据库后根据参数进行分页并将结果以JS语法输出，公司新闻页中只须加一条语句调用即可。

三、解决问题

假设公司新闻页文件名：news.asp、查询页文件名：newslit.asp。

news.asp主要代码如下：
======================
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>公司新闻</title>
<scriptlanguage="JavaScript"type="text/javascript">
functionshowpage(n){
document.scripts[1].src="newslist.asp?page_no="+n;
}
</script>
<scriptlanguage="JavaScript"type="text/javascript"src=""></script>
</head>
<body>
<divID="titleLiNews">
</div>
<ahref="javascript:showpage(1);">1</a>&nbsp;<ahref="javascript:showpage(2);">2</a>&nbsp;<ahref="javascript:showpage(3);">3</a>
<scriptlanguage="JavaScript"type="text/javascript">showpage(1);</script>
</body>
</html>
==================
newslist.asp代码：
<%
Dimconn
Setconn=server.createobject("ADODB.connection")
conn.connectionstring="provider=microsoft.jet.oledb.4.0;datasource="&server.mappath("db1.mdb")
conn.open
Dimpage_no,sqlstr,rs,i,str
page_no=request.querystring("page_no")
Sqlstr="select*fromnews"
Setrs=Server.CreateObject("ADODB.RecordSet")
Rs.opensqlstr,conn,1,2
Rs.pagesize=3
Rs.absolutepage=page_no
Str="document.getElementById('titleLiNews').innerHTML=""<Ul>"
Ifrs.eofthenstr=str&"<li>暂无新闻</li>"&"</Ul>';"
i=3
Dowhilenotrs.eofandi>0
i=i-1
str=str&"<li><ahref='newsview.asp?id="&rs("id")&"'>"&rs("title")&"</a></li>"
rs.movenext
Loop
str=str&"</Ul>"";"
setrs=nothing
setconn=nothing
Response.writestr
%>
最后还有一个小问题没有解决：下边的分页数列"首页、上10页、下10页、尾页"间怎么切换？你应该不会想用传统的方法用ASP进行查询然后显示数列吧？那我们之前对无刷新所做的努力可就全白费了！你首先应该想到的是再用Javascript+ASP实现无刷新显示数列，那你的思维就不够灵活了，呵呵，我们有更简单的方法。

使用Javascript+ASP来显示分页数列的话那切换一次就得重新查询一次数据库，完全没有必要！我们只需在打开新闻列表页时查询一次数据库，将总页数保存起来(比如保存在一个隐藏的表单中)，以后列表的切换工作就交给Javascript了，还是Javascript+ASP，不过本质不一样了哦，先前是同步，这次是异步了。

实现方法：
1.在页面中新建两个隐藏的表单域，其中一个用于存放当前列表的最后一项，另一个用于存放总页数：


2.在news.asp中加入程序，在页面打开时查询数据库，并将总页数保存于countnews中。

3.加入Javascript脚本：
//首页
functionfirst(){
vartable,endid,countpage,i;
endid=parseInt(document.getElementById("endid").value);
countpage=parseInt(document.getElementById("countpage").value);
table="<tableheight='20'border='0'align='center'cellpadding='0'cellspacing='0'><tr>";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:first();'><imgsrc='images/First.gif'width='9'height='8'border='0'title='首页'></a></td>";
if(countpage<=10){
for(i=1;i<=countpage;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=countpage;
}else{
for(i=1;i<=10;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value="10";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:next();'><imgsrc='images/Next.gif'width='8'height='8'border='0'title='下10页'></a></td>"
}
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:last();'><imgsrc='images/Last.gif'width='9'height='8'border='0'title='尾页'></a></td>";
table+="</tr></table>";
document.getElementById("pageNews").innerHTML=table;
}UZ&!tXs\~mlMN&E:BnohY8*8/Kuw-0GSB

//上10页
functionprevious(){
vartable,endid,countpage,i;
endid=parseInt(document.getElementById("endid").value);
countpage=parseInt(document.getElementById("countpage").value);
table="<tableheight='20'border='0'align='center'cellpadding='0'cellspacing='0'><tr>";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:first();'><imgsrc='images/First.gif'width='9'height='8'border='0'title='首页'></a></td>";
if(endid-20<1){
for(i=1;i<=10;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value="10";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:next();'><imgsrc='images/Next.gif'width='8'height='8'border='0'title='下10页'></a></td>"
}else{
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:previous();'><imgsrc='images/Previous.gif'width='8'height='8'border='0'title='上10页'></a></td>";
for(i=endid-19;i<=endid-10;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=endid-10;
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:next();'><imgsrc='images/Next.gif'width='8'height='8'border='0'title='下10页'></a></td>"
}
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:last();'><imgsrc='images/Last.gif'width='9'height='8'border='0'title='尾页'></a></td>";
table+="</tr></table>";
document.getElementById("pageNews").innerHTML=table;
}"QeKq`r=~[~O(

//下10页
functionnext(){
varendid,table,countpage,i;
endid=parseInt(document.getElementById("endid").value);
countpage=parseInt(document.getElementById("countpage").value);
table="<tableheight='20'border='0'align='center'cellpadding='0'cellspacing='0'><tr>";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:first();'><imgsrc='images/First.gif'width='9'height='8'border='0'title='首页'></a></td>";
if(endid+10>countpage){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:previous();'><imgsrc='images/Previous.gif'width='8'height='8'border='0'title='上10页'></a></td>";
for(i=endid+1;i<=countpage;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=countpage;
}else{
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:previous();'><imgsrc='images/Previous.gif'width='8'height='8'border='0'title='上10页'></a></td>";
for(i=endid+1;i<=endid+10;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=endid+10;
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:next();'><imgsrc='images/Next.gif'width='8'height='8'border='0'title='下10页'></a></td>"
}
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:last();'><imgsrc='images/Last.gif'width='9'height='8'border='0'title='尾页'></a></td>";
table+="</tr></table>";
document.getElementById("pageNews").innerHTML=table;
}3'AuTNmbku5

//尾页
functionlast(){
vartable,endid,countpage,i;
endid=parseInt(document.getElementById("endid").value);
countpage=parseInt(document.getElementById("countpage").value);
table="<tableheight='20'border='0'align='center'cellpadding='0'cellspacing='0'><tr>";
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:first();'><imgsrc='images/First.gif'width='9'height='8'border='0'title='首页'></a></td>";
if(countpage<=10){
for(i=1;i<=countpage;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=countpage;
}else{
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:previous();'><imgsrc='images/Previous.gif'width='8'height='8'border='0'title='上10页'></a></td>";
for(i=countpage-9;i<=countpage;i++){
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:showpage("+i+");'>"+i+"</a></td>";
}
document.getElementById("endid").value=countpage;
}
table+="<tdwidth='20'align='center'valign='middle'><ahref='javascript:last();'><imgsrc='images/Last.gif'width='9'height='8'border='0'title='尾页'></a></td>";
table+="</tr></table>";
document.getElementById("pageNews").innerHTML=table;
}
至此，整个新闻列表显示页就完整了。
iteye_6481
关注
asp.net新闻列表生成静态页之批量和单页生成
01-01
大家都知道，生成静态页的方法有两种，第一种是使用C#在后台硬编码，第二种是读取模板文件，使用字符串代替。总体来讲第一种方法代码量比较大，维护起来有点困难。生成静态页的目的是为了提高用户体验度，加快访问速度。 使用静态页面还有如下好处： 1、 安全：使用静态页面，用户访问的使没有任何操作功能的html页面，可以说从安全性方面大大提高了程序及服务器的安全。 2、 快速：用户访问的是提前生成好的静态页面，使用户对页面的请求瓶颈只受IO的限制而不会有其他方面的影响。 3、 降低服务器，数据库负载：因为用户访问的是静态页，对承载静态页的服务器配置要求降低了许多，同时，不会因为过大的访问量，造成数据库服务
asp+ajax打造无刷新新闻评论系统
08-25
### ASP+AJAX 打造无刷新新闻评论系统详解 #### 一、引言 随着互联网技术的发展，用户体验成为衡量网站质量的重要指标之一。传统的Web应用程序每次用户操作都会导致整个页面重新加载，这种方式不仅增加了服务器的...
Javascript+ASP打造无刷新新闻列表
johncools的博客
01-22 1156
如上图所示的新闻列表在各大网站中并不少见，有了新闻列表就少不了分页，今天我们要谈的就是各分页间的切换方式。传统的方法是将页码以URL参数的形式传到列表页，列表页内程序根据传入的参数来显示不同的内容，这之间就有了一次刷新。然而很多时候页面中的新闻列表只占该页布局的一小部分，分了更新这小部分的内容却得刷新整个页面的内容，有人抗议了，于是之后就有人采用XMLHTTP、AJAX等技术来实现无刷新更新列表。
asp+javascript无刷新新闻列表
我本无名的专栏
02-26 1463
假设公司新闻页文件名：news.asp、查询页文件名：newslit.asp。　　news.asp主要代码如下：　　公司新闻function showpage(n){document.scripts[1].src = "newslist.asp?page_no=" + n;} 1& nbsp;2& nbsp;3showpage(1);　　newslist.asp代码：　　Dim c
ASP实例开发源码—ASP+Ajax 不刷新网页加载新闻列表示例代码.zip
11-14
这个示例可能展示了如何在用户滚动新闻列表或者点击某个触发事件时，通过Ajax向ASP服务器发送请求，获取新的新闻数据，然后在客户端使用JavaScript更新新闻列表，而无需整个页面刷新，从而提升用户体验。 具体到...
一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步
10-29
在本教程中，我们将逐步构建一个美观的新闻列表页面，具备无刷新分页和内容预览功能。在上一部分中，我们已经完成了需求分析，明确了以下几个关键功能： 1. 动态显示新闻列表。 2. 实现分页加载新闻列表。 3. 无...
ASP+AJAX打造无刷新新闻评论系统
01-17
总的来说，"ASP+AJAX打造无刷新新闻评论系统"涉及到的技术栈包括但不限于ASP（或Java）、AJAX、XMLHttpRequest、JavaScript、JSON、DOM操作以及可能的数据库交互。掌握这些技术，开发者能够创建出响应迅速、用户体验...
基于ASP的Ajax 不刷新网页加载新闻列表示例代码.zip
最新发布
07-10
【标题】：“基于ASP的Ajax 不刷新网页加载新闻列表示例代码.zip”是一个包含ASP（Active Server Pages）技术与Ajax（Asynchronous JavaScript and XML）相结合的网页开发示例。这个项目旨在展示如何在不刷新整个...
ASP无刷新加载更多1.2【支持本地调试】
10-17
ASP无刷新加载更多1.2【支持本地调试】
asp+js无刷新更新
08-05
asp+js无刷新更新 实用的无刷新技术
javascript 新闻标题静态分页代码 (无刷新)
01-21
一个模板，从数据库取n条记录，生成静态。 做单页面的静态化,索引页面是用JS对数组进行组合的。 因为记录只是一个标题，一个链接，字节数不会太大， 那么用js去用这个大数组进行分页，貌似不错,很节约带宽! 还是很棒的，简单，实用，值得推荐！ JS代码： 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_time = store_time; } var ii = 0; var item = new Array(); i
javaweb三层架构实现新闻列表.rar
11-16
javaweb三层架构实现新闻列表.rarjavaweb三层架构实现新闻列表.rarjavaweb三层架构实现新闻列表.rarjavaweb三层架构实现新闻列表.rarvjavaweb三层架构实现新闻列表.rarjavaweb三层架构实现新闻列表.rarv
jQuery+AJAX+ASP无刷新提交、删除、翻页实例
05-17
内容索引:ASP源码,Ajax相关,无刷新提交,无刷新表单,Ajax　　很不错的一个在ASP中应用jQuery框架的AJAX实例，它的功能是完成一个无刷新提交、删除并翻页的评论程序，发表评论时同样可以无刷新判断输入信息是否正确，程序采用ACCESS数据库，想学习ASP|AJAX的朋友，这个实例相信会对你很有用。测试时候发现验证码不能正确显示，可能生成验证码的时候需要组件吧，不过这不是本实例所要演示的功能。
asp+ajax 无刷新新闻列表，点击分页不局部刷新（代码，有下载）
weixin_30847271的博客
01-14 116
共有2个文件 <!--index.asp--> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>公司新闻</title><script language="JavaScript" type...
web新手——新闻列表这样写不容易出错
diuti7873的博客
12-23 239
1、先写结构 a.如果列表没有时间 结构为：<li><a>新闻内容</a></li> b.如果列表有时间 结构为：<li><a>新闻内容</a><span>时间</span></li> 2、给li添加高度 3、若列表有时间，...
ASP+AJAX制作无刷新新闻评论系统03
weixin_30872499的博客
10-03 93
服务器处理程序　　根据JS代码页的分段介绍，我们了解此系统的功能大致包括评论的显示处理、评论的删除处理、评论的提交处理三个功能，那么我们就根据这三个功能分别介绍。　　评论的显示处理页面：pl_list.asp　　此程序为asp生成xml文件，通过分页的方式将评论的内容以XML的形式呈现出来，我们可以单独运行代码： <!--#include file="conn.asp"--&gt...
web的三大列表
disnijxjs的博客
09-18 593
web的三大列表
ASP+AJAX构建无刷新新闻评论系统详解
本文将详细介绍如何使用ASP+AJAX来构建一个无刷新新闻评论系统。 首先，让我们从数据库设计开始。在这个系统中，我们有一个名为PL的表，包含了评论的基本信息，如用户ID（user）、时间戳(dateandtime)、评论内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值