JS+ASP实现无刷新新闻列表方法
作者:dnawo 来源:蓝色理想 发布时间:2007-08-22 12:44:00
目的:JS+ASP打造无刷新新闻列表,下图所示的新闻列表相信大家并不少见,包括新闻的分页功能,本文要介绍的就是各分页间的切换方式。
传统的方法是将页码以URL参数的形式传到列表页,列表页内程序根据传入的参数来显示不同的内容,这之间就有了一次刷新。然而很多时候页面中的新闻列表只占该页布局的一小部分,分了更新这小部分的内容却得刷新整个页面的内容,有人抗议了,于是之后就有人采用XMLHTTP、AJAX等技术来实现无刷新更新列表。今天我们也要实现无刷新更新列表,但不使用XMLHTTP、AJAX等新技术,只使用传统的Javascript和ASP语言来实现。
一、问题的提出
公司网站要更新,前台昨天做完了,今天由我套程序,图1为公司新闻页中的新闻列表,看到它就突发奇想:做为网络公司的网站应该有点技术含量才行,那今天这列表也来玩玩无刷新。要达到只在局部进行更新,其实用浮动框架(iframe)也能做到,但是这个页面有背景图片且图案不是规则的,用浮动框架很难达到背景统一;那用XMLHTTP、AJAX?可惜这两个也只是接触一点皮毛,要用它们来实现无刷新还得翻阅一些资料,我也不想用它,因为我想到了用JavaScript+ASP也可以实现的,虽然思路暂时不是很清晰,但相信一定能行!
二、分析问题
有玩过动网的人应该知道它在注册和登录页中都有验证码这一项,这验证码还有个功能:当数字不是很清晰时你可以用左键点击一下验证码,就能刷新成新的验证码了。注意,只刷新验证码,页面其他部分没刷新哦!以前我专门针对这个研究了好久,查阅了资料,后来总结成一篇文章叫"script调用asp实现过程",有兴趣的朋友务必先看看,要不下边的您可能就看得不太明白了。
看了"script调用asp实现过程"再回头想想动网的验证码,您也大概知道我要怎么做了吧,呵呵。我们继续说,下边我们先来分析下图1中列表处的代码,代码如下:
<div ID="titleLiNews">
<ul>
<li><a href="#">于召开宽带异常掉线研究试点工作讨论会的通知</a> (2005-01-12)</li>
<li><a href="#">做好2005年中秋节网络监控和话务疏通工作的要</a>... (2005-01-12)</li>
<li><a href="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
<li><a href="#">加强防御第15号台风“卡努”的紧急通知</a>(2005-01-12)</li>
<li><a href="#">地下载9月第2周话单方式的ADSL掉线统计及清</a>...(2005-01-12)</li>
<li><a href="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2003-01-12)</li>
<li><a href="#">于加强防御第15号台风“卡努”的紧急通知</a>(2007-10-12)</li>
<li><a href="#">于召开宽带异常掉线研究试点工作讨论会的通知</a> (2005-01-12)</li>
<li><a href="#">做好2005年中秋节网络监控和话务疏通工作的要</a>... (2005-01-12)</li>
<li><a href="#">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
</ul>
</div>
在tianxia.css文件中我还找到了控制它的样式:
#titleLiNews {
}
#titleLiNews ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 550px;
}
#titleLiNews ul li {
font-size: 9px;
line-height: 21px;
color: #0099FF;
text-decoration: none;
background-image: url(images/line02.jpg);
background-repeat: no-repeat;
margin: 0px 10px 0px 20px;
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;
}
#titleLiNews ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
}
#titleLiNews ul li a:hover {
color: #FFFF00;
text-decoration: underline;
font-size: 12px;
}
ID类、伪类,看这些样式,我不得不想到Web标准,我想美工在Web标准上也是下过功夫的,不由得对他又多了些敬佩。OK,结合上边全部听到的看到的,我们不难想出这么一条思路:设计一个ASP页面,这个页面可接受参数即显示页数,该页程序查询数据库后根据参数进行分页并将结果以JS语法输出,公司新闻页中只须加一条语句调用即可。
猜你喜欢
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮,能让浏览用户在发现一篇有价值的文章时,可以通过社会化网络快速分享给自己的好友,
- 以前写JS程序的时候,经常碰到了定位的问题。但每次都看到一半,找到需要的属性就了事了。今天下了狠心,要花点时间,彻底地弄明白他。以下内容看着
- 技巧 16:如果页面需要很长时间才能完成,那么执行前使用 Response.IsClientConnected 如果用户性急,他们可能会在您
- object.OpenTextFile(filename[, iomode[, create[, format]]]) 参数 object
- 添加用户(随着用户的创建,自动产生与用户同名的schema) CREATE USER "TESTER" PROFILE
- 因为写js经常需要用到访问样式,我们常用的做法是通过 DOM.style.XXX来读写样式信息的。可是DOM.style这种写法只能访问&l
- 实际上,在web开发中,cookie仅仅是一个文本文件,当用户访问站点时,它就被存储在用户使用的计算机上,其中,保存了一些信息,当用户日后再
- 作为一个MySQL的系统管理员,你有责任维护你的MySQL数据库系统的数据安全性和完整性。本文主要主要介绍如何建立一个安全的MySQL系统,
- iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹 w
- 之前写过一篇文章《EmEditor代码片段插件介绍》,现在项目越来越多,越来越大,不再用EmEditor,而用IntelliJ IDEA。这
- SWFObject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入Fla
- 是否曾经有过这样的经历:把一个元素置于另一个元素之上,而希望下面的那个元素成为可点击的?现在,利用css的pointer-events属性即
- 如果你看到别人写trim函数是用循环而不用正则表达式来写,请不要取笑,也许,他们就是高手。如果你很自信你的trim函数效率很高,请看完本文再
- 在用户体验量化方法研究(一)中,我们以用户体验层次模型为基础,提出了三种量化用户体验的方法:以任务为中心、以行为为中心以及以体验为中心的量化
- MySQL 客户端连接成功后,通过 show [session|global]status 命令 可以提供服务器状态信息,也可以在操作系统上
- asp之家注:本文介绍了使用asp来获取access数据库中的一条随机记录的方法,简单实用,相信对初学者有所帮助,根据这个方法其实我们可以实
- 举例如下:<HTML> <HEAD>  
- 下面这段代码是兼容IE的图片切换代码,请问各位老鸟如何兼容FF,或者有相类似无按钮无数字兼容FF的图片切换代码?<!DOCTYPE h
- 目前,各大搜索引擎如google、百度、雅虎已经对动态页面诸如asp,php有着不错的支持了,只要动态页面后面的参数不要太长,如控制在3个参
- 一、正则表达式概述 如果原来没有使用过正则表达式,那么可能对这个术语和概念会不太熟悉。不过,它们并不是您想象的那么新奇。请回想一下在硬盘上是