SlideShare uma empresa Scribd logo
Aplicações Web com AJAX



             v. 2.1 - Setembro/2007

    © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Objetivo:




   Esta apresentação tem por objetivo apresentar a tecnologia
 AJAX, realizando uma breve explanação sobre os conceitos
 envolvidos em sua utilização.

    Como case, trataremos de um uso comum mas extremamente
 últil desta tecnologia: a interação entre elementos de formulário,
 mais precisamente entre uma caixa de seleção de estados e outra
 de cidades.




              © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Preparativos:
   Primeiramente criaremos um formulário HTML com duas
caixas de seleção: uma de estados e outra de cidades. Depois
criaremos um gatilho que irá disparar nossa função AJAX.
   Para isto utilizaremos o evento onChange da caixa de
seleção de estados:


 <select name='estados' onChange='buscaCidades();'>


   Que, por sua vez agirá sobre a caixa de seleção de cidades, que
originalmente terá apenas uma opção:


 <select name='cidades'>
   <option value='x' selected>Aguardando seleção de estado</option>
 </select>



                © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



1. O que é AJAX:


   A synchronous JavaScript A nd X ML
   ou “JavaScript Assíncrono e XML”. AJAX não é uma
   nova linguagem, mas apenas a utilização de duas
   características mais recentes da linguagem JavaScript:


     1) A possibilidade de trabalhar com requisições HTTP
     2) A habilidade de trabalhar com documentos XML



   combinadas com uma terceira que já é velha conhecida
   dos desenvolvedores: a manipulação direta do DOM HTML.




               © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Requisições HTTP
   São as requisições feitas para um servidor web.
   Um exemplo simples de uma requisição HTTP é quando você
está navegando em um website. Cada clique em um hiperlink
dispara uma requisição para o servidor:


     Usuário / Cliente                                  Provedor / Servidor




                                                          
                         Requisição HTTP




                                   
                                Retorno (HTML)


                 © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Documentos XML
  São documentos criados na linguagem de marcação XML, que
permite a descrição e armazenamento de informações.
   Vejamos um exemplo simplificado do arquivo XML que
   utilizaremos:

       <?xml version=”1.0” encoding=”iso-8859-1”?>
       <cidades>
         <cidade>
            <codigo>1</codigo>
            <nome>Porto Alegre</nome>
         </cidade>
         <cidade>
            <codigo>2</codigo>
            <nome>Canoas</nome>
         </cidade>
       </cidades>

             © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



2. Trabalhando com a requisição
  Quando trabalhamos com uma requisição HTTP devemos ter
em mente os seguintes passos:



    1 – Criação da requisição;
    2 – Definição de uma função que tratará
    a resposta desta requisição;
    3 – Abertura da requisição;
    4 – Definição do tipo de conteúdo da requisição;
    5 – Envio da requisição.




               © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Criando uma requisição HTTP
   Uma requisição HTTP é um objeto que é criado de acordo com
o navegador onde a aplicação irá rodar:




  http_request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;); // IE 6+
  http_request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); // IE 5.5-




  http_request = new XMLHttpRequest();



               © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Definindo a função de tratamento da resposta
   Neste passo definimos uma função que será responsável por
tratar a resposta de nossa requisição, ou seja, esta função será o
passo final de nossa aplicação.
   Para que esta função possa desempenhar seu papel dois fatores
precisam ser checados:

   1. O Estado da requisição (readyState): Uma requisição HTTP
   passa pelos seguintes estados:

      0   –   Não inicializada
      1   –   Carregando
      2   –   Carregada
      3   –   Processando
      4   –   Pronta

   2. O código de Status HTTP retornado pelo servidor (status):
   Caso este código seja 200 (HTTP OK) tudo correu bem. Qualquer
   outro código pode significar um erro retornado pelo servidor.


                    © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Definindo a função de tratamento da resposta (cont.)
  A definição da função é feita através do atributo
onreadystatechange do objeto da requisição. Veremos aqui
como definir uma função “on-the-fly”:



  http_request.onreadystatechange = function ()
                                    {
                                      if (http_request.readyState == 4) {
                                          if (http_request.status == 200) {
                                              // Código
                                          } else {
                                              alert (“O servidor retornou um erro.”);
                                          }
                                      }
                                    }




                  © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Abrindo a requisição
   A abertura da requisição é feita através do método open.
