SlideShare a Scribd company logo
1 of 45
ASP.NET AJAX
2017/5/16 1
目錄
ASP.NET AJAX
XMLHttpObject & jQuery Ajax
PageMethod & WebMethod
PageRequestManager
__doPostBack
2017/5/16 2
ASP.NET AJAX
2017/5/16 3
AJAX
 即非同步JavaScript和XML,AJAX的技術,可用於用戶端和伺服器之間的通信,而不需要PostBack。
 避免PostBack的好處是更快地回應於使用者在流覽器中的頁面沒有改變、刷新、發佈的,以便用戶可以繼
續使用它,而資料被發送到伺服器,並且也可以被傳遞到的使用者操作,如按鍵伺服器提供更多的有意義
的結果(例如:自動提示),即增強Web應用程式的整體可用性。
2017/5/16 4
ASP.NET AJAX
XMLHTTPRequest
•JavaScript物件,W3C標準的方式,具有AJAX功能。
jQuery
•jQuery包裝了AJAX功能,使用XMLHttpRequest的開發更方便。
Microsoft AJAX library
•這是一個JavaScript框架,使得AJAX方便ASP.NET開發人員的工作
AJAX Control Toolkit
•一組 ASP.NET AJAX 控制項。
ASP.NET AJAX Server controls
•這些控制項建構了ASP.NET頁面上基本的AJAX功能。
2017/5/16 5
AJAX 功能的主要好處包括
• 只需要更新的頁面,而不是整個頁面。
Partial page updates
• 由於只有一個區域的用戶端和伺服器之間的資料傳送,其結果示迅速。
Faster user response
• 使用AJAX,可以實現桌面類似的使用者介面與進度指標和計時器。
Enhanced user interface
• 可以實現AJAX的功能,如自動完成。
Enhanced features
2017/5/16 6
AJAX 伺服器控制項
ScriptManager ScriptManagerProxy UpdatePanel
UpdateProgress Timer
2017/5/16 7
SCRIPTMANAGER
 ScriptManager控制項的主要功能是微軟推到用戶端AJAX框架代碼。
 這種控制可以被認為是作為代理,將在用戶端上編寫JavaScript。
 應該只有一個ScriptManager控制項在頁面上。
2017/5/16 8
SCRIPTMANAGERPROXY
 我們也知道,應該只有一個ScriptManager控制項在頁面上。現在考慮的情況下,有一個母版頁和內容頁
都需要AJAX功能。
 還有一個場景,讓我們說,我們有一個使用者控制項需要AJAX,它已被添加在頁面上已經實現AJAX。
 由於有可能是只有一個ScriptManager在頁面上添加一個ScriptManager控制在這些情況下,會導致兩個使
用ScriptManager頁面上的控制項。
 因此,處理這樣的條件下,ScriptManagerProxy控制項都可以使用。
 ScriptManagerProxy應使用母版頁包含一個ScriptManager控制項的內容網頁上。它也可以使用使用者控
制項內包含使用者控制項的頁面時,已經有ScriptManager控制項。
2017/5/16 9
UPDATEPANEL
 這是一個容器控制項包含其他ASP.NET控制項。此控制項定義一個區域,能夠使局部頁面更新。
 我們可以添加各種伺服器在UpdatePanel控制項,這個控制項在UpdatePanel與伺服器通信,不論頁面的
回傳。
 讓我們在頁面上,它裡面的一些伺服器控制項添加UpdatePanel。我們會嘗試做一些算數運算,這裡面的
 UpdatePanel,並嘗試得到的結果,而無需PostBack。
 現在因為所有的控制都在裡面的UpdatePanel控制項,點擊按鈕將不會導致在回傳中,但它會非同步調用
伺服器端的功能,給我們的結果。當我們在流覽器中運行的頁面:
 請注意,點擊按鈕並不會導致回傳,但給我們的結果非同步。我們可以控制使用UpdateMode屬性的
UpdatePanel和設置觸發局部頁面更新。
2017/5/16 10
UPDATEPROGRESS
 我們剛剛處理的情況下給我們的結果瞬間,但想像這樣一個場景:在伺服器端處理非同步事件需要一些時
間。
 如果操作是耗時的,那麼我們就可以向用戶提供UpdateProgress控制項。
 我們還可以UpdateProgress控制項內的圖像和動畫GIF,提供更友好的用戶經驗。
2017/5/16 11
TIMER
 可能有一些情況下,我們要更新持續一段時間後,不論使用者動作頁面的特定部分。
 要做到這一點,我們就可以使用Timer控制項。
 讓我們添加一個計時器控制我們的頁面,每5秒顯示伺服器的時間。
2017/5/16 12
XMLHTTPOBJECT & JQUERY AJAX
2017/5/16 13
XMLHTTPOBJECT 建立方法
//建立xml http物件
xmlHttp = null;
if(window.XMLHttpRequest)
{
//適用於大部分瀏覽器
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
//Internet Explorer 5,6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2017/5/16 14
XMLHTTPREQUEST非同步呼叫
if(xmlHttp != null)
{
//從控制項取得變數
var request =
document.getElementById
('<%=ServerControl.ClientID %>').value;
//非同步回傳處理
xmlHttp.onreadystatechange=xmlHttp_ReadyStateChange;
//傳送數值到網頁, 等待回傳值
xmlHttp.open
("GET", "AjaxCalls.aspx?request=" + request, true);
xmlHttp.send(null);
}
2017/5/16 15
XMLXTTPREQUEST非同步回傳
function xmlHttp_ReadyStateChange()
{
//4 = 回傳結束
if (xmlHttp.readyState==4)
{
//200 = 回傳成功
if (xmlHttp.status==200)
{
//回傳成功
var response = xmlHttp.responseText;
//回傳處理
document.getElementById('<%=ServerControl.ClientID %>').innerText = response;
}
}
}
2017/5/16 16
XMLXTTPREQUEST READYSTATE
0 尚未初始化 pen()
1 載入中 send()
2 載入完成 ctent header
3 可以互動 http_request
4 完成
2017/5/16 17
XMLXTTPREQUEST STATUS
1xx 參考資訊
•暫時回應並需要要求者反應以繼續。
2xx 成功
•伺服器以成功處理該要求
3xx 重新導向
•需要近一步的動作才能完成該要求,通常用來重新導向。
4xx 用戶端錯誤
•可能發生使伺服器無法進行處裡的錯誤。
5xx 伺服器端錯誤
•伺服器在處理要求時發生錯誤,可能是伺服器本身的錯誤。
2017/5/16 18
JQUERY AJAX 非同步呼叫/回傳
//建立ajax物件
$.ajax
(
{
//HTTP 通訊協定
type: "POST",
//page/method name
url: "AjaxCalls.aspx/GetMessage",
//json 傳值格式
data: "{‘request':'"+$('#<%=ServerControl.ClientID %>').val() +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg)
{
//回傳成功
var response = msg;
//回傳處理
document.getElementById('<%=ServerControl.ClientID %>').innerText = response;
}
}
); 2017/5/16 19
WEB METHOD(.CS)
[System.Web.Services.WebMethod]
public static string GetMessage(string request)
{
//回傳值
string result = string.Empty;
return result;
}
2017/5/16 20
HTTP 1.1 通訊協定
•測試伺服器功能。OPTIONS
•讀取「資料訊息」Metadata。HEAD
•(傳送)讀取資料。GET
•傳送資料,資料被包含在請求本文中。POST
•上傳資料、檔案。PUT
•請求刪除資源。DELETE
•測試、伺服器錯誤診斷訊息。TRACE
•用於SSL加密通道。CONNECT
2017/5/16 21
PAGEMETHOD & WEBMETHOD
2017/5/16 22
呼叫伺服器端方法
 我們可以簡單地使用ASP.NET AJAX框架,呼叫伺服器端方法。
 使用ASP.NET AJAX搭配JavaScript,呼叫Web服務。
2017/5/16 23
WEBMETHOD(.ASMX)
 從JavaScript呼叫Web服務
2017/5/16 24
環境設定:SCRIPTMANAGER
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
2017/5/16 25
WEB METHOD(.ASMX)
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding
(ConformsTo = WsiProfiles.BasicProfile)]
[ScriptService]
public class Service : System.Web.Services.WebService
{
public Service () {}
[WebMethod]
public int GetMessage()
{
return string.Empty;
}
}
2017/5/16 26
CLIEND METHOD (.ASPX )
function InvokeService()
{
WebService.GetMessage
(
OnSuccess,
'GetMessage'
);
}
function OnSuccess(result, userContext, method)
{
var msg = method + "[" + userContext + "]:" + result;
alert(msg);
}
2017/5/16 27
PAGEMETHOD
 2次回傳,較耗效能
 不須另外建立Web Method(.asmx)
