快捷導(dǎo)航

一步一步學(xué)asp.net ajax

更新時(shí)間：2012年05月01日 17:28:49 作者：

以前一直都是自己寫日志,在麥庫寫,然后,保存,不過,感覺分享的東西就應(yīng)該放在博客中,自己寫的東西,像記日志的方式,更容易去思考,而不是隨便堆砌,整理一下以前的學(xué)習(xí)資料

雖然學(xué)了1年多的asp.net,走了好多彎路,不過每一次體驗(yàn)都讓人難以忘懷,馬上要奔大四了,慢慢的開始總結(jié),以前做過的東西,更多的是重新寫以前的項(xiàng)目,以前雖然參加一些項(xiàng)目,但是感覺根本寫的都是垃圾,堆砌功能,學(xué)校環(huán)境下,也能理解,不過,慢慢的開始學(xué)會(huì)自己總結(jié),自己重構(gòu),也感受到每天的進(jìn)步!

今天開始,在博客園寫博客,慢慢的積累心得!與大家一起進(jìn)步!

任務(wù):做(母板頁面)一個(gè)關(guān)于新聞?lì)悇e加載的ajax

主要實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)加載

clip_image001

我們先查看數(shù)據(jù)內(nèi)容

clip_image003

接下來我們要學(xué)習(xí)怎么用jquery 實(shí)現(xiàn)ajax的新聞?lì)悇e

ajax請求我們首先要熟悉,json數(shù)據(jù),我們的ajax通過json傳輸,

好處:數(shù)據(jù)與界面分離,界面的變化無關(guān)數(shù)據(jù),后臺(tái)只負(fù)責(zé)提供數(shù)據(jù),我們的數(shù)據(jù)甚至可以直接調(diào)用后臺(tái)類別管理的方法,重用性高

而且,性能極佳,我們甚至可以通過緩存的方式緩存類別,因?yàn)轭悇e信息加載,前臺(tái)頁面的類別加載非常頻繁,而且易于維護(hù)與修改.用戶體驗(yàn)好.

壞處:需要js和jquery功底,需要手動(dòng)編寫jquery ajax的腳本.

我們首先要知道2個(gè)jquery函數(shù),一個(gè)是$.ajax,主要是用來做ajax請求用的,一個(gè)是$.parseJSON用來轉(zhuǎn)義ajax的,還有一個(gè)是$.each用來遍歷的,相當(dāng)于foreach,查閱jquery api:

$.parseJSON

接下來是$.each

有了這些準(zhǔn)備,我們還要寫一個(gè)后臺(tái)的數(shù)據(jù)提供者,這個(gè)可以直接從后臺(tái)調(diào)用,這里僅列出,后臺(tái)json數(shù)據(jù)的

生成方法,

生成的json數(shù)據(jù)格式

然后就是對json數(shù)據(jù)的處理過程

首先我們要通過ajax獲取后臺(tái)的數(shù)據(jù),ajax就通過這么調(diào)用

$(function(){

$.ajax({

url:"Admin/News/Data/GetNewsInfo.ashx?method=GetNewsTypeForCombox",

type:"get",

success:function(text){ //這個(gè)是回調(diào)函數(shù)

// alert(text);

var JsonData=$.parseJSON(text);

$("#m2").empty();//先清空m2子元素的內(nèi)容

$.each(JsonData,function(key,value){ //注意這里

$("#m2").append("<a href="+value.TypeId+">"+value.TypeName+"</a>");

// alert(key+" "+value.TypeId+" "+JsonData[key].TypeId+" "+JsonData[key].TypeName);

//each方法,可以通過測試,查看具體含義

});

}

});

實(shí)現(xiàn)效果

接下來,我們要做的就是給類別信息加緩存,因?yàn)槟赴屙擃l繁加載,而且,這些信息沒有必要反復(fù)讀取數(shù)據(jù)庫,我們就通過緩存處理,在后臺(tái)添加緩存機(jī)制

這樣一個(gè)完整的ajax,就成功完成了!

是不是很有成就感?

一個(gè)ajax頁面的響應(yīng)速度,各方面要快得多,而且,配合緩存,性能非常好!

用三層改寫以前的項(xiàng)目,后臺(tái)采用了三層構(gòu)架的設(shè)計(jì),也第一次真正感受到了架構(gòu)之美!擴(kuò)展的便利性!配合手寫的代碼生成器和分布類修改更簡潔更方便!

.

總結(jié):這樣我們一個(gè)簡單的新聞?lì)悇e就實(shí)現(xiàn)了,雖然簡單,但是一個(gè)高性能可擴(kuò)展的網(wǎng)站,更為重要的是主體架構(gòu),在這里ajax通過json傳輸數(shù)據(jù),后臺(tái)通過ashx頁面實(shí)現(xiàn),實(shí)現(xiàn)了業(yè)務(wù)與數(shù)據(jù)的分離,后臺(tái)只負(fù)責(zé)數(shù)據(jù)的供應(yīng),前臺(tái)實(shí)現(xiàn)數(shù)據(jù)的展示,這種UI與數(shù)據(jù)的分離,是網(wǎng)站架構(gòu)的第一步.

作者 cnblogs tianzh