Este método aceita 3 parâmetros:

   1 – A forma de envio dos dados: GET ou POST
   2 – A URL do script server-side
   3 – Se esta requisição será assíncrona

   Vejamos o exemplo:




  http_request.open('GET', 'http://localhost/script.php?iduf=' +
  document.forms[0].estados.value, true);




                © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Definindo o tipo de conteúdo da requisição


   Utilizando o método setRequestHeader, definiremos o tipo
de conteúdo que está sendo enviado por nossa requisição.

   Como utilizaremos um formulário para enviá-la, precisamos
definir um tipo especial de conteúdo:




             http_request.setRequestHeader('Content-Type',
             'application/x-www-form-urlencoded');




                © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Enviando a requisição

   Para finalmente enviarmos a requisição usamos o método send.

  Como estamos trabalhando com o método de envio GET, não
enviaremos dados, mas apenas o valor especial null.

   Os dados, quando utilizamos este método, são enviados através
de um query string na própria URL, como vimos no métdo open.




             http_request.send(null);




                © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



3. Retornando XML


   Veremos agora como gerar um retorno em XML através de um
script server-side programado em PHP.

   Esta é a lógica que seguiremos:



  1 – Criamos uma variável que guardará o código XML
  2 – Testamos se o 'id' recebido é o que esperamos
  3 – Em caso positivo alimentamos nossa variável com mais XML
  4 – Definimos novamente um tipo de conteúdo, desta vez
  referente ao retorno de nosso script.
  5 – Damos saída direta no código XML, que será posteriormente
  capturado por nossa função de tratamento em JavaScript.




              © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Retornando XML (cont.)
   Aplicada em código, nossa lógica resultará no seguinte:
    <?php
    $retorno = '<?xml version=quot;1.0quot; encoding=quot;iso-8859-1quot;?>';
    $retorno .= '<cidades>';

    if ($_GET['iduf'] == 1) {
        $retorno .= <<<FIM
        <cidade>
           <codigo>1</codigo>
           <nome>Porto Alegre</nome>
        </cidade>
        <cidade>
           <codigo>2</codigo>
           <nome>Canoas</nome>
        </cidade>
    FIM;
    }

    $retorno .= '</cidades>';
    header('Content-type: application/xml; charset=iso-8859-1');
    echo $retorno;
    ?>


                  © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



4. O Grand Finale: JavaScript + XML + DOM
A primeira coisa que faremos é “zerar” a combobox de cidades, de
forma à evitar que ela seja repetidamente populada. Feito isto,
trataremos o XML retornado.

   Isto será feito acessando-se o atributo responseXML de nossa
requisição. Utilizando este atributo realizaremos uma manipulação
do DOM de forma à realizar quatro etapas:

   1 – Utilizando o método DOM getElementsByTagName iremos
capturar cada cidade presente no retorno XML.
   2 – Para cada uma destas cidades capturaremos os elementos
'codigo' e 'nome', utilizando o mesmo método DOM.
   3 – Através do método DOM createElement, criaremos
dinamicamente opções (options de formulário).
   4 – Adicionaremos, com o método add, estas opções
ao combobox de cidades.


               © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



O Grand Finale: JavaScript + XML + DOM (cont.)
   O código a seguir deve ser colocado no lugar indicado em nossa
função de tratamento de retorno:

       document.forms[0].cidades.options.length = 1;
       retorno = http_request.responseXML;
       cidades = retorno.getElementsByTagName('cidade');

       for (x = 0; x < cidades.length; x++) {
          codigo = cidades[x].getElementsByTagName('codigo');
          descricao = cidades[x].getElementsByTagName('nome');

           novaOp = document.createElement('option');

           novaOp.value = codigo[0].firstChild.nodeValue;
           novaOp.text = descricao[0].firstChild.nodeValue;

           document.forms[0].cidades.options.add(novaOp);
       }


                © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Como fica o código HTML / JavaScript Final:
  <html>
      <head>
          <script type=”text/javascript”>
               var http_request;

                function buscaCidades()
                {
                     http_request = new XMLHttpRequest();
                     http_request.onreadystatechange = function ()
                     {
                          if (http_request.readyState == 4) {
                                 if (http_request.status == 200) {
                                        document.forms[0].cidades.options.length = 1;
                                        retorno = http_request.responseXML;
                                        cidades = retorno.getElementsByTagName('cidade');
                                        for (x = 0; x < cidades.length; x++) {
                                           codigo = cidades[x].getElementsByTagName('codigo');
                                           descricao = cidades[x].getElementsByTagName('nome');

                                        novaOp = document.createElement('option');

                                        novaOp.value = codigo[0].firstChild.nodeValue;
                                        novaOp.text = descricao[0].firstChild.nodeValue;

                                        document.forms[0].cidades.options.add(novaOp);
                                    }

                      © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Como fica o código HTML / JavaScript Final (cont.)

                               } else {
                                     alert(“Possível erro na requisição”);
                               }
                          }
                     }

                       http_request.open('GET', 'http://localhost/script.php?iduf=' +
  document.forms[0].estados.value, true);
                       http_request.setRequestHeader('Content-Type',
  'application/x-www-form-urlencoded');
                       http_request.send(null);
                  }
             </script>
        </head>
        <body>
             <form>
                  Estado:
                  <select name='estados' onChange='buscaCidades();'>
                       <option value=”0”>Selecione:</option>
                       <option value=”1”>RS</option>
                  </select><br />
                  Cidade:
                  <select name=”cidades'>
                       <option value='x' selected>Aguardando seleção de estado</option>
                  </select>
             </form>
                     © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Como fica o código HTML / JavaScript Final (cont.)

       </body>
  </html>




                 © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Sobre o autor:

    Er Galvão Abbott trabalha há mais de dez anos com
programação de websites e sistemas corporativos com
interface web.

  Autodidata, teve seu primeiro contato com a linguagem HTML
em 1995, quando a internet estreava no Brasil.

   Além de lecionar em cursos, escrever artigos e ministrar
palestras, tem se dedicado ao desenvolvimento de aplicações
web, tendo nas linguagens PHP, Perl e JavaScript suas principais
paixões.

   É o fundador e líder do UG PHP RS, além de trabalhar como
consultor e desenvolvedor para uma empresa norte-americana
da área de segurança.



                 © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
Aplicações Web com AJAX



Contatos:


   Contatos com o autor:

   Web:
   http://www.galvao.eti.br
   http://blog.galvao.eti.br/
   http://www.phprs.com.br

   E-mail:
   galvao@galvao.eti.br

   IM:
   ergalvao@hotmail.com (MSN)
   er.galvao@gmail.com (GoogleTalk)




              © 2007 Er Galvão Abbott - http://www.galvao.eti.br/

Mais conteúdo relacionado

Mais procurados

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi Builder
Daniel Paz
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
Sedu
 
8159540 Tutorial De Ajax
8159540 Tutorial De Ajax8159540 Tutorial De Ajax
8159540 Tutorial De Ajax
infinitopublicidade
 
Melhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação WebMelhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação Web
Maurício Linhares
 
Desenvolva rapidamente utilizando o framework Desenvolva rapidamente utiliz...
Desenvolva rapidamente
utilizando o framework
Desenvolva rapidamente utiliz...Desenvolva rapidamente
utilizando o framework
Desenvolva rapidamente utiliz...
Desenvolva rapidamente utilizando o framework Desenvolva rapidamente utiliz...
Renato Shirakashi
 
Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVC
Zarathon Maia
 
Introdução a Big Data e Apache Solr
Introdução a Big Data e Apache SolrIntrodução a Big Data e Apache Solr
Introdução a Big Data e Apache Solr
Juliano Martins
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
Levy Carneiro Jr.
 
Minicurso VII Secomp e 3º Seel - Jataí - GO
Minicurso VII Secomp e 3º Seel - Jataí - GOMinicurso VII Secomp e 3º Seel - Jataí - GO
Minicurso VII Secomp e 3º Seel - Jataí - GO
Fernando Soares
 
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
Alexandre Antunes
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
Bruno Catão
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
iMasters
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
PHP RESTful Web Services
PHP RESTful Web ServicesPHP RESTful Web Services
PHP RESTful Web Services
Felipe Ribeiro
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Altair Borges
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
Altair Borges
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
Altair Borges
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 

