SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
Iniciativa Globalcode Introdução a AJAX Open-source Education
Palestrantes Jorge Diz [email_address] Melissa Villela [email_address]
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Histórico ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Histórico ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object]
O que é AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é AJAX ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que  não  é AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Como funciona? Modelo clássico de sistemas web
Como funciona? Utilizando Ajax
Como funciona? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Como funciona? Requisições de HTTP assíncronas (cont.) Também são utilizadas no ambiente do servidor (para acesso assíncrono a Web Services). As requisições são tratadas por servlets ou equivalentes (para outras tecnologias) O content type utilizado pode ser XML, JSON(*), ou outro formato baseado em texto  (*) JSON =  JavaScript Object Notation – sintaxe para atribuição de conteúdo /   serialização de objetos JavaScript, mais legível e concisa que XML.
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vantagens ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vantagens ,[object Object],[object Object],[object Object],[object Object],[object Object]
Vantagens Modelo clássico de sistemas web
Vantagens Utilizando Ajax
Vantagens
Desvantagens ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Desvantagens ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Implementação 1  var  request; 2  3  function  sendRequest(url) { 4  5  //Inicializa o objeto XMLHttpRequest para o Mozilla 6  if  ( window.XMLHttpRequest ) { 7  request =  new  XMLHttpRequest(); 8  } 9  //Inicializa o objeto XMLHttpRequest para o Internet Explorer 10  else   if  (window.ActiveXObject) { 11  request =  new  ActiveXObject(“Microsoft.XMLHTTP”); 12  } 13  //determina a função para processamento da requisição 14  request.onreadystatechange = processRequest; 15  16  //configura a requisição 17  request.open(“GET”,url, true ); 18  19  //envia a requisição 20  request.send( null ); 21  } 22  23  function  processRequest() { 24  25  //Verifica se a resposta já foi recebida por completo 26  if (request.readyState ==  4 ) { 27  //Verifica se o status é OK 28  if (request.status ==  200 ) { 29  preencheComboCidade(); 30  } 31  } 32  } Incompatiblidade de browsers Função para tratar a resposta assíncrona Código a ser desenvolvido
Implementação 41  function  preencheComboCidade() { 46  //Faz a leitura do documento XML recebido 47  var  response = request.responseXML; 48  var  raiz = response.getElementsByTagName( &quot;cidades&quot; ).item( 0 ); 50  var  cidades = raiz.getElementsByTagName( &quot;cidade&quot; ); 51  52  //Seleciona a caixa de selecao de cidades 53  var  selectNode = document.getElementById( &quot;cidade&quot; ); 54  //Apaga as opções atuais da caixa de seleção 56  selectNode.options.length =  0 ; 57  58  //preenche a caixa de opções com os valores recebidos 59  for ( var  i =  0 ; i < cidades.length; i++) { 60  var  txtCidade = cidades.item(i).firstChild.data; 61  var  option =  new  Option(txtCidade); 62  selectNode.add(option, null ); 63  } 66  } Recupera os dados vindos do servidor Id do elemento HTML (combo cidade) Adiciona os dados ao DOM
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ferramentas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Casos de sucesso ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Casos de sucesso ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Demo

Mais conteúdo relacionado

Mais procurados

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âmicaVictor Cavalcante
 
Implementando MVC com AJAX
Implementando MVC com AJAXImplementando MVC com AJAX
Implementando MVC com AJAXcejug
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Ramon Durães
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTJavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTRodrigo Cândido da Silva
 

Mais procurados (12)

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
 
Implementando MVC com AJAX
Implementando MVC com AJAXImplementando MVC com AJAX
Implementando MVC com AJAX
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
 
Ajax
AjaxAjax
Ajax
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
Ajaxificando
AjaxificandoAjaxificando
Ajaxificando
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2jQuery e ASP.Net mvc2
jQuery e ASP.Net mvc2
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTJavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
 

Destaque

Software livre para leigos - VII SIECOMP
Software livre para leigos - VII SIECOMPSoftware livre para leigos - VII SIECOMP
Software livre para leigos - VII SIECOMPAnderson Ferraz
 
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016FPA
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMarcelo Linhares
 
Visual Basic 2010 - Criando uma aplicação de Controle de Notas
Visual Basic 2010 - Criando uma aplicação de Controle de NotasVisual Basic 2010 - Criando uma aplicação de Controle de Notas
Visual Basic 2010 - Criando uma aplicação de Controle de NotasETEC Monsenhor Antonio Magliano
 
Apostila completa (php my sql e ajax)
Apostila completa (php   my sql e ajax)Apostila completa (php   my sql e ajax)
Apostila completa (php my sql e ajax)Paulo Kons
 
Pcmso modelo.doc
Pcmso modelo.docPcmso modelo.doc
Pcmso modelo.docLuis Araujo
 
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARES
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARESPROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARES
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARESTancredo Almeida
 
Programação c# - banco de dados
Programação   c# - banco de dadosProgramação   c# - banco de dados
Programação c# - banco de dadosdouglasschaefler
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxAlmir Neto
 
Apostila desenvolvimento aplicações comerciais com C#
Apostila desenvolvimento aplicações comerciais com C#Apostila desenvolvimento aplicações comerciais com C#
Apostila desenvolvimento aplicações comerciais com C#Vinicius Vieira
 
Ajax Training Sessions
Ajax Training SessionsAjax Training Sessions
Ajax Training SessionsRenato Moreira
 

Destaque (14)

Conceitos de Ajax
Conceitos de AjaxConceitos de Ajax
Conceitos de Ajax
 
8159540 Tutorial De Ajax
8159540 Tutorial De Ajax8159540 Tutorial De Ajax
8159540 Tutorial De Ajax
 
Revista programar 2
Revista programar 2Revista programar 2
Revista programar 2
 
Software livre para leigos - VII SIECOMP
Software livre para leigos - VII SIECOMPSoftware livre para leigos - VII SIECOMP
Software livre para leigos - VII SIECOMP
 
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016
Digital first: gli appuntamenti sulla PA digitale a FORUM PA 2016
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
 
Visual Basic 2010 - Criando uma aplicação de Controle de Notas
Visual Basic 2010 - Criando uma aplicação de Controle de NotasVisual Basic 2010 - Criando uma aplicação de Controle de Notas
Visual Basic 2010 - Criando uma aplicação de Controle de Notas
 
Apostila completa (php my sql e ajax)
Apostila completa (php   my sql e ajax)Apostila completa (php   my sql e ajax)
Apostila completa (php my sql e ajax)
 
Pcmso modelo.doc
Pcmso modelo.docPcmso modelo.doc
Pcmso modelo.doc
 
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARES
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARESPROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARES
PROPOSTA DE UM SISTEMA PARA AUTOMATIZAR ROTINAS ADMINISTRATIVAS ESCOLARES
 
Programação c# - banco de dados
Programação   c# - banco de dadosProgramação   c# - banco de dados
Programação c# - banco de dados
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
 
Apostila desenvolvimento aplicações comerciais com C#
Apostila desenvolvimento aplicações comerciais com C#Apostila desenvolvimento aplicações comerciais com C#
Apostila desenvolvimento aplicações comerciais com C#
 
Ajax Training Sessions
Ajax Training SessionsAjax Training Sessions
Ajax Training Sessions
 

Semelhante a Introdução AJAX Open-source Education

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)kidh0
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!Lucas Brasilino
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1infinitopublicidade
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Web Scraping: aplicações nos negócios e na ciência
Web Scraping: aplicações nos negócios e na ciênciaWeb Scraping: aplicações nos negócios e na ciência
Web Scraping: aplicações nos negócios e na ciênciaSidney Roberto
 
Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Rafael Benevides
 

Semelhante a Introdução AJAX Open-source Education (20)

Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 
AJAX
AJAXAJAX
AJAX
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
Ajax
AjaxAjax
Ajax
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Java Script
Java ScriptJava Script
Java Script
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Web Scraping: aplicações nos negócios e na ciência
Web Scraping: aplicações nos negócios e na ciênciaWeb Scraping: aplicações nos negócios e na ciência
Web Scraping: aplicações nos negócios e na ciência
 
Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007
 
Palestra Sobre REST
Palestra Sobre RESTPalestra Sobre REST
Palestra Sobre REST
 

Mais de elliando dias

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slideselliando dias
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScriptelliando dias
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structureselliando dias
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de containerelliando dias
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agilityelliando dias
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Librarieselliando dias
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!elliando dias
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Webelliando dias
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduinoelliando dias
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorceryelliando dias
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Designelliando dias
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makeselliando dias
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.elliando dias
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebookelliando dias
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Studyelliando dias
 

Mais de elliando dias (20)

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
 
Ragel talk
Ragel talkRagel talk
Ragel talk
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
 
Rango
RangoRango
Rango
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
 

Introdução AJAX Open-source Education

  • 1. Iniciativa Globalcode Introdução a AJAX Open-source Education
  • 2. Palestrantes Jorge Diz [email_address] Melissa Villela [email_address]
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Como funciona? Modelo clássico de sistemas web
  • 16.
  • 17. Como funciona? Requisições de HTTP assíncronas (cont.) Também são utilizadas no ambiente do servidor (para acesso assíncrono a Web Services). As requisições são tratadas por servlets ou equivalentes (para outras tecnologias) O content type utilizado pode ser XML, JSON(*), ou outro formato baseado em texto (*) JSON = JavaScript Object Notation – sintaxe para atribuição de conteúdo / serialização de objetos JavaScript, mais legível e concisa que XML.
  • 18.
  • 19.
  • 20.
  • 21. Vantagens Modelo clássico de sistemas web
  • 24.
  • 25.
  • 26.
  • 27. Implementação 1 var request; 2 3 function sendRequest(url) { 4 5 //Inicializa o objeto XMLHttpRequest para o Mozilla 6 if ( window.XMLHttpRequest ) { 7 request = new XMLHttpRequest(); 8 } 9 //Inicializa o objeto XMLHttpRequest para o Internet Explorer 10 else if (window.ActiveXObject) { 11 request = new ActiveXObject(“Microsoft.XMLHTTP”); 12 } 13 //determina a função para processamento da requisição 14 request.onreadystatechange = processRequest; 15 16 //configura a requisição 17 request.open(“GET”,url, true ); 18 19 //envia a requisição 20 request.send( null ); 21 } 22 23 function processRequest() { 24 25 //Verifica se a resposta já foi recebida por completo 26 if (request.readyState == 4 ) { 27 //Verifica se o status é OK 28 if (request.status == 200 ) { 29 preencheComboCidade(); 30 } 31 } 32 } Incompatiblidade de browsers Função para tratar a resposta assíncrona Código a ser desenvolvido
  • 28. Implementação 41 function preencheComboCidade() { 46 //Faz a leitura do documento XML recebido 47 var response = request.responseXML; 48 var raiz = response.getElementsByTagName( &quot;cidades&quot; ).item( 0 ); 50 var cidades = raiz.getElementsByTagName( &quot;cidade&quot; ); 51 52 //Seleciona a caixa de selecao de cidades 53 var selectNode = document.getElementById( &quot;cidade&quot; ); 54 //Apaga as opções atuais da caixa de seleção 56 selectNode.options.length = 0 ; 57 58 //preenche a caixa de opções com os valores recebidos 59 for ( var i = 0 ; i < cidades.length; i++) { 60 var txtCidade = cidades.item(i).firstChild.data; 61 var option = new Option(txtCidade); 62 selectNode.add(option, null ); 63 } 66 } Recupera os dados vindos do servidor Id do elemento HTML (combo cidade) Adiciona os dados ao DOM
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34. Demo