ASP.NET中的AJAX應用開發總結

iDotNetSpace發表於2009-12-14
ASP.NET
AJAX介紹
其實AJAX應用的核心就是XMLHttpRequest，通過現象看本質，即使使用微軟的AJAX伺服器控制元件最終也是需要這些的，只不過使用微軟AJAX伺服器控制元件開發AJAX應用時我們不需要關心JS指令碼的實現，只需關心業務邏輯就可以了，因而可以簡化開發和提高開發速度。AJAX的基礎是XHTML、CSS、DOM、JavaScript、XML及XMLHttpRequest。
正確使用AJAX技術可以改善使用者體驗，是使用者與伺服器的互動更流暢，某些情況下還能減少伺服器流量。在以前AJAX只是作為一種比較炫的技術為一些大型網站所使用，現今這個比雲端計算還要流行了，至少雲端計算更多地還是停留在人們的概念裡，而AJAX確確實實應用在WEB開發當中了。WEB開發人員的招聘都是言必精通AJAX技術。
下面分別講講在ASP.NET開發中可以供選擇的開發AJAX應用的方式：
採用純JavaScript實現
在武俠小說中絕頂高手飛花摘葉都可以傷人，在WEB開發領域真正的高手也可以無需藉助任何其它庫就可以開發出AJAX應用。不適用任何第三方庫開發AJAX應用就需要自己區分瀏覽器來例項化XMLHttpRequest物件例項，下面的程式碼是一個簡單的呼叫AJAX的程式碼：
 
 
從上面的程式碼中可以看出每次例項化XMLHttpRequest物件都需要判斷，一些常用的操作也可以封裝一下，利用Prototype或者jQuery這個JavaScript指令碼庫就可以輕鬆做到這一點，實際上早期很多人就用到了Prototype或者jQuery來開發AJAX應用，並且在Prototype或者jQuery中還封裝了其它很多通用的方法，大大提高了我們的開發效率。
 
 
使用jQuery
當然我們還可以使用目前比較熱門的JavaScript框架jQuery，這個在VS2008中需要安裝SP1後才能活得智慧提示，在VS2010中已經整合了。如果使用jQuery上面的程式碼可以簡化為：
 
       可以看出在jQuery中提供了更多、更靈活的處理AJAX和XHTML的方法，簡易大家都去了解一下。

在上面的方式中無論使用自己寫全部JavaScript指令碼還是利用Protype或者jQuery這類框架的方式，都是需要寫一些JS指令碼的，有沒有儘可能少寫指令碼的方式呢？畢竟我們知道JS指令碼除錯起來相對較為困難些。答案是有的，那就是使用AjaxPro。

使用AjaxPro

