熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> .NET編程 >> 正文

ASP.NET中AJAX編程開發指南

2022-06-13   來源: .NET編程 

　　AJAX介紹

其實AJAX應用的核心就是XMLHttpRequest通過現象看本質即使使用微軟的AJAX服務器控件最終也是需要這些的只不過使用微軟AJAX服務器控件開發AJAX應用時我們不需要關心JS腳本的實現只需關心業務邏輯就可以了因而可以簡化開發和提高開發速度AJAX的基礎是XHTMLCSSDOMJavaScriptXML及XMLHttpRequest

正確使用AJAX技術可以改善用戶體驗是用戶與服務器的交互更流暢某些情況下還能減少服務器流量在以前AJAX只是作為一種比較炫的技術為一些大型網站所使用現今這個比雲計算還要流行了至少雲計算更多地還是停留在人們的概念裡而AJAX確確實實應用在WEB開發當中了WEB開發人員的招聘都是言必精通AJAX技術

下面分別講講在ASPNET開發中可以供選擇的開發AJAX應用的方式

采用純JavaScript實現

在武俠小說中絕頂高手飛花摘葉都可以傷人在WEB開發領域真正的高手也可以無需借助任何其它庫就可以開發出AJAX應用不適用任何第三方庫開發AJAX應用就需要自己區分浏覽器來實例化XMLHttpRequest對象實例下面的代碼是一個簡單的調用AJAX的代碼

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "//WC//DTD XHTML  Transitional//EN" "
  
<html xmlns="
  
<head>  
  
    <title>獲取服務器時間的例子</title>  
  
    <mce:script language="javascript" type="text/javascript"><!   
var request=false;   
  
//實例化XMLHttpRequest   
  
function createXMLHttpRequest()   
  
{   
  
    try   
  
    {   
  
        //下面的方法有可能拋出異常表示當前浏覽器不支持此方法   
  
        request=new ActiveXObject("MsxmlXMLHTTP");   
  
    }   
  
    catch(e)//當通過上面的方法實例XMLHttpRequest發生異常   
  
    {   
  
        try   
  
        {   
  
            //下面的方法有可能拋出異常表示當前浏覽器不支持此方法   
  
            request=new ActiveXObject("MicrosoftXMLHTTP");   
  
        }   
  
        catch(e)//當通過上面的方法實例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="ServerTimeaspx?format="+escape(format);   
  
    //alert(url);//可以通過這種方法查看服務器的返回結果   
  
    //通過GET方式打開請求第三個參數true表示異步發送請求false則為同步   
  
    requestopen("GET"urltrue);   
  
    //當request的等待狀態發生變化時要執行的客戶端方法   
  
    requestonreadystatechange=update;//update是客戶端的javascript方法   
  
    //因為在請求的url中已經附帶了參數所以這裡的參數是null   
  
    //表示不再發送額外的數據   
  
    requestsend(null);   
  
}   
  
//當接收到服務器的響應之後執行的客戶端方法   
  
function update()   
  
{   
  
    if(requestreadyState==)   
  
    {   
  
        //alert(requestresponseText);//查看服務器響應結果   
  
        documentgetElementById("time")innerHTML=requestresponseText;   
  
    }   
  
}   
  
       
// ></mce:script>  
  
</head>  
  
<body>  
  
<table border="">  
  
    <tr>  
  
    <td>服務器時間</td><td><div id="time"></div></td>  
  
    </tr>  
  
    <tr>  
  
    <td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyymmdd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyyMMdd’);"  /></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(’mmdd’);" /></td>  
  
    </tr>  
  
    </table>  
  
</body>  
  
</html>  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML  Transitional//EN" "

<html xmlns="

<head>

    <title>獲取服務器時間的例子</title>

    <mce:script language="javascript" type="text/javascript"><!
var request=false;

//實例化XMLHttpRequest

function createXMLHttpRequest()

