SlideShare uma empresa Scribd logo

AJAX?? Não!! Asynchronous Javascript and... JSON!!

Este documento apresenta as tecnologias AJAX e JSON para desenvolvimento de aplicações web interativas. Explica que AJAX permite atualizar partes de uma página ao invés de recarregá-la completamente para melhorar a experiência do usuário. Também descreve o que é JSON, como representa dados e como pode ser usado em JavaScript e PHP para troca de informações entre cliente e servidor. Por fim, demonstra exemplos práticos de uso dessas tecnologias em uma aplicação de ouvidoria.

1 de 23
AJAX? Não!!
Asynchronous Javascript and...
       JSON! AJAJ!!

           Lucas Brasilino
      <lucas.brasilino@gmail.com>
  Procuradoria Geral da República - MPF
Agenda
●
    Tipos de aplicações;
●
    O que AJAX ?;
●
    Método de transporte AJAX;
●
    Aprenda AJAX em 24 segundos;
●
    Exemplo de aplicação tradicional;
●
    O que JSON ?;
●
    Uso do JSON em Javascript e PHP;
●
    Exemplo prático.
Tipos de aplicações
●
    Aplicações Desktop:
    –   Instalado e executado em seu computador
         ●
             Eventualmente pode acessar algum site para efetuar
             alguma atualização de código/base de dados/etc.
    –   Ótimo layout: geralmente utilizando componentes
        (widgets) do sistema operacional.
    –   Ótima interatividade: pode-se digitar dados, utilizar
        menus, atualizar campos, etc, praticamente sem
        nenhum tempo de espera.
Tipos de aplicações
●
    Aplicações Web:
    –   Código sendo executado no servidor Web
         ●
             Excluíndo-se pequenas rotinas que são executadas no
             navegador.
    –   Layout definido pelos webmasters
    –   Média interatividade
         ●
             Baseada em links e submissão de formulários;
         ●
             Alto tempo de espera do resultado destas interações;
         ●
             A cada interação, o servidor envia todo o conteúdo da
             nova página.
O que é AJAX ?
●
    Seu objetivo principal é melhorar a interatividade da
    aplicação Web, aproximando-a da aplicação Desktop;
●
    Aplicação Web com AJAX não depende da resposta
    do servidor Web a uma dada requisição, nem as
    requisições dependem da interação (evento) do
    usuário;
●
    Desta forma permite atualizar partes da página Web
    ao invés de recarregá-la novamente, diminuindo o
    tempo de espera do usuário e aumentando a
    interatividade.
O que é AJAX ?
●
    É o uso de uma coletânea de tecnologias:
    –   Muito conhecidas:
         ●
             HTML/XHTML;
         ●
             Javascript;
         ●
             DOM – Document Object Model;
         ●
             XML;
         ●
             HTTP.
    –   Pouco conhecida:
         ●
             Objeto XMLHttpRequest.

Recomendados

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 / 3David Ruiz
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAXRafael Dohms
 
Javascript aplicado
Javascript aplicadoJavascript aplicado
Javascript aplicadoNuno Simaria
 
Introdução ao JavaScript e DOM
Introdução ao JavaScript e DOMIntrodução ao JavaScript e DOM
Introdução ao JavaScript e DOMRomualdo Andre
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stackSidney Roberto
 

Mais conteúdo relacionado

Mais procurados

Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB IILuiz Duarte
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)Carlos Santos
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSRomulo Fagundes
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaHenrique Gogó
 
Introdução JavaScript e DOM
Introdução JavaScript e DOMIntrodução JavaScript e DOM
Introdução JavaScript e DOMRomualdo Andre
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDBLuiz Duarte
 
Hash md5 php
Hash md5 phpHash md5 php
Hash md5 phpjcis_udo
 
Minicurso javascript
Minicurso javascriptMinicurso javascript
Minicurso javascriptLucas Aquiles
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)kidh0
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasGuilherme
 
Servlet jsp tomcat 8
Servlet jsp tomcat 8Servlet jsp tomcat 8
Servlet jsp tomcat 8maxrosan
 
Javascript - Agora a coisa ficou séria.
Javascript - Agora a coisa ficou séria.Javascript - Agora a coisa ficou séria.
Javascript - Agora a coisa ficou séria.Luiz Henrique Estacio
 
Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011Henrique Gogó
 

Mais procurados (19)

Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB II
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
GET /conceitos HTTP/1.1
GET /conceitos HTTP/1.1GET /conceitos HTTP/1.1
GET /conceitos HTTP/1.1
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha Camarada
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
Introdução JavaScript e DOM
Introdução JavaScript e DOMIntrodução JavaScript e DOM
Introdução JavaScript e DOM
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDB
 
Hash md5 php
Hash md5 phpHash md5 php
Hash md5 php
 
Conhecendo mundo Node.js
Conhecendo mundo Node.jsConhecendo mundo Node.js
Conhecendo mundo Node.js
 
Minicurso javascript
Minicurso javascriptMinicurso javascript
Minicurso javascript
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
 
