圖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>
在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主要代碼如下：
<Html>
< head>
< meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
< title>公司新聞</title>
< script language="Javascript" type="text/Javascript">
function showpage(n){
document.scripts[1].src = "newslist.ASP?page_no=" + n;
}
< /script>
< script language="Javascript" type="text/Javascript" src=""></script>
< /head>
< body>
< div ID="titleLiNews">
< /div>
< a href="javascript:showpage(1);">1</a>& nbsp;<a href="Javascript:showpage(2);">2</a>& nbsp;<a href="Javascript:showpage(3);">3</a>
< script language="Javascript" type="text/Javascript">showpage(1);</script>
< /body>
< /Html>
newslist.ASP代碼：
<%
Dim conn
Set conn=server.createobject("ADODB.connection")
conn.connectionstring="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("db1.mdb")
conn.open
Dim page_no,sqlstr,rs,i,str
page_no = request.querystring("page_no")
Sqlstr = "select * from news"
Set rs = Server.CreateObject("ADODB.RecordSet")
Rs.open sqlstr,conn,1,2
Rs.pagesize = 3
Rs.absolutepage = page_no
Str = "document.getElementById('titleLiNews').innerHtml = ""<Ul>"
If rs.eof then str = str & "<li>暫無新聞</li>" & "</Ul>';"
i = 3
Do while not rs.eof and i > 0
i = i-1
str = str & "<li><a href='newsvIEw.ASP?id=" & rs("id") & "'>" & rs("title") & "</a></li>"
rs.movenext
Loop
str = str & "</Ul>"";"
set rs=nothing
set conn = nothing
Response.write str
%>
- 上一頁:原來JS是如此強悍
- 下一頁:仿google下拉提示