您的位置: 首页 > 技术文档 > 网络编程 > JS+ASP打造无刷新新闻列表
打造简单的PHP&MYSQL留言板 回到列表 如何生成XML数据
 JS+ASP打造无刷新新闻列表

作者:dnawo 时间: 2007-01-19 文档类型:原创 来自:蓝色理想

第 1 页 Javascript+ASP打造无刷新新闻列表 [1]
第 2 页 Javascript+ASP打造无刷新新闻列表 [2]

dnawo的个人站点:http://www.mzwu.com/

如上图所示的新闻列表在各大网站中并不少见,有了新闻列表就少不了分页,今天我们要谈的就是各分页间的切换方式。传统的方法是将页码以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语法输出,公司新闻页中只须加一条语句调用即可。

出处:蓝色理想
责任编辑:blue

上一页 下一页 Javascript+ASP打造无刷新新闻列表 [2]

◎进入论坛网络编程版块参加讨论

相关文章 更多相关链接
网页制作前台之javascript
FLASH与ASP通信原理入门
asp检测文件编码
JavaScript的目的
Js 按照MVC模式制作自定义控件
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2