Mais procurados (20)

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi Builder
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
8159540 Tutorial De Ajax
8159540 Tutorial De Ajax8159540 Tutorial De Ajax
8159540 Tutorial De Ajax
 
Melhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação WebMelhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação Web
 
Desenvolva rapidamente utilizando o framework Desenvolva rapidamente utiliz...
Desenvolva rapidamente
utilizando o framework
Desenvolva rapidamente utiliz...Desenvolva rapidamente
utilizando o framework
Desenvolva rapidamente utiliz...
Desenvolva rapidamente utilizando o framework Desenvolva rapidamente utiliz...
 
Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVC
 
Introdução a Big Data e Apache Solr
Introdução a Big Data e Apache SolrIntrodução a Big Data e Apache Solr
Introdução a Big Data e Apache Solr
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
 
Minicurso VII Secomp e 3º Seel - Jataí - GO
Minicurso VII Secomp e 3º Seel - Jataí - GOMinicurso VII Secomp e 3º Seel - Jataí - GO
Minicurso VII Secomp e 3º Seel - Jataí - GO
 
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
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
PHP RESTful Web Services
PHP RESTful Web ServicesPHP RESTful Web Services
PHP RESTful Web Services
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
Cobol Web com Net Express 3.1/4.0/5.x - Parte 1
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 

Semelhante a Aplicacoes Web Com AJAX

Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
Tchelinux
 
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
David Ruiz
 
Ajax
AjaxAjax
02 - Fundamentos de Servlets
02 - Fundamentos de Servlets02 - Fundamentos de Servlets
02 - Fundamentos de Servlets
Marcio Marinho
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
Clayton Silva
 
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
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
Glaucio Scheibel
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
Waelson Negreiros Nunes
 
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
infinitopublicidade
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
MoisesInacio
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
Igor Ferreira
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
Maurício Linhares
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)
Helder da Rocha
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
Adler Medrado
 
servlet-requisicoes
servlet-requisicoesservlet-requisicoes
servlet-requisicoes
Fábio Nogueira de Lucena
 
Daw slide 06
Daw slide 06Daw slide 06
Daw slide 06
Pedro Neto
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
elliando dias
 
jsp-intro
jsp-introjsp-intro
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
Eduardo Mendes
 
Arquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em JavaArquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em Java
Breno Vitorino
 

Semelhante a Aplicacoes Web Com AJAX (20)

Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
 
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
 
Ajax
AjaxAjax
Ajax
 
02 - Fundamentos de Servlets
02 - Fundamentos de Servlets02 - Fundamentos de Servlets
02 - Fundamentos de Servlets
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
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!!
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
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
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
servlet-requisicoes
servlet-requisicoesservlet-requisicoes
servlet-requisicoes
 
Daw slide 06
Daw slide 06Daw slide 06
Daw slide 06
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
jsp-intro
jsp-introjsp-intro
jsp-intro
 
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
 
Arquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em JavaArquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em Java
 

Mais de Er Galvão Abbott

Segurança PHP em 2016
Segurança PHP em 2016Segurança PHP em 2016
Segurança PHP em 2016
Er Galvão Abbott
 
Tudo o que você precisa saber sobre o php7
Tudo o que você precisa saber sobre o php7Tudo o que você precisa saber sobre o php7
Tudo o que você precisa saber sobre o php7
Er Galvão Abbott
 
DRYing the Skeleton: Reducing code repetition in ZF2
DRYing the Skeleton: Reducing code repetition in ZF2DRYing the Skeleton: Reducing code repetition in ZF2
DRYing the Skeleton: Reducing code repetition in ZF2
Er Galvão Abbott
 
Php7 esta chgando! O que você precisa saber
Php7 esta chgando! O que você precisa saberPhp7 esta chgando! O que você precisa saber
Php7 esta chgando! O que você precisa saber
Er Galvão Abbott
 
PHP e Open Source
PHP e Open SourcePHP e Open Source
PHP e Open Source
Er Galvão Abbott
 
