SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Microsoft Web & Gaming Technologies @ UALG Nelson Correia (ncorreia@ncorreia.name) http://nelsoncorreia.spaces.live.com
AJAX – O que é? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
AJAX Fonte: Adaptative Path Fonte: Adaptative Path
AJAX – Porquê? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
AJAX – Em que consiste? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XMLHttpRequest Object ,[object Object],var req = null;  if (window.XMLHttpRequest) { req =  new XMLHttpRequest() ; // IE7, Firefox, Safari, Opera,... } else if (window.ActiveXObject) { // IE5.x, IE6 try { req =  new ActiveXObject("Msxml2.XMLHTTP") ;  } catch (e) { try { req =  new ActiveXObject("Microsoft.XMLHTTP") ;  } catch (e){ alert("Exception: " + e.message); } } }
XMLHttpRequest Object ,[object Object],Método Parâmetros e Descrição open ,[object Object],[object Object],send ,[object Object],[object Object],setRequestHeader ,[object Object],[object Object],abort ,[object Object],[object Object]
XMLHttpRequest Object ,[object Object],Propriedade Descrição onreadystatechange Referência para o  handler  do evento de mudança de estado readyState Estado do objecto:  0  (não iniciado);  1  (aberto);  2  (enviado);  3  (a receber);  4  (carregado) responseText Resposta em formato  string responseXML Resposta na forma dum objecto XML status Código do estado HTTP statusText Texto do estado HTTP
XMLHttpRequest - Alternativas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XMLHttpRequest - Alternativas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://ajaxpatterns.org/XMLHttpRequest_Call#Alternatives
[object Object]
ASP.NET AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object]
Arquitectura Servidor Cliente
Camada de Comunicação Assíncrona (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Camada de Comunicação Assíncrona (2) ,[object Object]
Camada de Comunicação Assíncrona (3) ,[object Object]
[object Object]
[object Object]
ASP.NET Ajax Server Controls ,[object Object],[object Object],[object Object],[object Object]
ScriptManager ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ScriptManager ,[object Object],Método Descrição RegisterAsyncPostBackControl Regista um controlo para  postbacks  assíncronos RegisterPostBackControl Regista um controlo para  postbacks  síncronos RegisterClientScriptBlock Regista um bloco de código  script RegisterClientScriptInclude Regista um ficheiro de código  script RegisterArrayDeclaration Regista um array
ScriptManager ,[object Object],Propriedade Descrição EnablePageMethods Permite (des) activar a chamada a métodos estáticos da página, a partir de código  script EnablePartialRendering Injecta na resposta o código que permite a actualização parcial de páginas IsInAsyncPostback Indica se está em curso um  postback  assíncrono SupportsPartialRendering Indica se o cliente suporta actualizações parciais
ScriptManager ,[object Object],Propriedade Descrição AuthenticationService Devolve a referência para o AuthenticationServiceManager associado ProfileService Devolve a referência para o ProfileServiceManager associado Scripts Colecção de objectos ScriptReference (ficheiros  script ) Services Colecção de objectos ServiceReference (serviços asmx)
ScriptManager ,[object Object],1 2 3 AllowCustomErrorsRedirect  : indica se a secção  customErrors  do web.config é utilizada durante  postbacks  assíncronos; AsyncPostBackError  : evento que é lançado quando ocorre um erro durante  postbacks  assíncronos; AsyncPostBackError   Message : mensagem de erro enviada ao  browser .
ScriptManagerProxy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ScriptManagerProxy ,[object Object],[object Object],[object Object],[object Object],[object Object],Page code Master Page Content Page ScriptManager ScriptManagerProxy
[object Object]
UpdatePanel ,[object Object],[object Object],UpdatePanel3 UpdatePanel1 UpdatePanel2 UpdatePanel4 Page1 UpdatePanel1 UpdatePanel2 Page2
UpdatePanel ,[object Object],Propriedade  UpdateMode Always Conditional ,[object Object],[object Object],[object Object],[object Object],[object Object]
UpdatePanel ,[object Object],<asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;> <ContentTemplate> <asp:Button ID=&quot;Button1&quot; runat=&quot;server/> </ContentTemplate> < Triggers > <asp: PostBackTrigger  ControlID=&quot;Button1&quot; /> <asp: AsyncPostBackTrigger  ControlID=&quot;Button2&quot; /> </ Triggers > </asp:UpdatePanel> <asp:Button ID=&quot;Button2&quot; runat=&quot;server /> ScriptManager.RegisterPostBackControl ScriptManager.RegisterAsyncPostBackControl
[object Object]
UpdatePanel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
UpdatePanel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],*http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx
UpdateProgress ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
Timer ,[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript – Extensões ao sistema de tipos (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript – Extensões ao sistema de tipos (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],$addHandlers($get(&quot;Button1&quot;), {click:processClick,mouseover:processMouseOver}); Exemplo:
[object Object],[object Object],PageRequestManager Gerado quando o controlo retorna ao browser Depois do conteúdo da página ser actualizado Antes do conteúdo da página ser actualizado Antes do pedido ser enviado para o servidor Início de um  postback  assíncrono
[object Object]
Web Services ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Services – How to <system.web> <httpHandlers> <remove verb=&quot;*&quot; path=&quot;*.asmx&quot;/>  <add verb=&quot;*&quot; path=&quot;*.asmx&quot; type=&quot;System.Web.Script.Services.ScriptHandlerFactory&quot;/> </httpHandlers> <system.web> 1 2 // Calculator.asmx <%@ WebService Class=&quot;Calculator&quot; Language=&quot;C#&quot;%> [ ScriptService ] public class Calculator : WebService { [ WebMethod ] public  int  Add(int  i1, int  i2) { return  i1 + i2; } }
Web Services – How to 3 <asp:ScriptManager runat=&quot;server&quot; ID=&quot;scriptManager&quot;> <Services> <asp:ServiceReference path=&quot;~/WebServices/Calculator.asmx&quot; /> </Services> </asp:ScriptManager> 4 <script type=&quot;text/javascript&quot;>  function add(value1, value2){ SimpleWebService.Add(value1, value2, OnSucceeded); } function OnSucceeded(result){ alert(result); } </script>
Web Services ,[object Object],<asp:ScriptManager  ID=&quot;scriptManager“  EnablePageMethods=&quot;true&quot;  runat=&quot;server&quot; > public partial class SimplePage : Page { [ WebMethod ] public  static  string HelloWorld(){ return “Hello World”; } } <script type=&quot;text/javascript&quot;>  function PageMethodCall() { PageMethods .HelloWorld(OnSucceeded); } function OnSucceeded(result){ alert(result); } </script> 1 2 3
[object Object]
Serviços ASP.NET ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
Links ,[object Object],[object Object],[object Object],[object Object],[object Object]
Nelson Correia [email_address] http://nelsoncorreia.spaces.live.com

Weitere ähnliche Inhalte

Was ist angesagt?

Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App EngineRodrigo Amaral
 
ASP.NET Core 2.1 #dotnetconf
ASP.NET Core 2.1 #dotnetconfASP.NET Core 2.1 #dotnetconf
ASP.NET Core 2.1 #dotnetconfRodrigo Kono
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Eduardo Mendes
 
Introdução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPIntrodução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPManoel Afonso
 
Java Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuraçãoJava Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuraçãoEduardo Mendes
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Eduardo Mendes
 
Introdução ao desenvolvimento web com Java
Introdução ao desenvolvimento web com JavaIntrodução ao desenvolvimento web com Java
Introdução ao desenvolvimento web com JavaFellipeFonseca
 
Resumo Anotacoes Certificacao SCWCD 5
Resumo Anotacoes Certificacao SCWCD 5Resumo Anotacoes Certificacao SCWCD 5
Resumo Anotacoes Certificacao SCWCD 5Gilberto Holms
 
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2Thyago Maia
 
Android webservice
Android webserviceAndroid webservice
Android webserviceAlan Echer
 
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1Thyago Maia
 
Introdução ao Google App Engine
Introdução ao Google App EngineIntrodução ao Google App Engine
Introdução ao Google App EngineRodrigo Amaral
 
Fisl 11 - Ecossistema Ruby on Rails
Fisl 11 - Ecossistema Ruby on RailsFisl 11 - Ecossistema Ruby on Rails
Fisl 11 - Ecossistema Ruby on RailsFabio Akita
 
Tutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper jsTutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper js4ALL Tests
 

Was ist angesagt? (20)

Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App Engine
 
ASP.NET Core 2.1 #dotnetconf
ASP.NET Core 2.1 #dotnetconfASP.NET Core 2.1 #dotnetconf
ASP.NET Core 2.1 #dotnetconf
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
 
jsp-intro
jsp-introjsp-intro
jsp-intro
 
Introdução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPIntrodução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSP
 
JavaScript Hacks
JavaScript HacksJavaScript Hacks
JavaScript Hacks
 
Java Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuraçãoJava Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuração
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2
 
Model View Controller
Model View ControllerModel View Controller
Model View Controller
 
Introdução ao desenvolvimento web com Java
Introdução ao desenvolvimento web com JavaIntrodução ao desenvolvimento web com Java
Introdução ao desenvolvimento web com Java
 
Resumo Anotacoes Certificacao SCWCD 5
Resumo Anotacoes Certificacao SCWCD 5Resumo Anotacoes Certificacao SCWCD 5
Resumo Anotacoes Certificacao SCWCD 5
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2
Desenvolvimento de Sistemas Web com PHP Frameworks - Aula 2
 
Android webservice
Android webserviceAndroid webservice
Android webservice
 
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1
Desenvolvimento de Sistemas Web com PHP Frameworks - 2019.1 - Aula 1
 
Introdução ao Google App Engine
Introdução ao Google App EngineIntrodução ao Google App Engine
Introdução ao Google App Engine
 
Fisl 11 - Ecossistema Ruby on Rails
Fisl 11 - Ecossistema Ruby on RailsFisl 11 - Ecossistema Ruby on Rails
Fisl 11 - Ecossistema Ruby on Rails
 
Tutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper jsTutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper js
 

Andere mochten auch

Bruce Power Saver Brochure
Bruce Power Saver BrochureBruce Power Saver Brochure
Bruce Power Saver BrochureSteve Glover
 
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...IndexBox Marketing
 
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...IndexBox Marketing
 
spray: REST on Akka
spray: REST on Akkaspray: REST on Akka
spray: REST on Akkasirthias
 
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...IndexBox Marketing
 

Andere mochten auch (9)

Bruce Power Saver Brochure
Bruce Power Saver BrochureBruce Power Saver Brochure
Bruce Power Saver Brochure
 
ACCDocketArticle12_2015
ACCDocketArticle12_2015ACCDocketArticle12_2015
ACCDocketArticle12_2015
 
Speech Outline Presentation
Speech Outline PresentationSpeech Outline Presentation
Speech Outline Presentation
 
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...
EU: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Report. ...
 
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...
Romania: Equipment For Scaffolding, Shuttering, Propping Or Pit Propping - Ma...
 
spray: REST on Akka
spray: REST on Akkaspray: REST on Akka
spray: REST on Akka
 
Vet tech
Vet techVet tech
Vet tech
 
Posham R - AIMRADIAL 2014 Endovascular - Chemoembolization
Posham R - AIMRADIAL 2014 Endovascular - ChemoembolizationPosham R - AIMRADIAL 2014 Endovascular - Chemoembolization
Posham R - AIMRADIAL 2014 Endovascular - Chemoembolization
 
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...
Spain: Tanks, Casks, Drums, Cans, Boxes And Similar Containers - Market Repor...
 

Ähnlich wie ASP.NET AJAX

Ähnlich wie ASP.NET AJAX (20)

introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3
 
Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Uma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web APIUma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web API
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
 
jQuery e ASP.Net MVC a dupla dinâmica
jQuery e ASP.Net MVC a dupla dinâmicajQuery e ASP.Net MVC a dupla dinâmica
jQuery e ASP.Net MVC a dupla dinâmica
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Aula 01 web server controls
Aula 01   web server controlsAula 01   web server controls
Aula 01 web server controls
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo SilveiraServlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
 
Tutorial struts
Tutorial strutsTutorial struts
Tutorial struts
 
ApresentaçãO Mvc
ApresentaçãO MvcApresentaçãO Mvc
ApresentaçãO Mvc
 
Apresentação M V C
Apresentação M V CApresentação M V C
Apresentação M V C
 
Construindo APIs com Amazon API Gateway e AWS Lambda
Construindo APIs com Amazon API Gateway e AWS LambdaConstruindo APIs com Amazon API Gateway e AWS Lambda
Construindo APIs com Amazon API Gateway e AWS Lambda
 
CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsi
 
Minicurso Smsi
Minicurso SmsiMinicurso Smsi
Minicurso Smsi
 
Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5Rapid Application Development com Tapestry 5
Rapid Application Development com Tapestry 5
 
jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2
 

ASP.NET AJAX

  • 1. Microsoft Web & Gaming Technologies @ UALG Nelson Correia (ncorreia@ncorreia.name) http://nelsoncorreia.spaces.live.com
  • 2.
  • 3. AJAX Fonte: Adaptative Path Fonte: Adaptative Path
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43. Web Services – How to <system.web> <httpHandlers> <remove verb=&quot;*&quot; path=&quot;*.asmx&quot;/> <add verb=&quot;*&quot; path=&quot;*.asmx&quot; type=&quot;System.Web.Script.Services.ScriptHandlerFactory&quot;/> </httpHandlers> <system.web> 1 2 // Calculator.asmx <%@ WebService Class=&quot;Calculator&quot; Language=&quot;C#&quot;%> [ ScriptService ] public class Calculator : WebService { [ WebMethod ] public int Add(int i1, int i2) { return i1 + i2; } }
  • 44. Web Services – How to 3 <asp:ScriptManager runat=&quot;server&quot; ID=&quot;scriptManager&quot;> <Services> <asp:ServiceReference path=&quot;~/WebServices/Calculator.asmx&quot; /> </Services> </asp:ScriptManager> 4 <script type=&quot;text/javascript&quot;> function add(value1, value2){ SimpleWebService.Add(value1, value2, OnSucceeded); } function OnSucceeded(result){ alert(result); } </script>
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50. Nelson Correia [email_address] http://nelsoncorreia.spaces.live.com