|
dnawo的個人站點：http://www.mzwu.com/
如上圖所示的新聞列表在各大網(wǎng)站中并不少見，有了新聞列表就少不了分頁，今天我們要談的就是各分頁間的切換方式。傳統(tǒng)的方法是將頁碼以URL參數(shù)的形式傳到列表頁，列表頁內(nèi)程序根據(jù)傳入的參數(shù)來顯示不同的內(nèi)容，這之間就有了一次刷新。然而很多時候頁面中的新聞列表只占該頁布局的一小部分，分了更新這小部分的內(nèi)容卻得刷新整個頁面的內(nèi)容，有人抗議了，于是之后就有人采用XMLHTTP、AJAX等技術(shù)來實現(xiàn)無刷新更新列表。今天我們也要實現(xiàn)無刷新更新列表，但不使用XMLHTTP、AJAX等新技術(shù)，只使用傳統(tǒng)的Javascript和ASP語言來實現(xiàn)。
一、問題的提出
公司網(wǎng)站要更新，前臺昨天做完了，今天由我套程序，圖1為公司新聞頁中的新聞列表，看到它就突發(fā)奇想：做為網(wǎng)絡(luò)公司的網(wǎng)站應(yīng)該有點技術(shù)含量才行，那今天這列表也來玩玩無刷新。要達到只在局部進行更新，其實用浮動框架(iframe)也能做到，但是這個頁面有背景圖片且圖案不是規(guī)則的，用浮動框架很難達到背景統(tǒng)一；那用XMLHTTP、AJAX？可惜這兩個也只是接觸一點皮毛，要用它們來實現(xiàn)無刷新還得翻閱一些資料，我也不想用它，因為我想到了用JavaScript+ASP也可以實現(xiàn)的，雖然思路暫時不是很清晰，但相信一定能行！
二、分析問題
有玩過動網(wǎng)的人應(yīng)該知道它在注冊和登錄頁中都有驗證碼這一項，這驗證碼還有個功能：當(dāng)數(shù)字不是很清晰時你可以用左鍵點擊一下驗證碼，就能刷新成新的驗證碼了。注意，只刷新驗證碼，頁面其他部分沒刷新哦！以前我專門針對這個研究了好久，查閱了資料，后來總結(jié)成一篇文章叫"script調(diào)用asp實現(xiàn)過程"，有興趣的朋友務(wù)必先看看，要不下邊的您可能就看得不太明白了。
看了"script調(diào)用asp實現(xiàn)過程"再回頭想想動網(wǎng)的驗證碼，您也大概知道我要怎么做了吧，呵呵。我們繼續(xù)說，下邊我們先來分析下圖1中列表處的代碼，代碼如下：
<div ID="titleLiNews">
<ul>
<li><a href="#">于召開寬帶異常掉線研究試點工作討論會的通知</a> (2005-01-12)</li>
<li><a href="#">做好2005年中秋節(jié)網(wǎng)絡(luò)監(jiān)控和話務(wù)疏通工作的要</a>... (2005-01-12)</li>
<li><a href="#">于要求做好中秋務(wù)高峰期間智能網(wǎng)業(yè)務(wù)通信保障相關(guān)</a>...(2005-01-12)</li>
<li><a href="#">加強防御第15號臺風(fēng)“卡努”的緊急通知</a>(2005-01-12)</li>
<li><a href="#">地下載9月第2周話單方式的ADSL掉線統(tǒng)計及清</a>...(2005-01-12)</li>
<li><a href="#">于要求做好中秋務(wù)高峰期間智能網(wǎng)業(yè)務(wù)通信保障相關(guān)</a>...(2003-01-12)</li>
<li><a href="#">于加強防御第15號臺風(fēng)“卡努”的緊急通知</a>(2007-10-12)</li>
<li><a href="#">于召開寬帶異常掉線研究試點工作討論會的通知</a> (2005-01-12)</li>
<li><a href="#">做好2005年中秋節(jié)網(wǎng)絡(luò)監(jiān)控和話務(wù)疏通工作的要</a>... (2005-01-12)</li>
<li><a href="#">于要求做好中秋務(wù)高峰期間智能網(wǎng)業(yè)務(wù)通信保障相關(guān)</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，結(jié)合上邊全部聽到的看到的，我們不難想出這么一條思路：設(shè)計一個ASP頁面，這個頁面可接受參數(shù)即顯示頁數(shù)，該頁程序查詢數(shù)據(jù)庫后根據(jù)參數(shù)進行分頁并將結(jié)果以JS語法輸出，公司新聞頁中只須加一條語句調(diào)用即可。
出處：藍色理想
責(zé)任編輯：blue
上一頁 下一頁 Javascript+ASP打造無刷新新聞列表 [2]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 Javascript+ASP打造無刷新新聞列表 [1]
第 2 頁 
