如上圖所示的新聞列表在各大網站中並不少見有了新聞列表就少不了分頁今天我們要談的就是各分頁間的切換方式傳統的方法是將頁碼以URL參數的形式傳到列表頁列表頁內程序根據傳入的參數來顯示不同的內容這之間就有了一次刷新然而很多時候頁面中的新聞列表只占該頁布局的一小部分分了更新這小部分的內容卻得刷新整個頁面的內容有人抗議了於是之後就有人采用XMLHTTPAJAX等技術來實現無刷新更新列表今天我們也要實現無刷新更新列表但不使用XMLHTTPAJAX等新技術只使用傳統的Javascript和ASP語言來實現
圖 最終效果圖
一問題的提出
公司網站要更新前台昨天做完了今天由我套程序圖為公司新聞頁中的新聞列表看到它就突發奇想做為網絡公司的網站應該有點技術含量才行那今天這列表也來玩玩無刷新要達到只在局部進行更新其實用浮動框架(iframe)也能做到但是這個頁面有背景圖片且圖案不是規則的用浮動框架很難達到背景統一那用XMLHTTPAJAX？可惜這兩個也只是接觸一點皮毛要用它們來實現無刷新還得翻閱一些資料我也不想用它因為我想到了用 JavaScript+ASP也可以實現的雖然思路暫時不是很清晰但相信一定能行！
二分析問題
有玩過動網的人應該知道它在注冊和登錄頁中都有驗證碼這一項這驗證碼還有個功能當數字不是很清晰時你可以用左鍵點擊一下驗證碼就能刷新成新的驗證碼了注意只刷新驗證碼頁面其他部分沒刷新哦！以前我專門針對這個研究了好久查閱了資料後來總結成一篇文章叫script調用asp實現過程有興趣的朋友務必先看看要不下邊的您可能就看得不太明白了
看了script調用asp實現過程再回頭想想動網的驗證碼您也大概知道我要怎麼做了吧呵呵我們繼續說下邊我們先來分析下圖中列表處的代碼代碼如下
<div ID=titleLiNews>
<ul>
<li><a #>於召開寬帶異常掉線研究試點工作討論會的通知</a> ()</li>
<li><a #>做好年中秋節網絡監控和話務疏通工作的要</a> ()</li>
<li><a #>於要求做好中秋務高峰期間智能網業務通信保障相關</a>()</li>
<li><a #>加強防御第號台風卡努的緊急通知</a>()</li>
<li><a #>地下載月第周話單方式的ADSL掉線統計及清</a>()</li>
<li><a #>於要求做好中秋務高峰期間智能網業務通信保障相關</a>()</li>
<li><a #>於加強防御第號台風卡努的緊急通知</a>()</li>
<li><a #>於召開寬帶異常掉線研究試點工作討論會的通知</a> ()</li>
<li><a #>做好年中秋節網絡監控和話務疏通工作的要</a> ()</li>
<li><a #>於要求做好中秋務高峰期間智能網業務通信保障相關</a>()</li>
</ul>
</div>
在tianxiacss文件中我還找到了控制它的樣式
#titleLiNews {
}
#titleLiNews ul {
liststyletype: none;
margin: px;
padding: px;
width: px;
}
#titleLiNews ul li {
fontsize: px;
lineheight: px;
color: #FF;
textdecoration: none;
backgroundimage: url(images/linejpg);
backgroundrepeat: norepeat;
margin: px px px px;
padding: px;
fontfamily: Verdana Arial Helvetica sansserif;
liststyleposition: inside;
liststyletype: disc;
borderbottomwidth: px;
borderbottomstyle: dotted;
borderbottomcolor: #A;
}
#titleLiNews ul li a {
color: #FFFFFF;
textdecoration: none;
fontsize: px;
}
#titleLiNews ul li a:hover {
color: #FFFF;
textdecoration: underline;
fontsize: px;
}
ID類偽類看這些樣式我不得不想到Web標准我想美工在Web標准上也是下過功夫的不由得對他又多了些敬佩OK結合上邊全部聽到的看到的我們不難想出這麼一條思路設計一個ASP頁面這個頁面可接受參數即顯示頁數該頁程序查詢數據庫後根據參數進行分頁並將結果以JS語法輸出公司新聞頁中只須加一條語句調用即可
三解決問題
假設公司新聞頁文件名newsasp查詢頁文件名newslitasp
newsasp主要代碼如下
<html>
<head>
<meta httpequiv=ContentType content=text/html; charset=gb />
<title>公司新聞</title>
<script language=JavaScript type=text/javascript>
function showpage(n){
documentscripts[]src = newslistasp?page_no= + n;
}
</script>
<script language=JavaScript type=text/javascript src=></script>
</head>
<body>
<div ID=titleLiNews>
</div>
<a javascript:showpage();></a>& nbsp;<a javascript:showpage();></a>& nbsp;<a javascript:showpage();></a>
<script language=JavaScript type=text/javascript>showpage();</script>
</body>
</html>
newslistasp代碼
<%
Dim conn
Set conn=servercreateobject(nnection)
nnectionstring=provider=microsoftjetoledb; data source= & servermappath(dbmdb)
connopen
Dim page_nosqlstrrsistr
page_no = requestquerystring(page_no)
Sqlstr = select * from news
Set rs = ServerCreateObject(ADODBRecordSet)
Rsopen sqlstrconn
Rspagesize =
Rsabsolutepage = page_no
Str = documentgetElementById(titleLiNews)innerHTML = <Ul>
If rseof then str = str & <li>暫無新聞</li> & </Ul>;
i =
Do while not rseof and i >
i = i
str = str & <li><a & rs(id) & > & rs(title) & </a></li>
rsmovenext
Loop
str = str & </Ul>;
set rs=nothing
set conn = nothing
Responsewrite str
%>
四後記
從動網驗證碼到script調用asp實現過程再到Javascript+ASP打造無刷新新聞列表我們可以舉一反三例如注冊用戶時無刷新判斷用戶名是否被注冊無刷新表單驗證等都可以用Javascript+ASP來實現了
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25415.html
