返回列表 发帖

主题
0 
积分
0 
贝壳
0 个 
注册时间
2006-11-29 
最后登录
2006-11-29 
楼主 跳转到 » 倒序看帖
打印
tT
chinanic发表于 2007-1-22 08:08 | 只看该作者

[JS技术]JS+ASP打造无刷新新闻列表

http://www.blueidea.com/articleimg/2007/01/4436/01.gif 如上图所示的新闻列表在各大网站中并不少见，有了新闻列表就少不了分页，今天我们要谈的就是各分页间的切换方式。传统的方法是将页码以URL参数的形式传到列表页，列表页内程序根据传入的参数来显示不同的内容，这之间就有了一次刷新。然而很多时候页面中的新闻列表只占该页布局的一小部分，分了更新这小部分的内容却得刷新整个页面的内容，有人抗议了，于是之后就有人采用XMLHTTP、AJAX等技术来实现无刷新更新列表。今天我们也要实现无刷新更新列表，但不使用XMLHTTP、AJAX等新技术，只使用传统的Javascript和ASP语言来实现。 一、问题的提出 公司网站要更新，前台昨天做完了，今天由我套程序，图1为公司新闻页中的新闻列表，看到它就突发奇想：做为网络公司的网站应该有点技术含量才行，那今天这列表也来玩玩无刷新。要达到只在局部进行更新，其实用浮动框架(iframe)也能做到，但是这个页面有背景图片且图案不是规则的，用浮动框架很难达到背景统一；那用XMLHTTP、AJAX？可惜这两个也只是接触一点皮毛，要用它们来实现无刷新还得翻阅一些资料，我也不想用它，因为我想到了用JavaScript+ASP也可以实现的，虽然思路暂时不是很清晰，但相信一定能行！ 二、分析问题 有玩过动网的人应该知道它在注册和登录页中都有验证码这一项，这验证码还有个功能：当数字不是很清晰时你可以用左键点击一下验证码，就能刷新成新的验证码了。注意，只刷新验证码，页面其他部分没刷新哦！以前我专门针对这个研究了好久，查阅了资料，后来总结成一篇文章叫"script调用asp实现过程"，有兴趣的朋友务必先看看，要不下边的您可能就看得不太明白了。 看了"script调用asp实现过程"再回头想想动网的验证码，您也大概知道我要怎么做了吧，呵呵。我们继续说，下边我们先来分析下图1中列表处的代码，代码如下：
  1. <div ID="titleLiNews">
  2. <ul>
  3. <li><a href="&#35;">于召开宽带异常掉线研究试点工作讨论会的通知</a> (2005-01-12)</li>
  4. <li><a href="&#35;">做好2005年中秋节网络监控和话务疏通工作的要</a>... (2005-01-12)</li>
  5. <li><a href="&#35;">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
  6. <li><a href="&#35;">加强防御第15号台风“卡努”的紧急通知</a>(2005-01-12)</li>
  7. <li><a href="&#35;">地下载9月第2周话单方式的ADSL掉线统计及清</a>...(2005-01-12)</li>
  8. <li><a href="&#35;">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2003-01-12)</li>
  9. <li><a href="&#35;">于加强防御第15号台风“卡努”的紧急通知</a>(2007-10-12)</li>
  10. <li><a href="&#35;">于召开宽带异常掉线研究试点工作讨论会的通知</a> (2005-01-12)</li>
  11. <li><a href="&#35;">做好2005年中秋节网络监控和话务疏通工作的要</a>... (2005-01-12)</li>
  12. <li><a href="&#35;">于要求做好中秋务高峰期间智能网业务通信保障相关</a>...(2005-01-12)</li>
  13. </ul>
  14. </div>
复制代码
在tianxia.css文件中我还找到了控制它的样式：
  1. &#35;titleLiNews {
  2. }
  3. &#35;titleLiNews ul {
  4. list-style-type: none;
  5. margin: 0px;
  6. padding: 0px;
  7. width: 550px;
  8. }
  9. &#35;titleLiNews ul li {
  10. font-size: 9px;
  11. line-height: 21px;
  12. color: &#35;0099FF;
  13. text-decoration: none;
  14. background-image: url(images/line02.jpg);
  15. background-repeat: no-repeat;
  16. margin: 0px 10px 0px 20px;
  17. padding: 0px;
  18. font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
  19. list-style-position: inside;
  20. list-style-type: disc;
  21. border-bottom-width: 1px;
  22. border-bottom-style: dotted;
  23. border-bottom-color: &#35;0051A2;
  24. }
  25. &#35;titleLiNews ul li a {
  26. color: &#35;FFFFFF;
  27. text-decoration: none;
  28. font-size: 12px;
  29. }
  30. &#35;titleLiNews ul li a:hover {
  31. color: &#35;FFFF00;
  32. text-decoration: underline;
  33. font-size: 12px;
  34. }
