沒有分頁(yè)。這樣如果數(shù)據(jù)量很大時(shí)，情況就變得十分糟糕，往往打開一個(gè)網(wǎng)頁(yè)就需要很長(zhǎng)的時(shí)候，大大的降低了的用戶的體驗(yàn)效果。
而分頁(yè)的話也是很有講究的，不同的數(shù)據(jù)庫(kù)往往對(duì)應(yīng)著不同的分頁(yè)方式。這里不做討論。下面我們僅以簡(jiǎn)單的access作為數(shù)據(jù)庫(kù)來進(jìn)行新聞列表的無刷新分頁(yè)。無刷新意味著要使用ajax技術(shù)，當(dāng)然無刷新不僅僅是ajax，還有其他的方法做到無刷新，如將所有的數(shù)據(jù)一次性讀取出來，然后根據(jù)頁(yè)數(shù)的不同顯示不同的內(nèi)容，這個(gè)僅僅靠JavaScript就可以實(shí)現(xiàn)了，但是這個(gè)無疑是飲鴆止渴，和上面沒有分頁(yè)效果是一樣的，換湯不換藥，僅僅是感覺上很好而已。

       要使用ajax可以自己手動(dòng)寫，也可以使用框架，我比較傾向于使用jquery來寫ajax，而且vs2010對(duì)jQuery的支持是很好的。而分頁(yè)的話，jQuery已經(jīng)有現(xiàn)成的插件供我們使用。

        下面開始打造漂亮的新聞第一步：需求分析

隨便在做什么的時(shí)候，一定要知道你的需求是什么，不然忙活了半天發(fā)現(xiàn)這根本不符合需求，結(jié)果白忙活一場(chǎng)。

我們的需求如下：

1。動(dòng)態(tài)的新聞列表（這個(gè)很簡(jiǎn)單）

2?？梢苑猪?yè)讀取新聞列表（這個(gè)也不難）

3?？梢詿o刷新的分頁(yè)讀取新聞列表（這個(gè)稍微有點(diǎn)難度）

4?？梢灶A(yù)覽新聞的內(nèi)容（這個(gè)也稍微有點(diǎn)難度）

5。界面友好（這個(gè)是必須的）

下面來詳細(xì)談?wù)勎覀兊男枨螅?/P>

對(duì)于1、2和5就不做說明了，網(wǎng)上可以找到大把的資料。就第三點(diǎn)和第四點(diǎn)來說明下，其實(shí)如果是懂一點(diǎn)ajax的話，這些是小兒科。

3.==》無刷新的分頁(yè)讀取新聞列表，在點(diǎn)擊下一頁(yè)的時(shí)候觸發(fā)事件，調(diào)用ajax去數(shù)據(jù)庫(kù)中查找下一頁(yè)的數(shù)據(jù)并返回，然后顯示在頁(yè)面上。

4==》預(yù)覽新聞內(nèi)容，在鼠標(biāo)移到連接上面時(shí)觸發(fā)事件，得到新聞的id并使用ajax去數(shù)據(jù)庫(kù)中查找相應(yīng)的新聞內(nèi)容，截取一部分顯示在div里面，這里有一個(gè)要注意的地方，就是如果截取的內(nèi)容里面有html標(biāo)記時(shí)要特別注意下。

 

ok，需求分析弄好后，開始著手做了。準(zhǔn)備如下環(huán)境：

vs2010 +access +jquery

開發(fā)環(huán)境vs也可以使用2008sp1，因?yàn)檫@個(gè)以上的版本才對(duì)jQuery有智能提示，當(dāng)然也可以使用其他的版本，就是沒有智能提示的效果。

access數(shù)據(jù)庫(kù)的版本為2003

jquery：1.3.2以上版本

當(dāng)然還有其他的文件需要用到，這個(gè)以后才說，先來預(yù)覽下最后的效果吧：(分頁(yè)的被預(yù)覽的部分遮住了.....)

 

注：本文的對(duì)象主要是ajax新手，或者是完全沒有接觸過，但想快速使用ajax做出東西來的人。

最新評(píng)論