本篇內(nèi)容介紹了“.NET2.0環(huán)境下的Ajax選型和應(yīng)用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、民和網(wǎng)站維護(hù)、網(wǎng)站推廣。

主題：.NET2.0環(huán)境下的Ajax選型和應(yīng)用

研究需要解決的問(wèn)題：

1 Ajax 應(yīng)用框架的選型及其性能對(duì)比

2 如何應(yīng)用 Ajax

3 應(yīng)用 Ajax 過(guò)程中應(yīng)該著重注意的問(wèn)題

一 Demo說(shuō)明

Ajax Demo Web Site 是一個(gè)完整的 .NET Website ，其中包含 5 個(gè) ASPX 頁(yè)面及其對(duì)應(yīng)的 CS 文件。

為了方便對(duì)比， Demo 中使用了三種 Ajax 應(yīng)用方式：

一是使用微軟提供的 Atlas 應(yīng)用框架，二是使用 Ajax.NET Professional 開(kāi)源框架，三是使用針對(duì) Ajax 的單純的 Javascript 包 Prototype 。三者對(duì)應(yīng)的關(guān)聯(lián)文件如下表所示：

應(yīng)用方式	文件名稱	描述
	Default.aspx	首頁(yè)導(dǎo)航，列出四個(gè) Demo 頁(yè)面的鏈接
Atlas	AtlasDemo.aspx	使用 Atlas 實(shí)現(xiàn) Product 的 CRUD 功能，通過(guò) UpdatePanel 完成無(wú)刷新操作。
AjaxPro	AjaxProDemo.aspx	使用 Ajax.NET Pro 實(shí)現(xiàn) Product 的 CRUD 功能，編輯、刪除操作返回 true/false 的結(jié)果，通過(guò) .NET DataGrid 控件實(shí)現(xiàn)頁(yè)面數(shù)據(jù)列表的呈現(xiàn)（ HTML ）。
	AjaxProDemoSecond.aspx	使用 Ajax.NET Pro 實(shí)現(xiàn) Product 的 CRUD 功能，編輯、刪除操作返回所有的 Product 列表，通過(guò) .NET DataGrid 控件實(shí)現(xiàn)頁(yè)面數(shù)據(jù)列表的呈現(xiàn)（ HTML ）。
Prototype	PrototypeDemo.aspx	使用 Prototype 實(shí)現(xiàn) Product 的 CRUD 功能，編輯、刪除操作返回所有的 Product 列表， Client 和 Server 的數(shù)據(jù)以 JSON 格式傳輸。
	Product.cs	Product 實(shí)體類

二 研究結(jié)論

1 Ajax 應(yīng)用框架選型

Ajax 應(yīng)用的核心是通過(guò) XMLHttpRequest 對(duì)象向 Server 提交 Client 的請(qǐng)求，同步或者異步的獲取 Server 返回的 Response 信息，而 Client 和 Server 之前數(shù)據(jù)傳遞的方式可以采用 Text 、 XML 或者 JSON 格式。

Demo 中使用到的 Prototype 、 Ajax.NET Pro 、 Atlas Beta2 代表了目前 Ajax 應(yīng)用的三種主要方式：

Prototype 是目前應(yīng)用比較廣泛的最底層的遠(yuǎn)程調(diào)用工具包，其通常使用自己的 API 封裝 XMLHttpRequest 對(duì)象，使得調(diào)用 XMLHttpRequest 更加簡(jiǎn)單直觀。在 XMLHttpRequest 之前，我們通常使用內(nèi)嵌的 IFRAME 來(lái)實(shí)現(xiàn)無(wú)刷新頁(yè)面發(fā)送 http 請(qǐng)求的效果。因此，這些遠(yuǎn)程調(diào)用包必須支持那些不支持 XMLHttpRequest 的瀏覽器，以提高瀏覽器兼容性。類似的工具還比如 DOJO 。這類工具在應(yīng)用過(guò)程中需要設(shè)定自己的 URL 和參數(shù)，并且編寫相應(yīng)的 callback 函數(shù)來(lái)處理 Server 返回的 Response 結(jié)果。