下面是一個使用AjaxPro的例子
 
 
後臺邏輯程式碼如下(太長了不能發表，所以省略了，不過關鍵部分可以見附圖）：
 
從上面的程式碼中可以看出使用AjaxPro之後可以不用寫太多客戶端程式碼，而且不同前面幾種做法需要寫一個頁面呼叫顯示，一個頁面負責控制業務邏輯（一般情況下是這樣的），使用AjaxPro可以將呼叫頁面和控制業務邏輯頁面合在一起，這樣服務端程式碼除錯比較方面，而且也不用控制如何傳送請求，請求什麼時候響應完畢。
 
使用微軟AJAX控制元件庫
前面幾種開發AJAX應用的方式都是遵循一個規律：開發速度是有低到高，開發難易程度由難到易，不過在前面幾種方式中不管怎麼做都還沒有完全脫離JavaScript，這個東東對於現在的一些初學者（就是那些感覺做ASP.NET開發就只是拖拽控制元件）來說還是有些難度，還是需要寫JavaScript來操作HTML頁面，為了徹底減輕這部分人掌握ASP.NET中AJAX開發，微軟推出了AJAX伺服器端控制元件。
使用微軟AJAX伺服器端控制元件可以在做簡單設定的情況下滿足開發環境中的大部分簡單需求，當然做一些稍微複雜點的設定就可以滿足開發環境中的絕大部分需求了。
在微軟AJAX伺服器控制元件庫中主要有以下幾個伺服器控制元件：
ScriptManager控制元件：註冊指令碼，必須在所有伺服器控制元件之前出現
ScriptManagerProxy控制元件：參考其它指令碼和服務
UpdatePanel控制元件：區域性重新整理控制元件
Timer控制元件：定時執行控制元件
UpdateProgress控制元件：進度顯示控制元件
下面是一個使用了微軟AJAX伺服器控制元件的例子（文章太長，不能附上程式碼，關鍵部分見附圖）：
 
 
這個頁面的作用其實很簡單，就是在使用者開啟這個註冊頁面填寫完自己的使用者名稱之後準備填寫其它資訊（就是滑鼠從使用者名稱文字框移開後）時就能獲知自己的使用者名稱是否已經被註冊，還有另外一個效果，就是在使用者註冊時實現了省（直轄市）、市（區縣）、縣三級聯動的效果，因為使用了微軟AJAX控制元件，所以操作過程中整個頁面不會全部重新整理，只有區域性重新整理效果。
 
在使用微軟AJAX伺服器控制元件過程中需要注意一些事項，就上面的例子中需要注意的事項如下：
 
總結：
其實這篇文章是新瓶裝舊酒（和AJAX一樣），裡面用到的程式碼都是以前在部落格文章中出現的，這篇文章只不過做了一個綜合性的比較而已。
對於上面出現的這麼多選擇，我們不必一味去追問哪種比哪種一定要好，實際上很多技術都有自己的使用場合的，沒有絕對在所有領域所有場合都是最佳的（那就好像找一匹不吃草且跑得快的馬）。控制越靈活的需要對指令碼知識掌握越高，開發速度也相對低；開發速度越高、除錯越容易的控制起來相對較難一些（就像武學一樣，絕對高手飛花摘葉可以殺人，花花草草找起來很簡單，但是沒有深厚的功力不行；倚天屠龍即使在普通人手裡也可以讓他威力大增，但是不是每個人都有這種機會）。
對於初學者或者初級開發人員我建議如下：
如果開發簡單AJAX應用，使用AJAX控制元件首選，無需任何指令碼知識；
如果開發複雜AJAX應用，建議使用jQuery，這是一個可以用於多種動態網頁程式設計的Javascript指令碼庫。

本文出自 “周公的專欄” 部落格，請務必保留此出處http://zhoufoxcn.blog.違規廣告.com/792419/239749

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
         <title>使用jQuery獲取伺服器時間的例子title>
         <script src="jquery-1.2.6-cn.js" type="text/javascript">script>
        <script type="text/javascript" language="javascript">
                function getTime() {
                        $.get("GetTime.aspx", { format: "yyyy-mm-dd hh:mm:ss" },
                        function(data) {//得到Ajax響應後的回撥函式
                                //$("#time").append("<font color='red'>" + data + "font>");
                                $("#time").html("<font color='red'>" + data + "font>");
                        });
                }
        script>
  head>
  <body>
  <table border="0">
         <tr>
         <td>伺服器時間td><td><div id="time">div>td>
         tr>
         <tr>
         <td><input type="button" value="完整時間" onclick="javascript.:void getServerTime('yyyy-mm-dd hh:mm:ss');"    />td><td><input type="button" value="年月日" onclick="javascript.:void getServerTime('yyyy-MM-dd');"    />td>
         tr>
         <tr>
         <td><input type="button" value="時分秒" onclick="javascript.:void getServerTime('hh:mm:ss');" />td><td><input type="button" value="月份日期"    onclick="javascript.:void getServerTime('mm-dd');" />td>
         tr>
         table>
  body>
html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
        <title>獲取伺服器時間的例子title>
        <script language="javascript" type="text/javascript">
var request=false;
//例項化XMLHttpRequest
function createXMLHttpRequest()
{
        try
        {
                //下面的方法有可能丟擲異常，表示當前瀏覽器不支援此方法
                request=new ActivexObject("Msxml2.XMLHTTP");
        }
        catch(e1)//當通過上面的方法例項XMLHttpRequest發生異常
        {
                try
                {
                        //下面的方法有可能丟擲異常，表示當前瀏覽器不支援此方法
                        request=new ActivexObject("Microsoft.XMLHTTP");
                }
                catch(e2)//當通過上面的方法例項XMLHttpRequest發生異常
                {
                        request=false;
                }
        }
        //當上面的方法都不能例項化XMLHttpRequest時，表示非IE瀏覽器
        if(!request&&typeof XMLHttpRequest!='undefined')
        {
                //非IE瀏覽器例項化XMLHttpRequest的方法
                request=new XMLHttpRequest();
        }
        
}
//傳送客戶端請求的方法
function getServerTime(format)
{
        //呼叫上面的方法例項化XMLHttpRequest
        createXMLHttpRequest();
        //要請求的URL地址，注意escape是javascript中的方法
        //用於對特殊字元進行轉義
        var url="ServerTime.aspx?format="+escape(format);
        //alert(url);//可以通過這種方法檢視伺服器的返回結果
        //通過GET方式開啟請求，第三個引數true表示非同步傳送請求，false則為同步
        request.open("GET",url,true);
        //當request的等待狀態發生變化時要執行的客戶端方法
        request.onreadystatechange=update;//update是客戶端的javascript方法
        //因為在請求的url中已經附帶了引數，所以這裡的引數是null
        //表示不再傳送額外的資料
        request.send(null);
}
//當接收到伺服器的響應之後執行的客戶端方法
function update()
{
        if(request.readyState==4)
        {
                //alert(request.responseText);//檢視伺服器響應結果
                document.getElementById("time").innerHTML=request.responseText;
        }
}
        script>
head>
<body>
<table border="0">
        <tr>
        <td>伺服器時間td><td><div id="time">div>td>
        tr>
        <tr>
        <td><input type="button" value="完整時間" onclick="javascript.:void getServerTime('yyyy-mm-dd hh:mm:ss');"    />td><td><input type="button" value="年月日" onclick="javascript.:void getServerTime('yyyy-MM-dd');"    />td>
        tr>
        <tr>
        <td><input type="button" value="時分秒" onclick="javascript.:void getServerTime('hh:mm:ss');" />td><td><input type="button" value="月份日期"    onclick="javascript.:void getServerTime('mm-dd');" />td>
        tr>
        table>
body>
html>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-622383/，如需轉載，請註明出處，否則將追究法律責任。

相關文章