JavaScript Hacks
JavaScript HacksJavaScript Hacks
JavaScript Hacks
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 
Servlet jsp tomcat 8
Servlet jsp tomcat 8Servlet jsp tomcat 8
Servlet jsp tomcat 8
 
Javascript - Agora a coisa ficou séria.
Javascript - Agora a coisa ficou séria.Javascript - Agora a coisa ficou séria.
Javascript - Agora a coisa ficou séria.
 
Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011
 

Destaque

Minicurso JSON & Ajax
Minicurso JSON & AjaxMinicurso JSON & Ajax
Minicurso JSON & AjaxWilker Iceri
 
Minicurso Javascript
Minicurso JavascriptMinicurso Javascript
Minicurso JavascriptWilker Iceri
 
Rails 3 Beginner to Builder 2011 Week 1
Rails 3 Beginner to Builder 2011 Week 1Rails 3 Beginner to Builder 2011 Week 1
Rails 3 Beginner to Builder 2011 Week 1Richard Schneeman
 
Rails 3 Beginner to Builder 2011 Week 6
Rails 3 Beginner to Builder 2011 Week 6Rails 3 Beginner to Builder 2011 Week 6
Rails 3 Beginner to Builder 2011 Week 6Richard Schneeman
 
Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Richard Schneeman
 
Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Richard Schneeman
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentationadamcookeuk
 

Destaque (8)

Minicurso JSON & Ajax
Minicurso JSON & AjaxMinicurso JSON & Ajax
Minicurso JSON & Ajax
 
Minicurso Javascript
Minicurso JavascriptMinicurso Javascript
Minicurso Javascript
 
Rails 3 Beginner to Builder 2011 Week 1
Rails 3 Beginner to Builder 2011 Week 1Rails 3 Beginner to Builder 2011 Week 1
Rails 3 Beginner to Builder 2011 Week 1
 
Rails 3 Beginner to Builder 2011 Week 6
Rails 3 Beginner to Builder 2011 Week 6Rails 3 Beginner to Builder 2011 Week 6
Rails 3 Beginner to Builder 2011 Week 6
 
Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3
 
Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2
 
Ruby on Rails for beginners
Ruby on Rails for beginnersRuby on Rails for beginners
Ruby on Rails for beginners
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 

Semelhante a AJAX?? Não!! Asynchronous Javascript and... JSON!!

Semelhante a AJAX?? Não!! Asynchronous Javascript and... JSON!! (20)

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
 
8159540 Tutorial De Ajax
8159540 Tutorial De Ajax8159540 Tutorial De Ajax
8159540 Tutorial De 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
 
Consumindo dados via web service no android
Consumindo dados via web service no androidConsumindo dados via web service no android
Consumindo dados via web service no android
 
Ajax
AjaxAjax
Ajax
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007Apostilava Java EE 5 - 2007
Apostilava Java EE 5 - 2007
 
Ajax
AjaxAjax
Ajax
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 
Introdução à Servlets e JSP
Introdução à Servlets e JSPIntrodução à Servlets e JSP
Introdução à Servlets e JSP
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
JavaEE
JavaEEJavaEE
JavaEE
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Aplicacoes Web Com AJAX
Aplicacoes Web Com AJAXAplicacoes Web Com AJAX
Aplicacoes Web Com AJAX
 
Java Script
Java ScriptJava Script
Java Script
 
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
 
XML Free Programming - Brazil
XML Free Programming - BrazilXML Free Programming - Brazil
XML Free Programming - Brazil
 

Último

MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docxATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx2m Assessoria
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxjosecarlos413721
 
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docx
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docxMAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docx
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docxjosecarlos413721
 
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxMAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxjosecarlos413721
 
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docxMAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx2m Assessoria
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx2m Assessoria
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx2m Assessoria
 
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docx
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docxMAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docx
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docxjosecarlos413721
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxjosecarlos413721
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareAleatório .
 
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxjosecarlos413721
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx2m Assessoria
 

Último (20)

MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docxATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
 
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docx
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docxMAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docx
MAPA - RH - PLANEJAMENTO DE RECURSOS HUMANOS - 51-2024.docx
 
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxMAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
MAPA - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
 
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docxMAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx
 
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docx
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docxMAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docx
MAPA - FÍSICA GERAL E EXPERIMENTAL I - 512024.docx
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de software
 
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
 

