程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> 用ASP.NET 2.0實現AJAX風格的Web開發

用ASP.NET 2.0實現AJAX風格的Web開發

編輯:關於ASP.NET

提要 在過去的幾個月中,基於AJAX技術開發高度交互的Web應用程序的設計 模式迅速流行開來。現在,具有高度可配置性的Web應用程序,例如Google Maps 和A9,都在綜合利用這些技術來創造豐富的客戶端用戶體驗。其實,結合AJAX技術進行Web開發並非最近的研究成果,只不過這些技術一直以來不斷得到持續更 新和改進。

本文中我有三個目的。首先,我想提供一個AJAX風格應用程序的高級概述。 其次,我想詳細地描述ASP.NET 2.0的異步回調機制。最後,我想對構建AJAX風 格應用程序的工具和框架的未來改進作一下展望。

歸納來看,AJAX風格的Web應用程序展示了下列特征:

· 到Web服務器的異步請求-在用戶等待來自於Web服務器的響應時,浏覽器 用戶接口不會被堵塞,而是可以繼續響應用戶的交互。

· 高度依賴於用JavaScript編寫的基於浏覽器的邏輯-W3C DOM的最新改進和 標准化為實現動態的客戶端UI更新提供了支持。

· 在浏覽器和Web服務器之間的基於XML數據的交換-XMLHttp對象使得與Web 服務器進行通訊而不需要重載頁面成為可能。

一個AJAX應用程序和傳統型Web應用程序之間的最大差別是,每次用戶交互不 會導致每一個HTTP請求都被發送到Web服務器;而是,用JavaScript實現的基於 浏覽器的邏輯掌握著控制權,之後再由該控制決定是局部處理請求還是向服務器 作異步調用。一旦到服務器的異步調用結束,客戶端邏輯立即適當更新UI的相關 部分。這種方式具有下列優點:

· 用戶體驗更為豐富。例如,當一個Google地圖用戶沿一個方向拖動地圖時 ,系統就會在後台向服務器發出一個異步請求,結果是他能夠在超出屏幕邊界後 繼續拖動。這樣以來,當用戶進一步拖動地圖時,新的圖像已經可用了。這導致 一種響應更快的感覺。

· 既然跨越基於XMLHttp的到服務器的調用狀態並沒有丟失,那麼,AJAX應 用程序就可以避免每次都重新生成UI界面。

· 更多的邏輯位於浏覽器端,從而減少了到Web服務器的來回請求的數量, 進而全面改進系統的潛力。

盡管存在這麼多的優點,然而AJAX風格的應用程序還是存在一些不足之處。 例如,AJAX風格應用程序的開發是比較困難的,因為缺乏相應的框架(一組類似 於Windows MFC工具包的UI類)和IDE(調試,可視化設計,等等)支持。另外, 基於AJAX進行開發要求一個人必須至少掌握兩種語言(DHTML和JavaScript)。 而且,AJAX風格應用程序的編碼需要更長的時間,因為它需要另外的測試以使其 支持多浏覽器版本和類型。最後,由於基於JavaScript的源碼為終端用戶可存取 ,所以開發過程中的安全分析也變得非常重要。

幸好,例如Atlas,AJAX.NET和Google Maps API等工具的出現為將來構建 AJAX風格的應用程序提供了更好的支持。接下來,我們將討論一下,對於構建 AJAX風格應用程序的支持技術的發展歷程以及我們能夠從最新發布的工具集 Atlas得到怎樣的期望。

讓我們首先討論XMLHttp對象。這個對象最初為微軟所引入,以後在其它平台 (包括Mozilla和蘋果公司的Safari浏覽器)上也得到實現。XMLHttp支持到Web 服務器的異步請求,這樣可以允許客戶端基於JavaScript邏輯調用Web服務器而 不需要重載整個頁面。

換句話說,在後台與Web服務器的交互而不引起整個頁面重載是完全有可能的 。

至於XMLHttp對象的使用則相當直接。為簡單起見,讓我們僅考慮IE特定的語 法。其實,XMLHttp在其它浏覽器上的實現語法與這裡的討論也很類似。

request = new ActiveXObject("Microsoft.XMLHTTP");
if (request){ request.onreadystatechange = CallbackHandler;
  request.open("GET", URL, true);
  request.send();
}
function CallbackHandler(){
  if ((request.readyState == 4) && (request.status == 200) {
string response = request.responseXML;
//更新UI的相關部分
  }
}

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved