ASP.NET Ajax入門


Ajax是Asynchronous JavaScript and XML(異步JavaScript 和XML技術)的縮寫,它是由JavaScript腳本語言、CSS樣式表、XMLHttpRequest數據交換對象和DOM文檔對象(XMLDOM對象)等多種技術組成。

能夠以更少的響應時間帶來跟加豐富的用戶體驗的一類web應用程序所使用的技術集合。它可以實現異步傳輸和無刷新功能。

 

 AJAX核心對象是XMLHttpRequest,該對象在JavaScript中可用於構建異步的后台服務的調用。

通過這個對象,AJAX可以像桌面應用程序一樣,只同服務器進行數據層面的交換,不用每次刷新界面。

 

初始化XMLHttpRequest對象,不同的瀏覽器構建方式不同

xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

指定響應處理函數(回調方法)

 回調方法在服務器端返回信息給客戶端時被調用,只需將回調方法指定給XMLHttpRequest對象的

onreadystatechange屬性即可,兩種設置方式。

//第一種
var
proRequest = function(){..} http_request.onreadystatechange = proRequest; //第二種 http_request.onreadystatechange = function(){ … }

在發送請求需要調用XMLHttpRequest的open方法打開鏈接,之后可

通過send方法發送請求。

http_request.open('GET', 'htt://localhost:8080/useprj/findProduct?id=01', true); 

三個參數:請求方式,url,是否異步。

http_request.send(null);

如果請求方式是POST,那么send里面就是傳輸過去的數據。如果數據為上傳文件,還需設置請求的頭信息。

http_request.setRequestHeader(“Content-Type”,” multipart/form-data”); 

請求發送后,瀏覽器會根據請求或響應的狀態調用XMLHttpRequest的回調方法,狀態信息保存在XMLHttpRequest對象的readyState屬性中。
不同的readyState值對應響應的不同階段,當readyState的值為4時表示服務器響應完成。
示例代碼中根據返回的狀態及響應的結果狀態,執行處理。

if (http_request.readyState == 4) {  // 信息已經返回,可以開始處理
if (http_request.status == 200) {   // 頁面正常,可以開始處理信息
} else {  // 頁面有問題}
} else {    // 信息還沒有返回,等待}

XMLHttpRequest成功返回的信息有兩種處理方式:
responseText該屬性以字符串的形式返回響應的值
responseXML該屬性將返回結果作為一個XML的DOM文檔返回,可以執行DOM處理。

 alert(http_request.responseText);

完整例子:

var xmlHttp = null;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 xmlHttp.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200) {
            document.getElementById("TextBox3").value = poster.responseText;
   }
    xmlHttp.open("POST", url, issync);
    xmlHttp.send(data);
}

在jQuery中是對ajax進行了封裝的,簡化了許多。

jQuery中:

 $.ajax({
        type: "GET",
        url: "AjaxWerUser",//這里是url
        data: "userName=" + userName.val(),
        async: true, //默認就是true
        success: function (msg) { //成功時執行的方法,msg就是返回過來的數據
          if (msg === "True") {
                。。。。
          } else {
             。。。。。
          }
        }
    });

由於ajax返回的是整個頁面,所以url地址必須是一個空的aspx文件。

在aspx文件中獲取ajax傳輸過來的值:

如果是get可以通過

Request.QueryString["data"].ToString();//data就是傳輸過來的鍵

如果是post可以這樣

  StreamReader reader = new StreamReader(Request.InputStream);

 string Data = reader.ReadToEnd(); 

 

 ------------------------------------------------------------------------------------------------

在asp.net中內置有ajax服務器控件。但是並不推薦使用以下為asp.net ajax控件使用方式。

ASP.NET Ajax服務器控件

ScriptManager腳本管理控件

ScriptManager控件負責管理當前頁面中所有的Ajax服務器控件,是Ajax的核心。有了ScriptManager控件才能夠讓Page局部刷新起作用。所有要使用Ajax,每個頁面中必須要ScriptManager控件。並且有且只有一個。

在ScriptManager中使用<Scripts>標記映入腳本資源。使用<Services>標記引入web Service

<Scripts><asp:ScriptReference Path="~/Script.js" /</Scripts>

 

UpdatePanel局部更新控件

屬性:

ContentTemplate中放置控件、html代碼等。這里面的控件、代碼可以局部更新,不會整個頁面更新。

UpdateMode共有兩種模式:Always與Conditional,Always是每次Postback后,UpdatePanel會被連帶更新;而Conditional只針對特定情況才更新。

當頁面中有多個UpdatePanel時,設置成Conditional可以避免相互間的影響。

在UpdatePanel中可以實現局部更新,在之外同樣可以觸發局部更新。使用到Triggers屬性。Triggers包含兩種觸發器:一種是AsyncPostBackTrigger,用於引發局部更新,另一種PostBackTrigger,用於引發整頁回送。設置行為中的ControlID屬性和EventName屬性,設置相應控件的id和事件。

   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                 <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>

 

Timer定時器控件用於定時執行某段代碼

Interval屬性

間隔時間

Tick事件,執行代碼。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM