e股脑电脑教程网
  • 首 页
  • 操作系统
  • 应用软件
  • 下载工具
  • 影音视频
  • 办公软件
  • 媒体制作
  • 网站建设
  • 平面设计
  • 数据库
  • 程序开发
  • 视频教程
编辑推荐: | 文章搜索:
您现在的位置: e股脑 >> 程序开发 >> ASP教程 >> JS+ASP打造无刷新新闻列表 >> 教程正文
 
教程搜索
 
 
相关教程
  • JS+ASP打造无刷新新闻列表
  • 在VisualJ++中编写ASPCOM
  • ADOAPI参考(DataControl对
  • ADOAPI参考(DataSpace对象
  • ADOAPI参考(Parameter对象
  • ADOAPI参考(ADO集合)
  • ADOAPI参考(ADO方法)之二
  • ADOAPI参考(ADO方法)之一
  • ADOAPI参考(ADO方法)之四
  • ADOAPI参考(ADO方法)之三
  • ADOAPI参考(ADO方法)之五
  • ADOAPI参考(ADO动态属性)
  • ADOAPI参考(ADO属性)
  • 利用W3JMAIL组件收POP3邮
  • 调试asp的组件时,不需重
  • 给你的FileSystemObject对
 
 
赞 助 商
 
 
JS+ASP打造无刷新新闻列表
  • 来源:e股脑
  • 点击次数:
  • 更新时间:2008-2-4

  

  如上图所示的新闻列表在各大网站中并不少见,有了新闻列表就少不了分页,今天我们要谈的就是各分页间的切换方式。传统的方法是将页码以URL参数的形式传到列表页,列表页内程序根据传入的参数来显示不同的内容,这之间就有了一次刷新。然而很多时候页面中的新闻列表只占该页布局的一小部分,分了更新这小部分的内容却得刷新整个页面的内容,有人抗议了,于是之后就有人采用XMLHTTP、AJAX等技术来实现无刷新更新列表。今天我们也要实现无刷新更新列表,但不使用XMLHTTP、AJAX等新技术,只使用传统的JavaScript和ASP语言来实现。

  一、问题的提出

  公司网站要更新,前台昨天做完了,今天由我套程序,图1为公司新闻页中的新闻列表,看到它就突发奇想:做为网络公司的网站应该有点技术含量才行,那今天这列表也来玩玩无刷新。要达到只在局部进行更新,其实用浮动框架(iframe)也能做到,但是这个页面有背景图片且图案不是规则的,用浮动框架很难达到背景统一;那用XMLHTTP、AJAX?可惜这两个也只是接触一点皮毛,要用它们来实现无刷新还得翻阅一些资料,我也不想用它,因为我想到了用JavaScript+ASP也可以实现的,虽然思路暂时不是很清晰,但相信一定能行!

  二、分析问题

  有玩过动网的人应该知道它在注册和登录页中都有验证码这一项,这验证码还有个功能:当数字不是很清晰时你可以用左键点击一下验证码,就能刷新成新的验证码了。注意,只刷新验证码,页面其他部分没刷新哦!以前我专门针对这个研究了好久,查阅了资料,后来总结成一篇文章叫"script调用ASP实现过程",有兴趣的朋友务必先看看,要不下边的您可能就看得不太明白了。

  看了"script调用ASP实现过程"再回头想想动网的验证码,您也大概知道我要怎么做了吧,呵呵。我们继续说,下边我们先来分析下图1中列表处的代码,代码如下:

  于召开宽带异常掉线研究试点工作讨论会的通知 (2005-01-12)

  做好2005年中秋节网络监控和话务疏通工作的要... (2005-01-12)

  于要求做好中秋务高峰期间智能网业务通信保障相关...(2005-01-12)

  加强防御第15号台风“卡努”的紧急通知(2005-01-12)

  地下载9月第2周话单方式的ADSL掉线统计及清...(2005-01-12)

  于要求做好中秋务高峰期间智能网业务通信保障相关...(2003-01-12)

  于加强防御第15号台风“卡努”的紧急通知(2007-10-12)

  于召开宽带异常掉线研究试点工作讨论会的通知 (2005-01-12)

  做好2005年中秋节网络监控和话务疏通工作的要... (2005-01-12)

  于要求做好中秋务高峰期间智能网业务通信保障相关...(2005-01-12)

  在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语法输出,公司新闻页中只须加一条语句调用即可。

  三、解决问题

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

  news.ASP主要代码如下:

  1& nbsp;2& nbsp;3

  newslist.ASP代码:

  四、后记

  从"动网验证码"到"script调用ASP实现过程"再到"JavaScript+ASP打造无刷新新闻列表",我们可以举一反三,例如注册用户时无刷新判断用户名是否被注册、无刷新表单验证等都可以用JavaScript+ASP来实现了。

  • 上一篇教程: 在VisualJ++中编写ASPCOM组件
  • 下一篇教程: 没有了
  •  

    关于本站 | 广告联系 | 版权声明 | 使用帮助

    Copyright © 2004-2008 www.egunao.com All rights reserved.