{

    try

    {

        //下面的方法有可能拋出異常表示當前浏覽器不支持此方法

        request=new ActiveXObject("MsxmlXMLHTTP");

    }

    catch(e)//當通過上面的方法實例XMLHttpRequest發生異常

    {

        try

        {

            //下面的方法有可能拋出異常表示當前浏覽器不支持此方法

            request=new ActiveXObject("MicrosoftXMLHTTP");

        }

        catch(e)//當通過上面的方法實例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="ServerTimeaspx?format="+escape(format);

    //alert(url);//可以通過這種方法查看服務器的返回結果

    //通過GET方式打開請求第三個參數true表示異步發送請求false則為同步

    requestopen("GET"urltrue);

    //當request的等待狀態發生變化時要執行的客戶端方法

    requestonreadystatechange=update;//update是客戶端的javascript方法

    //因為在請求的url中已經附帶了參數所以這裡的參數是null

    //表示不再發送額外的數據

    requestsend(null);

}

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

function update()

{

    if(requestreadyState==)

    {

        //alert(requestresponseText);//查看服務器響應結果

        documentgetElementById("time")innerHTML=requestresponseText;

    }

}

    
// ></mce:script>

</head>

<body>

<table border="">

    <tr>

    <td>服務器時間</td><td><div id="time"></div></td>

    </tr>

    <tr>

    <td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyymmdd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyyMMdd’);"  /></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(’mmdd’);" /></td>

    </tr>

    </table>
</body>

</html> 

注意XMLHttpRequestreadyState共有５種狀態其可能值和對應描述如下

請求未初始化還沒有調用 open() 

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

請求已發送正在處理中（通常現在可以從響應中獲取內容頭） 

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

響應已完成您可以獲取並使用服務器的響應了 

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

使用Prototype

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

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "//WC//DTD XHTML  Transitional//EN" "
<html xmlns="
  <head>   
    <title>使用Prototype獲取服務器時間的例子</title>  
  
    <mce:script type="text/javascript" language="javascript" src="prototypejs" mce_src="prototypejs"></mce:script>  
  
    <mce:script language="javascript" type="text/javascript"><!   
        function getServerTime(format) {   
  
            //要請求的URL地址注意escape是javascript中的方法   
  
            //用於對特殊字符進行轉義    
            var url = "ServerTimeaspx";    
             var params = "format=" + escape(format);       
           var ajax = new AjaxRequest(   
  
                url    
                  {    
                method: ’get’    
                parameters:params   
  
                onComplete:update   
            }   
            );   
        }      
        //當接收到服務器的響應之後執行的客戶端方法   
  
        function update(request) {    
            $("time")innerHTML = requestresponseText;    
          }           
// ></mce:script>    
</head>  
  
<body>   
<table border="">     
    <tr>  
    <td>服務器時間</td><td><div id="time"></div></td>   
      </tr>   
    <tr>   
    <td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyymmdd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyyMMdd’);"  /></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(’mmdd’);" /></td>      
    </tr>   
    </table>   
   </body>   
</html>  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML  Transitional//EN" "
<html xmlns="
<head> 
    <title>使用Prototype獲取服務器時間的例子</title> 
    <mce:script type="text/javascript" language="javascript" src="prototypejs" mce_src="prototypejs"></mce:script> 
    <mce:script language="javascript" type="text/javascript"><!
        function getServerTime(format) { 
            //要請求的URL地址注意escape是javascript中的方法 
            //用於對特殊字符進行轉義 
            var url = "ServerTimeaspx"; 
            var params = "format=" + escape(format); 
            var ajax = new AjaxRequest( 
                url 
                { 
                method: ’get’ 
                parameters:params 
                onComplete:update 
            } 
            ); 
        } 
        //當接收到服務器的響應之後執行的客戶端方法 
        function update(request) { 
            $("time")innerHTML = requestresponseText; 
        } 
// ></mce:script>
</head>
<body>
<table border=""> 
    <tr> 
    <td>服務器時間</td><td><div id="time"></div></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyymmdd hh:mm:ss’);"  /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyyMMdd’);"  /></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(’mmdd’);" /></td> 
    </tr> 
    </table>
</body>
</html> 


From:http://tw.wingwit.com/Article/program/net/201311/14296.html
    《ASP.NET中AJAX編程開發指南》本文是由.NET編程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.