用戶名: 密碼: 忘記密碼?
返回主站[切換城市] 熱門城市:重慶 四川 貴州
小 學 | 中 學 | 高 考 | 大 學 | 成 考 | 自 考 | 考 研 | 外 語 | I T | 留 學 | 男 生 | 女 生 | 招 考 | 視 頻
當前位置:
輸入關鍵字:
ASP.NET中AJAX編程開發指南
文章來源: 瀏覽次數:0 更新時間:2010-07-02 17:08:13 網友評論 0 【字體:


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的代碼:

view plaincopy to clipboardprint?
<!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>  
  
    <mce: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;   
  
    }   
  
}   
  
       
// --></mce: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>

    <mce: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;

    }

}

    
// --></mce: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> 

注意XMLHttpRequest.readyState共有5種狀態,其可能值和對應描述如下:

0:請求未初始化,還沒有調用 open()。 

1:請求已經建立,但是還沒有發送,還沒有調用 send()。 

2:請求已發送,正在處理中(通常現在可以從響應中獲取內容頭)。 

3:請求在處理中;通常響應中已有部分數據可用了,沒有全部完成。

4:響應已完成;您可以獲取并使用服務器的響應了。

 

從上面的代碼中可以看出每次實例化XMLHttpRequest對象都需要判斷,一些常用的操作也可以封裝一下,利用Prototype這個JavaScript腳本庫就可以輕松做到這一點,實際上早期很多人就用到了Prototype來開發AJAX應用,并且在Prototype中還封裝了其它很多通用的方法,大大提高了我們的開發效率。

使用Prototype

在Prototype中提供了一個Ajax對象,這樣開發人員就可以直接使用Ajax對象而不必考慮如何判斷瀏覽器類型再決定如何實例化XMLHttpRequest對象的實例了。下面的代碼是使用了Protype之后的代碼:

view plaincopy to clipboardprint?
<!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>使用Prototype獲取服務器時間的例子</title>  
  
    <mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script>  
  
    <mce:script language="javascript" type="text/javascript"><!--   
        function getServerTime(format) {   
  
            //要請求的URL地址,注意escape是javascript中的方法   
  
            //用于對特殊字符進行轉義   
  
            var url = "ServerTime.aspx";   
  
            var params = "format=" + escape(format);   
  
            var ajax = new Ajax.Request(   
  
                url,   
  
                {   
  
                method: ’get’,   
  
                parameters:params,   
  
                onComplete:update   
  
                   
  
            }   
  
            );   
  
        }   
  
           
  
        //當接收到服務器的響應之后執行的客戶端方法   
  
        function update(request) {   
  
            $("time").innerHTML = request.responseText;   
  
        }   
  
       
// --></mce: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>使用Prototype獲取服務器時間的例子</title>

    <mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script>

    <mce:script language="javascript" type="text/javascript"><!--
        function getServerTime(format) {

            //要請求的URL地址,注意escape是javascript中的方法

            //用于對特殊字符進行轉義

            var url = "ServerTime.aspx";

            var params = "format=" + escape(format);

            var ajax = new Ajax.Request(

                url,

                {

                method: ’get’,

                parameters:params,

                onComplete:update

                

            }

            );

        }

        

        //當接收到服務器的響應之后執行的客戶端方法

        function update(request) {

            $("time").innerHTML = request.responseText;

        }

    
// --></mce: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> 

 


此信息來源于互聯網,本站不保證信息的真實性和準確性,教育路上提供此信息之目的在于 為考生提供更多信息作為參考,請以各學校正式公布數據為準。資源來自網友共享,版權歸原作者所有,本站不承擔任何技術及版權問題 。如果有侵權行為請及時通知我們,我們會在第一時間為您處理!



上一篇:ASP.NET4實用方法Url Routing的使用
下一篇: asp.net教程:返回前一頁實現方法總結
關鍵詞:開發指南編程
已有0位網友發表了看法
  • 評論內容: 
推薦閱讀
互聯網
游戲開發
網頁設計
188排球比分直播