最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

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

日期:03-06    来源:网页设计秀Cnwebshow.com整理|    作者:

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

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

图1 最终效果图

  一、问题的提出

  公司网站要更新,前台昨天做完了,今天由我套程序,图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>