在 PrototypeDemo.aspx 中，我們通過(guò) Ajax.Request 向服務(wù)器提交請(qǐng)求，在 callback 函數(shù)中實(shí)現(xiàn)對(duì) Server 的 Response 結(jié)果的處理和顯示。當(dāng)然，每個(gè)請(qǐng)求的 URL 參數(shù)是不同的。

Ajax.NET Pro 則是一種基于基于代理實(shí)現(xiàn)的 Ajax 框架，其允許 Client 的 Javascript 直接與 Server 的類實(shí)現(xiàn)一一映射，使 Client 的 Javascript 可以通過(guò)他們直接訪問(wèn) Server 的類對(duì)象及其 API ，其訪問(wèn)方式類似 RPC ，直接調(diào)用相應(yīng)的 API 完成業(yè)務(wù)操作，仍然需要編寫相應(yīng)的 callback 函數(shù)處理 Server 返回的 Response 結(jié)果。

在 AjaxProDemo.aspx.cs 中，我們通過(guò)在方法頭部添加 [AjaxPro.AjaxMethod] 標(biāo)注，在 Page_Load 中將類以 AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxProDemo)) 的形式予以注冊(cè)， 這樣就可以在 Client 直接調(diào)用。

Atlas 則是基于組件的應(yīng)用方式，其允許使用拖拉的方式在 IDE 的設(shè)計(jì)視圖中快速創(chuàng)建包含 Ajax 功能的組件，并且能夠最大程度的利用 .NET 本身提供的 DataGrid 、 Button 等 UI 控件。這些組件提供了快速開(kāi)發(fā) Ajax 應(yīng)用的另一捷徑，開(kāi)發(fā)過(guò)程不需要編寫 callback 函數(shù)。

就目前而言， Atlas 能夠利用最多的是 UpdatePanel 控件，通過(guò)其實(shí)現(xiàn)頁(yè)面的無(wú)刷新或者部分刷新。

2 Ajax 框架性能及開(kāi)發(fā)效率對(duì)比

A、數(shù)據(jù)流量

Demo 中的四個(gè) Sample 都實(shí)現(xiàn)了針對(duì) Product 的簡(jiǎn)單 CRUD 功能。這里我們使用 Fiddler HTTP Debugger 來(lái)測(cè)試整個(gè)操作過(guò)程中 Client 和 Server 交互的數(shù)據(jù)量。

加載 Product List：

請(qǐng)求 URL	數(shù)據(jù)流量	說(shuō)明
Prototype
PrototypeServerResponse.aspx ?action=listProduct	Request Count:      1 Bytes Sent:     380 Bytes Received: 2,150	獲取 Product 列表，以 JSON 的格式返回，客戶端使用 Javascript 腳本處理呈現(xiàn)。
Ajax.NET Pro（ Second）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     493 Bytes Received: 1,392	獲取 Product 列表，以 HTML 的格式返回，客戶端直接呈現(xiàn)。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     827 Bytes Received: 6,391	獲取 Product 列表， Server 完成 DataGrid 數(shù)據(jù)源綁定呈現(xiàn)。

刪除 Product：

請(qǐng)求	數(shù)據(jù)流量	說(shuō)明
Prototype
PrototypeServerResponse.aspx ?action=deleteProduct&productId=1	Request Count:      1 Bytes Sent:     446 Bytes Received: 1,891	傳送 ProductId ，完成刪除操作，并獲取 Product 列表到 Client 端呈現(xiàn)。
Ajax.NET Pro（ Second）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     504 Bytes Received: 1,300	調(diào)用遠(yuǎn)程 RPC 接口，完成刪除操作，并獲取 Product 列表的 HTML 在 Client 端呈現(xiàn)。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,287 Bytes Received: 5,913	觸發(fā) Server 端的 Action 事件，完成刪除操作，需要 Postback 整個(gè)頁(yè)面。

獲取 Product Info：