AJAX?? Não!! Asynchronous Javascript and... JSON!!

  • 1. AJAX? Não!! Asynchronous Javascript and... JSON! AJAJ!! Lucas Brasilino <lucas.brasilino@gmail.com> Procuradoria Geral da República - MPF
  • 2. Agenda ● Tipos de aplicações; ● O que AJAX ?; ● Método de transporte AJAX; ● Aprenda AJAX em 24 segundos; ● Exemplo de aplicação tradicional; ● O que JSON ?; ● Uso do JSON em Javascript e PHP; ● Exemplo prático.
  • 3. Tipos de aplicações ● Aplicações Desktop: – Instalado e executado em seu computador ● Eventualmente pode acessar algum site para efetuar alguma atualização de código/base de dados/etc. – Ótimo layout: geralmente utilizando componentes (widgets) do sistema operacional. – Ótima interatividade: pode-se digitar dados, utilizar menus, atualizar campos, etc, praticamente sem nenhum tempo de espera.
  • 4. Tipos de aplicações ● Aplicações Web: – Código sendo executado no servidor Web ● Excluíndo-se pequenas rotinas que são executadas no navegador. – Layout definido pelos webmasters – Média interatividade ● Baseada em links e submissão de formulários; ● Alto tempo de espera do resultado destas interações; ● A cada interação, o servidor envia todo o conteúdo da nova página.
  • 5. O que é AJAX ? ● Seu objetivo principal é melhorar a interatividade da aplicação Web, aproximando-a da aplicação Desktop; ● Aplicação Web com AJAX não depende da resposta do servidor Web a uma dada requisição, nem as requisições dependem da interação (evento) do usuário; ● Desta forma permite atualizar partes da página Web ao invés de recarregá-la novamente, diminuindo o tempo de espera do usuário e aumentando a interatividade.
  • 6. O que é AJAX ? ● É o uso de uma coletânea de tecnologias: – Muito conhecidas: ● HTML/XHTML; ● Javascript; ● DOM – Document Object Model; ● XML; ● HTTP. – Pouco conhecida: ● Objeto XMLHttpRequest.
  • 7. Modo de transporte de dados entre servidor e cliente web ● Geralmente utiliza-se XML navegador servidor XML
  • 8. Aprenda AJAX em 24 segundos var oHTTPReq = new XMLHttpRequest(); oHTTPReq.open('GET','consulta.php',true); oHTTPReq.onreadystatechange = trataResposta; oHTTPReq.send(null);
  • 9. Aprenda AJAX em 24 segundos function trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var oXMLResp = oHTTPReq.responseXML; atualizaPagina (oXMLResp); } }
  • 10. Exemplo de aplicação Ouvidoria oXMLResp: <funcionario> <nome>João José da Silva</nome> <endereco>Av.Conde da Boa Vista,1024</endereco> <cep>50070-060</cep> </funcionario>
  • 11. Exemplo de aplicação function atualizaPagina (oXML) { oTags = oXML.getElementsByTagName(“funcionario”); sNome = oTags[0].firstChild.nodeValue; sEnd = oTags[1].firstChild.nodeValue; sCep = oTags[2].firstChild.nodeValue; //utiliza as variáveis acima para atualizar a //página Web. }
  • 12. O que é JSON ? ● Javascript Object Notation – Um formato leve de troca de informações; – Inerente ao Javascript; – Pode ser utilizado em outras linguagens utilizando- se API's específicas; – Representação de objetos e arrays, bem como tipos simples, de forma serializada; – Fácil para humano ler e para máquina analisar.
  • 13. O que é JSON ? ● Array: [ “valor1”, “valor2”, ... ] – Exemplo: oFruta = new Array('laranja','pera','maçã'); – Resultado: [“laranja”,”pera”,”maçã”]
  • 14. O que é JSON ? ● Objeto: { “atributo1”:“valor1”, “atributo2”:“valor2”, ... } – Exemplo: oFuncionario = new Object(); oFuncionario.nome = “Jose”; oFuncionario.endereco = “Av. Conde”; – Resultado: { “nome”:”Jose”,”endereco”:”Av. Conde” }
  • 15. Uso do JSON em Javascript ● Utilizando a função 'eval()' – Transforma dados serializados em objetos/array/tipos primitivos. – Não deve ser utilizado pois é vulnerável a algumas injeções de código.
  • 16. Uso do JSON em Javascript ● Utilizando os métodos parseJSON() e toJSONString() – Disponível em: http://www.json.org/json.js – string.parseJSON(); ● Analisa a string JSON e retorna objeto. – object.toJSONString(); ● Analisa o objeto e retorna a string JSON. LEMBRETE! Tipos array, boolean, date, number e  string também são objetos em Javascript
  • 17. Novo exemplo Ouvidoria function trataResposta() { if (oHTTPReq.readyState == 4) if (oHTTPReq.status == 200) { var sJSONResp = oHTTPReq.responseText; atualizaPagina (sJSONResp); } }
  • 18. Novo exemplo Ouvidoria sJSONResp: {"nome":"João José da Silva", "endereco":"Av. Conde da Boa Vista 1204", "cep":"50070-060"}
  • 19. Exemplo de aplicação function atualizaPagina (sJSON) { oFuncionario = sJSON.parseJSON(); //utiliza oFuncionario.nome, oFuncionario.endereco, //e oFuncionario.cep para atualizar a //página Web. }
  • 20. Uso do JSON em PHP ● Extensão php-json – http://www.aurore.net/projects/php-json/ – Integrado ao PHP 5.2 e habilitado por default ● Exemplos: $frutas = array(“laranja”,”pera”,”maçã”); $str_frutas = json_encode($frutas); $funcionario = json_decode($str_funcionario);
  • 22. Para finalizar! Não existe AJAJ!! Mesmo que você não utilize XML, apenas o fato de se utilizar o objeto XMLHttpRequest  você está desenvolvendo aplicações AJAX!!
  • 23. Dúvidas?? Obrigado!! Lucas Brasilino <lucas.brasilino@gmail.com>