复制代码
OK，结合上边全部听到的看到的，我们不难想出这么一条思路：设计一个ASP页面，这个页面可接受参数即显示页数，该页程序查询数据库后根据参数进行分页并将结果以JS语法输出，公司新闻页中只须加一条语句调用即可。 三、解决问题 假设公司新闻页文件名：news.asp、查询页文件名：newslit.asp。 news.asp主要代码如下：
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>公司新闻</title>
  5. <script language="JavaScript" type="text/javascript">
  6. function showpage(n){
  7. document.scripts[1].src = "newslist.asp?page_no=" + n;
  8. }
  9. </script>
  10. <script language="JavaScript" type="text/javascript" src=""></script>
  11. </head>
  12. <body>
  13. <div ID="titleLiNews">
  14. </div>
  15. <a href="javascript:showpage(1);">1</a>& nbsp;<a href="javascript:showpage(2);">2</a>& nbsp;<a href="javascript:showpage(3);">3</a>
  16. <script language="JavaScript" type="text/javascript">showpage(1);</script>
  17. </body>
  18. </html>
复制代码
newslist.asp代码：
  1. <%
  2. Dim conn
  3. Set conn=server.createobject("ADODB.connection")
  4. conn.connectionstring="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("db1.mdb")
  5. conn.open
  6. Dim page_no,sqlstr,rs,i,str
  7. page_no = request.querystring("page_no")
  8. Sqlstr = "select * from news"
  9. Set rs = Server.CreateObject("ADODB.RecordSet")
  10. Rs.open sqlstr,conn,1,2
  11. Rs.pagesize = 3
  12. Rs.absolutepage = page_no
  13. Str = "document.getElementById(';titleLiNews';).innerHTML = ""<Ul>"
  14. If rs.eof then str = str & "<li>暂无新闻</li>" & "</Ul>';;"
  15. i = 3
  16. Do while not rs.eof and i > 0
  17. i = i-1
  18. str = str & "<li><a href=';newsview.asp?id=" & rs("id") & "';>" & rs("title") & "</a></li>"
  19. rs.movenext
  20. Loop
  21. str = str & "</Ul>"";"
  22. set rs=nothing
  23. set conn = nothing
  24. Response.write str
  25. %>
复制代码
四、后记 从"动网验证码"到"script调用asp实现过程"再到"Javascript+ASP打造无刷新新闻列表"，我们可以举一反三，例如注册用户时无刷新判断用户名是否被注册、无刷新表单验证等都可以用Javascript+ASP来实现了
收藏 分享

主题
0 
积分
0 
贝壳
0 个 
注册时间
2006-11-29 
最后登录
2006-11-29 
沙发
chinanic发表于 2007-1-22 08:15 | 只看该作者

[JS技术]JS+ASP打造无刷新新闻列表