請(qǐng)求	數(shù)據(jù)流量	說(shuō)明
Prototype
PrototypeServerResponse.aspx ?action=getProduct&productId=8	Request Count:      1 Bytes Sent:     443 Bytes Received: 403	傳送 ProductId ，獲取 JSON 格式的 Product 信息， Client 端完成解析并呈現(xiàn)。
Ajax.NET Pro（ Second）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     506 Bytes Received: 284	調(diào)用 RPC 接口，獲取 Text 格式的 Product 信息， Client 端完成解析并呈現(xiàn)。
Altas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,185 Bytes Received: 6,275	觸發(fā) Server 端的 Action 事件，獲取 Product 信息，需要 Postback 整個(gè)頁(yè)面。

編輯 Product：

請(qǐng)求	數(shù)據(jù)流量	說(shuō)明
Prototype
PrototypeServerResponse.aspx ?action=updateProduct&productId=8 &productName=Sony&manufacturer=China	Request Count:      1 Bytes Sent:     482 Bytes Received: 1,877	傳送 ProductId 等參數(shù)，完成保存操作，并獲取 Product 列表。
Ajax.NET Pro（ Second）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     549 Bytes Received: 1,284	調(diào)用遠(yuǎn)程 PPC 接口，完成保存操作，并獲取 HTML 格式的 Product 列表。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,218 Bytes Received: 5,913	觸發(fā) Server 端的 Action 事件，完成保存操作，需要 Postback 整個(gè)頁(yè)面。

增加 Product：

請(qǐng)求	數(shù)據(jù)流量	說(shuō)明
Prototype
PrototypeServerResponse.aspx ?action=addProduct&productName=Sony &manufacturer=China	Request Count:      1 Bytes Sent:     467 Bytes Received: 2,050	傳送 ProductName 等參數(shù)，完成增加操作，并獲取 JSON 格式的 Product 列表。
Ajax.NET Pro
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     529 Bytes Received: 1,364	調(diào)用遠(yuǎn)程 RPC 接口，完成增加操作，并獲取 HTML 格式的 Product 列表。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,249 Bytes Received: 6,533	觸發(fā) Server 端的 Action 事件，完成增加操作，需要 Postback 整個(gè)頁(yè)面。

結(jié)論：

從上述對(duì)比表中可以看到， Atlas 在實(shí)現(xiàn)無(wú)刷新的顯示過(guò)程中，還是需要 Postback 整個(gè)頁(yè)面，只是這個(gè)過(guò)程是以異步方式進(jìn)行處理的；當(dāng) Server 端完成響應(yīng)后， Atlas 客戶端根據(jù)頁(yè)面的時(shí)候完成 partial-page 的更新。所以對(duì)于任何局部頁(yè)面的操作，頁(yè)面的 Postback 還是需要的。如果頁(yè)面的數(shù)據(jù)量特別大， Atlas 將會(huì)導(dǎo)致效率的降低。

Prototype 和 Ajax.NET Pro 的數(shù)據(jù)量差別不大。

B、開(kāi)發(fā)效率

Atlas 緊密的和 .NET 的控件結(jié)合在一起。如果使用 Atlas ，則可以最大程度的復(fù)用 .NET 的控件，比如數(shù)據(jù)顯示控件。

使用 Prototype ，需要在 Javascript 代碼中提交 Request 請(qǐng)求到 Server ，并且編寫相應(yīng)的 callback 函數(shù)完成 Response 結(jié)果的解析和呈現(xiàn)。

使用 Ajax.NET Pro ，可以直接調(diào)用 Server 的類的方法（遠(yuǎn)程 RPC ），不過(guò)還是需要編寫相應(yīng)的 callback 函數(shù)完成 Response 結(jié)果的解析和呈現(xiàn)。

C、 Server端返回的數(shù)據(jù)格式

Ajax.NET Pro 中提供了序列化成 JSON 格式的接口和方法。

Server 端返回的數(shù)據(jù)格式，可以是簡(jiǎn)單的 Text ，也可以是 XML 文檔，或者通過(guò) Ajax.NET Pro 序列化成 JSON 格式。

“.NET2.0環(huán)境下的Ajax選型和應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：.NET2.0環(huán)境下的Ajax選型和應(yīng)用
文章URL：http://chinadenli.net/article8/ppchip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)