ABRAPHP: Conquistas e Realizações - 2012-2014
ABRAPHP: Conquistas e Realizações - 2012-2014ABRAPHP: Conquistas e Realizações - 2012-2014
ABRAPHP: Conquistas e Realizações - 2012-2014
Er Galvão Abbott
 
Implementing security routines with zf2
Implementing security routines with zf2Implementing security routines with zf2
Implementing security routines with zf2
Er Galvão Abbott
 
Desenvolvendo aplicações com ZF2
Desenvolvendo aplicações com ZF2Desenvolvendo aplicações com ZF2
Desenvolvendo aplicações com ZF2
Er Galvão Abbott
 
Apresentacao frameworks
Apresentacao frameworksApresentacao frameworks
Apresentacao frameworks
Er Galvão Abbott
 
Web: funcionamento, evolução e mercado
Web: funcionamento, evolução e mercadoWeb: funcionamento, evolução e mercado
Web: funcionamento, evolução e mercado
Er Galvão Abbott
 
Otimizando a execução de código-fonte PHP
Otimizando a execução de código-fonte PHPOtimizando a execução de código-fonte PHP
Otimizando a execução de código-fonte PHP
Er Galvão Abbott
 
Unbreakeable php
Unbreakeable phpUnbreakeable php
Unbreakeable php
Er Galvão Abbott
 
PHP: Evolução
PHP: EvoluçãoPHP: Evolução
PHP: Evolução
Er Galvão Abbott
 
ZF2 Menor, melhor e mais poderoso
ZF2 Menor, melhor e mais poderosoZF2 Menor, melhor e mais poderoso
ZF2 Menor, melhor e mais poderoso
Er Galvão Abbott
 
Implementando rotinas de geolocalização
Implementando rotinas de geolocalizaçãoImplementando rotinas de geolocalização
Implementando rotinas de geolocalização
Er Galvão Abbott
 
OSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com issoOSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com isso
Er Galvão Abbott
 
OWASP: O que, Por que e Como
OWASP: O que, Por que e ComoOWASP: O que, Por que e Como
OWASP: O que, Por que e Como
Er Galvão Abbott
 
Além da autenticação: Permissões de acesso com Zend Framework
Além da autenticação: Permissões de acesso com Zend FrameworkAlém da autenticação: Permissões de acesso com Zend Framework
Além da autenticação: Permissões de acesso com Zend Framework
Er Galvão Abbott
 
Proposta de Boas Práticas e Padrões de Desenvolvimento Web
Proposta de Boas Práticas e Padrões de Desenvolvimento WebProposta de Boas Práticas e Padrões de Desenvolvimento Web
Proposta de Boas Práticas e Padrões de Desenvolvimento Web
Er Galvão Abbott
 
PHPBR TestFest
PHPBR TestFestPHPBR TestFest
PHPBR TestFest
Er Galvão Abbott
 

Mais de Er Galvão Abbott (20)

Segurança PHP em 2016
Segurança PHP em 2016Segurança PHP em 2016
Segurança PHP em 2016
 
Tudo o que você precisa saber sobre o php7
Tudo o que você precisa saber sobre o php7Tudo o que você precisa saber sobre o php7
Tudo o que você precisa saber sobre o php7
 
DRYing the Skeleton: Reducing code repetition in ZF2
DRYing the Skeleton: Reducing code repetition in ZF2DRYing the Skeleton: Reducing code repetition in ZF2
DRYing the Skeleton: Reducing code repetition in ZF2
 
Php7 esta chgando! O que você precisa saber
Php7 esta chgando! O que você precisa saberPhp7 esta chgando! O que você precisa saber
Php7 esta chgando! O que você precisa saber
 
PHP e Open Source
PHP e Open SourcePHP e Open Source
PHP e Open Source
 
ABRAPHP: Conquistas e Realizações - 2012-2014
ABRAPHP: Conquistas e Realizações - 2012-2014ABRAPHP: Conquistas e Realizações - 2012-2014
ABRAPHP: Conquistas e Realizações - 2012-2014
 
Implementing security routines with zf2
Implementing security routines with zf2Implementing security routines with zf2
Implementing security routines with zf2
 