2017/5/16 28
環境設定:SCRIPTMANAGER
<asp:ScriptManager ID="ScriptManager"
runat="server" EnablePageMethods="true"/>
2017/5/16 29
環境設定:WEB.CONFIG
<httpModules>
<add type="Microsoft.Web.UI.ScriptModule" name="ScriptModule"/>
</httpModules>
2017/5/16 30
CLIEND METHOD(.ASPX)
<!--控制項-->
<asp:Button ID="Button"
runat="server"
Text="Get Message"
OnClientClick=
"CallServerMethod(); return false;"
/>
//JavaScript
function CallServerMethod()
{
//呼叫伺服器端方法
PageMethods.GetMessage
(OnSuccess);
}
function OnSuccess(result)
{
alert(result);
}
2017/5/16 31
WEB METHOD(.CS)
[System.Web.Services.WebMethod]
public static string GetMessage(string request)
{
//回傳值
string result = string.Empty;
return result;
}
2017/5/16 32
CLIEND METHOD (.ASPX ):JSON
<!--控制項-->
<asp:Button ID="Button"
runat="server"
Text="Get Message"
OnClientClick=
"CallServerMethod(); return false;"
/>
//JavaScript
function CallServerMethod()
{
//呼叫伺服器端方法
PageMethods.GetMessage
(OnSuccess);
}
function OnSuccess(result)
{
var json = eval('('+ result + ')');
var msg = json.member;
alert(msg);
}
2017/5/16 33
WEB METHOD(.CS) :JSON
[WebMethod]
public static string GetMessage()
{
// 建立資料模組
Contract contr = new Contract();
// 建立 JSON 序列化物件
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Contract));
// 使用MemoryStream物件暫存JSON序列化資料
using (MemoryStream ms = new MemoryStream())
{
// 序列化
ser.WriteObject(ms,contr);
ms.Flush();
// 使用byte陣列儲存JSON資料
byte[] bytes = ms.GetBuffer();
// 回傳JSON資料
string result = Encoding.UTF8.GetString(bytes, 0, bytes.Length).Trim('0');
return result;
}
}
2017/5/16 34
CLASS(.CS) :JSON
[DataContract]
public class Contract
{
int message;
[DataMember]
public int member
{
get { return message; }
set { message = value; }
}
}
2017/5/16 35
PAGEREQUESTMANAGER
2017/5/16 36
PAGEREQUESTMANAGER
 ScriptManager與UpdataPanel間溝通
 管理目前頁面上所有UpadataPanel
 可用JavaScript控制
 攔截非同步作業
