一步一步學asp.net ajax

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

今天開始,在部落格園寫部落格,慢慢的積累心得!與大家一起進步!

任務:做(母板頁面)一個關於新聞類別載入的ajax

主要實現資料的動態載入

我們先查看資料內容

接下來我們要學習怎麼用jquery 實現ajax的新聞類別

ajax請求我們首先要熟悉,json資料,我們的ajax通過json傳輸,

好處:資料與介面分離,介面的變化無關資料,後台只負責提供資料,我們的資料甚至可以直接調用後台類別管理的方法,重用性高

而且,效能極佳,我們甚至可以通過緩衝的方式緩衝類別,因為類別資訊載入,前台頁面的類別載入非常頻繁,而且易於維護與修改.使用者體驗好.

壞處:需要js和jquery功底,需要手動編寫jquery ajax的指令碼.

我們首先要知道2個jquery函數,一個是$.ajax,主要是用來做ajax請求用的,一個是$.parseJSON用來轉義ajax的,還有一個是$.each用來遍曆的,相當於foreach,查閱jquery api:

$.parseJSON

接下來是$.each

有了這些準備,我們還要寫一個背景資料提供者,這個可以直接從後台調用,這裡僅列出,後台json資料的

產生方法,

產生的json資料格式

然後就是對json資料的處理過程

首先我們要通過ajax擷取背景資料,ajax就通過這麼調用

$(function(){

$.ajax({

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

type:"get",

success:function(text){ //這個是回呼函數

// alert(text);

var JsonData=$.parseJSON(text);

$("#m2").empty();//先清空m2子項目的內容

$.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方法,可以通過測試,查看具體含義

});

}

});

});

實現效果

接下來,我們要做的就是給類別資訊加緩衝,因為母板頁頻繁載入,而且,這些資訊沒有必要反覆讀取資料庫,我們就通過緩衝處理,在後台添加緩衝機制

這樣一個完整的ajax,就成功完成了!

是不是很有成就感?

一個ajax頁面的響應速度,各方面要快得多,而且,配合緩衝,效能非常好!

用三層改寫以前的項目,後台採用了三層構架的設計,也第一次真正感受到了架構之美!擴充的便利性!配合手寫的代碼產生器和分布類修改更簡潔更方便!

.

總結:這樣我們一個簡單的新聞類別就實現了,雖然簡單,但是一個高效能可擴充的網站,更為重要的是主體架構,在這裡ajax通過json傳輸資料,後台通過ashx頁面實現,實現了業務與資料的分離,後台只負責資料的供應,前台實現資料的展示,這種UI與資料的分離,是網站架構的第一步.

作者 cnblogs tianzh