Desenvolvendo aplicações com ZF2
Desenvolvendo aplicações com ZF2Desenvolvendo aplicações com ZF2
Desenvolvendo aplicações com ZF2
 
Apresentacao frameworks
Apresentacao frameworksApresentacao frameworks
Apresentacao frameworks
 
Web: funcionamento, evolução e mercado
Web: funcionamento, evolução e mercadoWeb: funcionamento, evolução e mercado
Web: funcionamento, evolução e mercado
 
Otimizando a execução de código-fonte PHP
Otimizando a execução de código-fonte PHPOtimizando a execução de código-fonte PHP
Otimizando a execução de código-fonte PHP
 
Unbreakeable php
Unbreakeable phpUnbreakeable php
Unbreakeable php
 
PHP: Evolução
PHP: EvoluçãoPHP: Evolução
PHP: Evolução
 
ZF2 Menor, melhor e mais poderoso
ZF2 Menor, melhor e mais poderosoZF2 Menor, melhor e mais poderoso
ZF2 Menor, melhor e mais poderoso
 
Implementando rotinas de geolocalização
Implementando rotinas de geolocalizaçãoImplementando rotinas de geolocalização
Implementando rotinas de geolocalização
 
OSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com issoOSS, Comunidade, Eventos e como sua empresa ganha com isso
OSS, Comunidade, Eventos e como sua empresa ganha com isso
 
OWASP: O que, Por que e Como
OWASP: O que, Por que e ComoOWASP: O que, Por que e Como
OWASP: O que, Por que e Como
 
Além da autenticação: Permissões de acesso com Zend Framework
Além da autenticação: Permissões de acesso com Zend FrameworkAlém da autenticação: Permissões de acesso com Zend Framework
Além da autenticação: Permissões de acesso com Zend Framework
 
Proposta de Boas Práticas e Padrões de Desenvolvimento Web
Proposta de Boas Práticas e Padrões de Desenvolvimento WebProposta de Boas Práticas e Padrões de Desenvolvimento Web
Proposta de Boas Práticas e Padrões de Desenvolvimento Web
 
PHPBR TestFest
PHPBR TestFestPHPBR TestFest
PHPBR TestFest
 

Último

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 

Último (6)

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 