2017/5/16 37
環境設定:SCRIPTMANAGER
<asp:ScriptManager ID="ScriptManager"
runat="server" EnablePartialRendering="true"/>
2017/5/16 38
PAGEREQUESTMANAGER
initializeRequest 尚未初始化 pen()
beginRequest 載入中 send()
pageLoading 載入完成 ctent header
pageLoaded 可以互動 http_request
endRequest 完成
2017/5/16 39
CLIEND METHOD (.ASPX )
function InitializeReqest(sender, args)
{
// 建立PageRequestManager物件
var prm = Sys.WebForms.PageRequestManager.getInstance();
//取消伺服器事件呼叫
if(prm.get_isInAsyncPostBack() & args.get_postBackElement().id ==
'CancelPostBack')
{
prm.abortPostBack();
}
}
2017/5/16 40
__DOPOSTBACK
2017/5/16 41
__DOPOSBACK
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<script type="text/javascript">
var theForm = document.forms['form'];
if (!theForm)
{
theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument)
{
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
</script>
2017/5/16 42
CLIEND METHOD:__DOPOSBACK
<input type="button"
id="btn“
onclick="javascript:PostBack(‘ok')"
value="OK"/>
<script type="text/javascript">
function PostBack(parameter)
{
__doPostBack('btn', parameter)
}
</script>
2017/5/16 43
SERVER METHOD:__DOPOSBACK
protected void Page_Load(object sender, EventArgs e)
{
//控制項ID
string target =
Request.Params["__EVENTTARGET"];
//PostBack參數
string args =
Request.Params["__EVENTARGUMENT"];
}
2017/5/16 44
2017/5/16 45

More Related Content

Similar to ASP.NET AJAX

四天学会Ajax
四天学会Ajax四天学会Ajax
四天学会Ajax
mornone
 
Asp net (1)
Asp net  (1)Asp net  (1)
Asp net (1)
Kyle Lin
 
通行证项目技术分享
通行证项目技术分享通行证项目技术分享
通行证项目技术分享
Tony Deng
 
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Frank Xu
 
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
Eric ShangKuan
 
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
tbosstraining
 
建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4
Cat Chen
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
 
基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现
yiditushe
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
longhao
 

Similar to ASP.NET AJAX (20)

四天学会Ajax
四天学会Ajax四天学会Ajax
四天学会Ajax
 
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
 
J S教材
J S教材J S教材
J S教材
 
Asp net (1)
Asp net  (1)Asp net  (1)
Asp net (1)
 
四天学会Ajax
四天学会Ajax四天学会Ajax
四天学会Ajax
 
门户级Ugc系统的技术进化路线
门户级Ugc系统的技术进化路线门户级Ugc系统的技术进化路线
门户级Ugc系统的技术进化路线
 
通行证项目技术分享
通行证项目技术分享通行证项目技术分享
通行证项目技术分享
 
Asp.net mvc 培训
Asp.net mvc 培训Asp.net mvc 培训
Asp.net mvc 培训
 
JdonFramework中文
JdonFramework中文JdonFramework中文
JdonFramework中文
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
Commt gzip
Commt gzipCommt gzip
Commt gzip
 
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
 
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
 
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
 
建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
 
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
 
敦群學院-SharePoint精英計畫-系統開發-Day 3
敦群學院-SharePoint精英計畫-系統開發-Day 3敦群學院-SharePoint精英計畫-系統開發-Day 3
敦群學院-SharePoint精英計畫-系統開發-Day 3
 
基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现基于J2 Ee 的通用Web 信息系统框架设计与实现
基于J2 Ee 的通用Web 信息系统框架设计与实现
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 

ASP.NET AJAX

Editor's Notes

  1. 系統架構 menu安裝方法(ServerSide + ClientSide) 未來應用程式交付安裝方法(以REMD為例)
  2. ASP.NET AJAX伺服器控制項主要提供的功能有局部頁面更新,更新進度指示和頻繁的更新基於計時器。此外,它負責生成執行這些功能所需的所有JavaScript。因此,使用這些控制項,開發不編寫任何JavaScript來實現AJAX。 所提供的ASP.NET AJAX功能的控制: 1. ScriptManager 2. ScriptManagerProxy 3. UpdatePanel 4. UpdateProgress 5. Timer
  3. ScriptManager控制項是一個非視覺化元件到頁面上。這種控制是必需的每一頁上,需要有上實現AJAX功能。 ScriptManager控制項的主要功能是微軟推到用戶端AJAX框架代碼,當頁面被渲染。這種控制可以被認為是作為代理,將編寫JavaScript,需要在用戶端上,以方便AJAX功能。 應該只有一個ScriptManager控制項在頁面上,需要AJAX功能。
  4. ScriptManagerProxy 我們也知道,應該只有一個ScriptManager控制項在頁面上。現在考慮的情況下,有一個母版頁和內容頁都需要AJAX功能。 還有一個場景,讓我們說,我們有一個使用者控制項需要AJAX,它已被添加在頁面上已經實現AJAX。 由於有可能是只有一個ScriptManager在頁面上添加一個ScriptManager控制在這些情況下,會導致兩個使用ScriptManager頁面上的控制項。 因此,處理這樣的條件下,ScriptManagerProxy控制項都可以使用。 ScriptManagerProxy應使用母版頁包含一個ScriptManager控制項的內容網頁上。它也可以使用使用者控制項內包含使用者控制項的頁面時,已經有ScriptManager控制項。
  5.       var xmlHttp;       function UpdateCountries()       {           //Let us create the XML http object             xmlHttp = null;           if(window.XMLHttpRequest)           {               //for new browsers                 xmlHttp = new XMLHttpRequest();           }           else if(window.ActiveXObject)           {               //for old ones                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");           }                      if(xmlHttp != null)           {               //eveyhthing so far is just fine, lets proceed                 //Retreive the value of the first drop down list                 var contName = document.getElementById('<%=drpContinent.ClientID %>').value;                              //Handle the response of this async request we just made(subscribe to callback)                 xmlHttp.onreadystatechange=state_Change;               //Pass the value to a web page on server as query string using XMLHttpObject.                 xmlHttp.open("GET", "frmForAjaxCalls.aspx?cont=" + contName, true);               xmlHttp.send(null);           }       }       //Handle the response of this async request       function state_Change()       {           if (xmlHttp.readyState==4)           {               // 4 = “loaded”                 if (xmlHttp.status==200)               {                   //request was successful. so Retrieve the values in the response.                     var countries = xmlHttp.responseText.split(';');                   var length = countries.length;                   //Change the second dropdownlists items as per the new values foudn in response.                     //let us remove existing items                     document.getElementById('<%=drpCountry.ClientID %>').options.length = 0;                   //Now add the new items to the dropdown.                     var dropDown = document.getElementById('<%=drpCountry.ClientID %>');                   for (var i = 0; i < length - 1; ++i)                   {                       var option = document.createElement("option");                       option.text = countries[i];                       option.value = countries[i];                       dropDown.options.add(option);                   }               }           }       }
  6. PageMethod: 2次回傳,效能較差。 不需要.asmx。
  7. PageMethod: 2次回傳,效能較差。 不需要.asmx。
  8. PageMethod: 2次回傳,效能較差。 不需要.asmx。