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事件,執行代碼。