Aplicacoes Web Com AJAX

  • 1. Aplicações Web com AJAX v. 2.1 - Setembro/2007 © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 2. Aplicações Web com AJAX Objetivo: Esta apresentação tem por objetivo apresentar a tecnologia AJAX, realizando uma breve explanação sobre os conceitos envolvidos em sua utilização. Como case, trataremos de um uso comum mas extremamente últil desta tecnologia: a interação entre elementos de formulário, mais precisamente entre uma caixa de seleção de estados e outra de cidades. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 3. Aplicações Web com AJAX Preparativos: Primeiramente criaremos um formulário HTML com duas caixas de seleção: uma de estados e outra de cidades. Depois criaremos um gatilho que irá disparar nossa função AJAX. Para isto utilizaremos o evento onChange da caixa de seleção de estados: <select name='estados' onChange='buscaCidades();'> Que, por sua vez agirá sobre a caixa de seleção de cidades, que originalmente terá apenas uma opção: <select name='cidades'> <option value='x' selected>Aguardando seleção de estado</option> </select> © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 4. Aplicações Web com AJAX 1. O que é AJAX: A synchronous JavaScript A nd X ML ou “JavaScript Assíncrono e XML”. AJAX não é uma nova linguagem, mas apenas a utilização de duas características mais recentes da linguagem JavaScript: 1) A possibilidade de trabalhar com requisições HTTP 2) A habilidade de trabalhar com documentos XML combinadas com uma terceira que já é velha conhecida dos desenvolvedores: a manipulação direta do DOM HTML. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 5. Aplicações Web com AJAX Requisições HTTP São as requisições feitas para um servidor web. Um exemplo simples de uma requisição HTTP é quando você está navegando em um website. Cada clique em um hiperlink dispara uma requisição para o servidor: Usuário / Cliente Provedor / Servidor   Requisição HTTP  Retorno (HTML) © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 6. Aplicações Web com AJAX Documentos XML São documentos criados na linguagem de marcação XML, que permite a descrição e armazenamento de informações. Vejamos um exemplo simplificado do arquivo XML que utilizaremos: <?xml version=”1.0” encoding=”iso-8859-1”?> <cidades> <cidade> <codigo>1</codigo> <nome>Porto Alegre</nome> </cidade> <cidade> <codigo>2</codigo> <nome>Canoas</nome> </cidade> </cidades> © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 7. Aplicações Web com AJAX 2. Trabalhando com a requisição Quando trabalhamos com uma requisição HTTP devemos ter em mente os seguintes passos: 1 – Criação da requisição; 2 – Definição de uma função que tratará a resposta desta requisição; 3 – Abertura da requisição; 4 – Definição do tipo de conteúdo da requisição; 5 – Envio da requisição. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 8. Aplicações Web com AJAX Criando uma requisição HTTP Uma requisição HTTP é um objeto que é criado de acordo com o navegador onde a aplicação irá rodar: http_request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;); // IE 6+ http_request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); // IE 5.5- http_request = new XMLHttpRequest(); © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 9. Aplicações Web com AJAX Definindo a função de tratamento da resposta Neste passo definimos uma função que será responsável por tratar a resposta de nossa requisição, ou seja, esta função será o passo final de nossa aplicação. Para que esta função possa desempenhar seu papel dois fatores precisam ser checados: 1. O Estado da requisição (readyState): Uma requisição HTTP passa pelos seguintes estados: 0 – Não inicializada 1 – Carregando 2 – Carregada 3 – Processando 4 – Pronta 2. O código de Status HTTP retornado pelo servidor (status): Caso este código seja 200 (HTTP OK) tudo correu bem. Qualquer outro código pode significar um erro retornado pelo servidor. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 10. Aplicações Web com AJAX Definindo a função de tratamento da resposta (cont.) A definição da função é feita através do atributo onreadystatechange do objeto da requisição. Veremos aqui como definir uma função “on-the-fly”: http_request.onreadystatechange = function () { if (http_request.readyState == 4) { if (http_request.status == 200) { // Código } else { alert (“O servidor retornou um erro.”); } } } © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 11. Aplicações Web com AJAX Abrindo a requisição A abertura da requisição é feita através do método open. Este método aceita 3 parâmetros: 1 – A forma de envio dos dados: GET ou POST 2 – A URL do script server-side 3 – Se esta requisição será assíncrona Vejamos o exemplo: http_request.open('GET', 'http://localhost/script.php?iduf=' + document.forms[0].estados.value, true); © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 12. Aplicações Web com AJAX Definindo o tipo de conteúdo da requisição Utilizando o método setRequestHeader, definiremos o tipo de conteúdo que está sendo enviado por nossa requisição. Como utilizaremos um formulário para enviá-la, precisamos definir um tipo especial de conteúdo: http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 13. Aplicações Web com AJAX Enviando a requisição Para finalmente enviarmos a requisição usamos o método send. Como estamos trabalhando com o método de envio GET, não enviaremos dados, mas apenas o valor especial null. Os dados, quando utilizamos este método, são enviados através de um query string na própria URL, como vimos no métdo open. http_request.send(null); © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 14. Aplicações Web com AJAX 3. Retornando XML Veremos agora como gerar um retorno em XML através de um script server-side programado em PHP. Esta é a lógica que seguiremos: 1 – Criamos uma variável que guardará o código XML 2 – Testamos se o 'id' recebido é o que esperamos 3 – Em caso positivo alimentamos nossa variável com mais XML 4 – Definimos novamente um tipo de conteúdo, desta vez referente ao retorno de nosso script. 5 – Damos saída direta no código XML, que será posteriormente capturado por nossa função de tratamento em JavaScript. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 15. Aplicações Web com AJAX Retornando XML (cont.) Aplicada em código, nossa lógica resultará no seguinte: <?php $retorno = '<?xml version=quot;1.0quot; encoding=quot;iso-8859-1quot;?>'; $retorno .= '<cidades>'; if ($_GET['iduf'] == 1) { $retorno .= <<<FIM <cidade> <codigo>1</codigo> <nome>Porto Alegre</nome> </cidade> <cidade> <codigo>2</codigo> <nome>Canoas</nome> </cidade> FIM; } $retorno .= '</cidades>'; header('Content-type: application/xml; charset=iso-8859-1'); echo $retorno; ?> © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 16. Aplicações Web com AJAX 4. O Grand Finale: JavaScript + XML + DOM A primeira coisa que faremos é “zerar” a combobox de cidades, de forma à evitar que ela seja repetidamente populada. Feito isto, trataremos o XML retornado. Isto será feito acessando-se o atributo responseXML de nossa requisição. Utilizando este atributo realizaremos uma manipulação do DOM de forma à realizar quatro etapas: 1 – Utilizando o método DOM getElementsByTagName iremos capturar cada cidade presente no retorno XML. 2 – Para cada uma destas cidades capturaremos os elementos 'codigo' e 'nome', utilizando o mesmo método DOM. 3 – Através do método DOM createElement, criaremos dinamicamente opções (options de formulário). 4 – Adicionaremos, com o método add, estas opções ao combobox de cidades. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 17. Aplicações Web com AJAX O Grand Finale: JavaScript + XML + DOM (cont.) O código a seguir deve ser colocado no lugar indicado em nossa função de tratamento de retorno: document.forms[0].cidades.options.length = 1; retorno = http_request.responseXML; cidades = retorno.getElementsByTagName('cidade'); for (x = 0; x < cidades.length; x++) { codigo = cidades[x].getElementsByTagName('codigo'); descricao = cidades[x].getElementsByTagName('nome'); novaOp = document.createElement('option'); novaOp.value = codigo[0].firstChild.nodeValue; novaOp.text = descricao[0].firstChild.nodeValue; document.forms[0].cidades.options.add(novaOp); } © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 18. Aplicações Web com AJAX Como fica o código HTML / JavaScript Final: <html> <head> <script type=”text/javascript”> var http_request; function buscaCidades() { http_request = new XMLHttpRequest(); http_request.onreadystatechange = function () { if (http_request.readyState == 4) { if (http_request.status == 200) { document.forms[0].cidades.options.length = 1; retorno = http_request.responseXML; cidades = retorno.getElementsByTagName('cidade'); for (x = 0; x < cidades.length; x++) { codigo = cidades[x].getElementsByTagName('codigo'); descricao = cidades[x].getElementsByTagName('nome'); novaOp = document.createElement('option'); novaOp.value = codigo[0].firstChild.nodeValue; novaOp.text = descricao[0].firstChild.nodeValue; document.forms[0].cidades.options.add(novaOp); } © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 19. Aplicações Web com AJAX Como fica o código HTML / JavaScript Final (cont.) } else { alert(“Possível erro na requisição”); } } } http_request.open('GET', 'http://localhost/script.php?iduf=' + document.forms[0].estados.value, true); http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http_request.send(null); } </script> </head> <body> <form> Estado: <select name='estados' onChange='buscaCidades();'> <option value=”0”>Selecione:</option> <option value=”1”>RS</option> </select><br /> Cidade: <select name=”cidades'> <option value='x' selected>Aguardando seleção de estado</option> </select> </form> © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 20. Aplicações Web com AJAX Como fica o código HTML / JavaScript Final (cont.) </body> </html> © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 21. Aplicações Web com AJAX Sobre o autor: Er Galvão Abbott trabalha há mais de dez anos com programação de websites e sistemas corporativos com interface web. Autodidata, teve seu primeiro contato com a linguagem HTML em 1995, quando a internet estreava no Brasil. Além de lecionar em cursos, escrever artigos e ministrar palestras, tem se dedicado ao desenvolvimento de aplicações web, tendo nas linguagens PHP, Perl e JavaScript suas principais paixões. É o fundador e líder do UG PHP RS, além de trabalhar como consultor e desenvolvedor para uma empresa norte-americana da área de segurança. © 2007 Er Galvão Abbott - http://www.galvao.eti.br/
  • 22. Aplicações Web com AJAX Contatos: Contatos com o autor: Web: http://www.galvao.eti.br http://blog.galvao.eti.br/ http://www.phprs.com.br E-mail: galvao@galvao.eti.br IM: ergalvao@hotmail.com (MSN) er.galvao@gmail.com (GoogleTalk) © 2007 Er Galvão Abbott - http://www.galvao.eti.br/