最后还有一个小问题没有解决：下边的分页数列"首页、上10页、下10页、尾页"间怎么切换？你应该不会想用传统的方法用ASP进行查询然后显示数列吧？那我们之前对无刷新所做的努力可就全白费了！你首先应该想到的是再用Javascript+ASP实现无刷新显示数列，但这次我们也不用这个，我们有更简单的方法。 使用Javascript+ASP来显示分页数列的话那切换一次就得重新查询一次数据库，完全没有必要！我们只需在打开新闻列表页时查询一次数据库，将总页数保存起来(比如保存在一个隐藏的表单中)，以后列表的切换工作就交给Javascript了，还是Javascript+ASP，不过本质不一样了哦，先前是同步，这次是异步了。 实现方法： 1.在页面中新建两个隐藏的表单域，其中一个用于存放当前列表的最后一项，另一个用于存放总页数： 2.新建div标签用于存放分页数列：
3.加入Javascript脚本：
  1. //首页
  2. function first(){
  3. var table,endid,countpage,i;
  4. endid = parseInt(document.getElementById("endid").value);
  5. countpage = parseInt(document.getElementById("countpage").value);
  6. table = "<table height=';20'; border=';0'; align=';center'; cellpadding=';0'; cellspacing=';0';><tr>";
  7. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:first();';><img src=';images/First.gif'; width=';9'; height=';8'; border=';0'; title=';首页';></a></td>";
  8. if(countpage<=10){
  9. for(i=1;i<=countpage;i++){
  10. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  11. }
  12. document.getElementById("endid").value = countpage;
  13. }else{
  14. for(i=1;i<=10;i++){
  15. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  16. }
  17. document.getElementById("endid").value = "10";
  18. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:next();';><img src=';images/Next.gif'; width=';8'; height=';8'; border=';0';title=';下10页';></a></td>"
  19. }
  20. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:last();';><img src=';images/Last.gif'; width=';9'; height=';8'; border=';0';title=';尾页';></a></td>";
  21. table += "</tr></table>";
  22. document.getElementById("pageNews").innerHTML = table;
  23. }yF-K.(FvNhwm 47ko@ZQ`&#36; XLMIU1
  25. //上10页
  26. function previous(){
  27. var table,endid,countpage,i;
  28. endid = parseInt(document.getElementById("endid").value);
  29. countpage = parseInt(document.getElementById("countpage").value);
  30. table = "<table height=';20'; border=';0'; align=';center'; cellpadding=';0'; cellspacing=';0';><tr>";
  31. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:first();';><img src=';images/First.gif'; width=';9'; height=';8'; border=';0'; title=';首页';></a></td>";
  32. if(endid-20<1){
  33. for(i=1;i<=10;i++){
  34. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  35. }
  36. document.getElementById("endid").value = "10";
  37. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:next();';><img src=';images/Next.gif'; width=';8'; height=';8'; border=';0';title=';下10页';></a></td>"
  38. }else{
  39. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:previous();';><img src=';images/Previous.gif'; width=';8'; height=';8'; border=';0';title=';上10页';></a></td>";
  40. for(i = endid-19;i<= endid-10;i++){
  41. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  42. }
  43. document.getElementById("endid").value = endid-10;
  44. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:next();';><img src=';images/Next.gif'; width=';8'; height=';8'; border=';0';title=';下10页';></a></td>"
  45. }
  46. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:last();';><img src=';images/Last.gif'; width=';9'; height=';8'; border=';0';title=';尾页';></a></td>";
  47. table += "</tr></table>";
  48. document.getElementById("pageNews").innerHTML = table;
  49. }{AJQ=zBf\@rZDfUT5V ,O"L*4s
  51. //下10页
  52. function next(){
  53. var endid,table,countpage,i;
  54. endid = parseInt(document.getElementById("endid").value);
  55. countpage = parseInt(document.getElementById("countpage").value);
  56. table = "<table height=';20'; border=';0'; align=';center'; cellpadding=';0'; cellspacing=';0';><tr>";
  57. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:first();';><img src=';images/First.gif'; width=';9'; height=';8'; border=';0'; title=';首页';></a></td>";
  58. if(endid + 10>countpage){
  59. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:previous();';><img src=';images/Previous.gif'; width=';8'; height=';8'; border=';0';title=';上10页';></a></td>";
  60. for(i=endid + 1;i<=countpage;i++){
  61. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  62. }
  63. document.getElementById("endid").value = countpage;
  64. }else{
  65. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:previous();';><img src=';images/Previous.gif'; width=';8'; height=';8'; border=';0';title=';上10页';></a></td>";
  66. for(i=endid + 1;i<=endid + 10;i++){
  67. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  68. }
  69. document.getElementById("endid").value = endid + 10;
  70. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:next();';><img src=';images/Next.gif'; width=';8'; height=';8'; border=';0';title=';下10页';></a></td>"
  71. }
  72. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:last();';><img src=';images/Last.gif'; width=';9'; height=';8'; border=';0';title=';尾页';></a></td>";
  73. table += "</tr></table>";
  74. document.getElementById("pageNews").innerHTML = table;
  75. }PAnfT 3;_/G:)W 8*^tuq}YHY&#36;DBjsye&#35;
  77. //尾页
  78. function last(){
  79. var table,endid,countpage,i;
  80. endid = parseInt(document.getElementById("endid").value);
  81. countpage = parseInt(document.getElementById("countpage").value);
  82. table = "<table height=';20'; border=';0'; align=';center'; cellpadding=';0'; cellspacing=';0';><tr>";
  83. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:first();';><img src=';images/First.gif'; width=';9'; height=';8'; border=';0'; title=';首页';></a></td>";
  84. if(countpage<=10){
  85. for(i=1;i<=countpage;i++){
  86. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  87. }
  88. document.getElementById("endid").value = countpage;
  89. }else{
  90. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:previous();';><img src=';images/Previous.gif'; width=';8'; height=';8'; border=';0';title=';上10页';></a></td>";
  91. for(i=countpage - 9;i<=countpage;i++){
  92. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:showpage(" + i + ");';>" + i + "</a></td>";
  93. }
  94. document.getElementById("endid").value = countpage;
  95. }
  96. table += "<td width=';20'; align=';center'; valign=';middle';><a href=';javascript:last();';><img src=';images/Last.gif'; width=';9'; height=';8'; border=';0';title=';尾页';></a></td>";
  97. table += "</tr></table>";
  98. document.getElementById("pageNews").innerHTML = table;
  99. }
复制代码
4.将放在
后，用于初始化分页列表并将结果显示于div中。 5.在news.asp中加入程序，在页面打开时查询数据库，并将总页数保存于countnews中。 至此，整个新闻列表显示页就完整了。最后说一句：凡事，首先从简单的出发

TOP

返回列表 回复 发帖