DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

Este material pertence a Carlos A. Majer, Professor Universitrio de Tecnologia da Informao da Universidade Cidade de So Paulo UNICID

Licena de Uso Este trabalho est licenciado sob uma Licena Creative Commons Atribuio-Permitida a Criao de Obras Derivadas 2.5 Brasil. Para ver uma cpia desta licena, visite http://creativecommons.org/licenses/bynd/2.5/br/ ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. Isto significa que voc poder copiar, distribuir, exibir e realizar trabalhos derivados desta obra com as seguintes restries:-

Voc dever sempre fazer referncia ao autor (Ou seja, Eu) Voc no poder utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar outras pessoas ou instituies.
Para maiores informaes envie um e-mail para cmajer@uol.com.br ou cmajer@ig.com.br.
Caso acredite que este material tenha lhe ajudado, envie um e-mail de agradecimento. Isto o suficiente para motivar-me a continuar desenvolvendo este tipo de material e disponibiliz-lo para o pblico. Caso note algum erro ou tenha alguma sugesto, sinta-se vontade para me contatar.

AJAX

Asynchronous Javascript and XML

Introduo
Num primeiro momento, algum pode pensar que AJAX nada mais do que uma sopa de letrinhas de tecnologia utilizada na Internet. Apesar de ser baseada no uso de uma tecnologia existente (Javascript e XML) a forma pela qual esta tecnologia utilizada mudou a maneira pela qual os desenvolvedores efetuam seu trabalho na Internet. Um dos grandes problemas do HTML o fato de que ao precisarmos de alguma informao (muitas vezes em funo de uma interao com o usurio) esta informao s pode ser recuperada atravs da chamada outra pgina. Isto faz com que o processo seja lento e tedioso. Em geral toda pgina tem que ser completamente carregada no navegador, mesmo que queiramos apenas saber se um ID de usurio vlido (existe). Para se chegar ao destino (na pgina), diversos caminhos podero ser percorridos na Internet. Alm disto, no iremos receber apenas a informao desejada (o ID do cliente), mas toda a informao que compe a pgina HTML destino. Utilizada inicialmente pela Microsoft e adotada posteriormente pelos demais navegadores, o AJAX uma forma de uso de Javascript e XML que permite a criao de um objeto que consegue acessar uma determinada pgina e receber o retorno de informao (desta pgina). Esta informao recebida pode ser tratada dentro do cdigo permitindo ao desenvolvedor uma forma inovadora na criao de sua interface de forma a enriquecer e agilizar a experincia do usurio dentro do sistema. Uma das caractersticas deste objeto que o mesmo pode comportar-se de uma forma assncrona em relao pgina HTML, isto , enquanto a pgina continua a ser carregada (e mesmo que ela j tenha sido

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 1

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

totalmente carregada) o objeto continua funcionando em paralelo, correspondendo-se com a pgina destino se at receber a informao desejada (ou algum erro ocorrer).

Javascript
O Javascript a nossa velha linguagem de script para navegadores. dentro dele que criamos nosso objeto AJAX.

XML (Extensible Markup Language)

A Linguagem de Marcas Extensvel tal como o HTML baseada no padro SGML (Standard Generalized Markup Language) e foi criada para facilitar a troca de dados. O AJAX por padro transfere os dados de um local para outro usando XML. Apesar disto tambm conseguimos acessar as informaes recebidas em conseguimos formato texto.

Funcionamento sem uso de AJAX

Muitas vezes, na utilizao tradicional da web (sem o uso de AJAX) verificamos a necessidade constante de recarga de pginas at se atingir o objetivo desejado. At h alguns anos esta era a nica forma utilizada para se executar certos procedimentos. O exemplo de cadastro de usurio abaixo demonstra isto: isto:Primeiro Momento usurio insere informaes

Segundo momento usurio recebe informao de que seu ID j est em uso:-

Em seguida o usurio volta tela anterior e altera sua identificao. Vocs conhecem a lei de Murphy?

Este tipo de experincia pode fazer com que o usurio se irrite levando o a desistir do uso da ferramenta. levando-o

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer o

Pgina 2

DESENVOLVIMENTO WEB INTRODUO AO AJAX Voc consegue imaginar como isto poderia ser feito em AJAX?

5 de novembro de 2008

Pgina ajustada para checar existncia de ID no banco de dados

ID j existente

ID no existente Irei explicar mais a frente esta pgina em detalhes. Vamos verificar agora como funciona o processo passo a passo.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer o

Pgina 3

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

O processo
Funcionamento usando AJAX
Esta rotina pode ser facilmente adaptada para o funcionamento com AJAX. Para isto precisamos:-

1) Interceptar o evento onBlur (que acionado quando da perda do foco do objeto) da caixa de texto identificao do usurio redirecionando-o para uma funo Javascript. 2) Criamos uma funo Javascript e dentro dela um objeto AJAX que ser configurado para chamar a pgina de consulta. O objeto AJAX dever receber a informao (texto: disponvel ou indisponvel) da pgina de consulta e exibi-la. Enquanto este objeto no recebe a informao, ele insere uma imagem de carregamento num objeto SPAN localizado ao lado da caixa de identificao do usurio.
Note que esta imagem uma gif animada muito utilizada para dar a impresso, ao usurio, de que algo est acontecendo (neste caso, a localizao do id do usurio). No existe nenhum controle de quanto tempo esta execuo se dar. Por isto, ao final do processo voc precisar retirar esta imagem deste SPAN, isto , inserir um texto ou outro objeto (por exemplo, uma imagem com um tique, representando que o ID est disponvel) neste SPAN para que o usurio saiba que o processo finalizou.

3) Criamos uma pgina de consulta (pode ser em PHP, ASP, etc.) que acessa o banco buscando verificar se o usurio existe na tabela de usurios. (Em nosso exemplo utilizaremos uma pgina feita em PHP).

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 4

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

Observao: O cdigo Javascript pode dentro da pgina HTML ou num arquivo separado.

4) A consulta ao banco devera retornar se o id (informado) do usurio existe ou no. 5) A pgina dinmica (PHP neste exemplo) dever retornar para o objeto AJAX o cdigo HTML contendo disponvel quando o ID no existir (o que significa que este ID pode ser cadastrado) ou indisponvel quando o ID j existir (indicando que no pode ser cadastrado novamente). 6) Uma vez que o objeto AJAX tenha finalizado o recebimento da informao da pgina PHP, ele dever acessar o objeto SPAN e inserir o texto (cdigo HTML) recebido, sobrepondo o seu contedo anterior (imagem de carregamento).

Note que o objetivo deste procedimento acelerar a informao ao usurio de ID existente ou no. Com isto, o usurio poder saber de antemo se o processo de cadastro de um novo usurio ir funcionar. Perceba que apesar deste processo estar mais gil, o usurio s saber se conseguiu gravar o ID aps clicar no boto Cadastrar, ou seja, existe ainda a possibilidade de que, no espao de tempo que ele levou para preencher os demais dados e clicar no boto Cadastrar, algum outro usurio tenha feito o mesmo, usando o mesmo ID e clicado antes dele finalizar.

O objeto XMLHttpRequest
Vamos agora focar no objeto XMLHttpRequest (vamos cham-lo de objeto AJAX) para poder ter base para uma anlise mais tcnica da pgina acima. Naturalmente, um objeto AJAX deve ser criado dentro do Javascript. Como mencionei anteriormente, a maneira pela qual criamos o objeto AJAX depende do navegador.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 5

DESENVOLVIMENTO WEB INTRODUO AO AJAX Analise o cdigo JAVASCRIPT abaixo:-

5 de novembro de 2008

Navegador Cdigo de criao do objeto AJAX Firefox (Mozilla) e Safri (Apple), Opera var objetoAjax = new XMLHttpRequest(); Internet Explorer acima da verso 5 var objetoAjax = new ActiveXObject("Msxml2.XMLHTTP") Internet Explorer (inicial) var objetoAjax = new ActiveXObject("Microsoft.XMLHTTP"); A verso inicial (acima) mantm compatibilidade podendo ser utilizada com as verses superiores do navegador internet Explorer. No Internet Explorer, voc poder encontrar variaes na criao do objeto AJAXC atravs dos diversos objetos ActiveXObject disponibilizados. Iremos estudar alguns destes casos logo a seguir.

Try e Catch
Uma vez que um objeto e seus mtodos podem existir num navegador, mas no em outro, precisamos tentar criar o objeto AJAX ao menos nos navegadores mais conhecidos (Firefox, Internet Explorer, Safri e Opera). Para isto neste exemplo utilizaremos o bloco Try /Catch que nos permite tentar executar uma operao (comando) em Javascript e caso o mesmo gere erro, podemos interceptar o mesmo e executar outro comando.

Criando o objeto AJAX

Vamos ento analisar a primeira parte, mais importante que a criao do objeto AJAX:function ChecaUsuario() { try { xmlhttp = new XMLHttpRequest() } catch(e1) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") } catch(e2) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } catch(e3) { xmlhttp = false } } } ...... ...... Antes de tudo precisamos dar um nome ao objeto que iremos utilizar neste exemplo. Decidi utilizar xmlhttp para nomear este objeto.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 6

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

No primeiro bloco try/catch tentamos criar um objeto AJAX atravs de XMLHttpRequest(), o que s funcionar nos navegadores Firefox, Safri e pera. Veja:try { xmlhttp = new XMLHttpRequest() } Caso no funcione, presumo que o usurio est executando esta pgina no Internet Explorer. Em funo disto, tentamos criar o objeto AJAX atravs do uso de ActiveXObject abaixo, que funcionar para navegador Internet Explorer acima da verso 5.0:try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") } Caso se verifique que houve um problema, o prximo bloco try/catch ser executado. Vamos tentar agora criar o objeto AJAX usando uma chamada ActivexObject que funcionar para navegador Internet Explorer abaixo da verso 5.5:try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } Bom, se at agora no funcionou, o prximo bloco try/catch ser executado. Isto significa que voc no est usando nenhum dos navegadores acima ou digitou algo errado. O que fao aqui deixar o objeto setado com o valor falso de forma a interromper qualquer trabalho a ser feito com ele posteriormente. xmlhttp = false

Configurando o objeto AJAX

Neste momento temos o objeto xmlhttp (objeto AJAX) criado. Precisamos agora inserir a imagem de carregamento dentro do SPAN que foi criado com o id=aviso".

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 7

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

xmlhttp = false } } } // Se consegui criar o objeto AJAX if(xmlhttp) { var objSpan =document.getElementById("aviso") objSpan.innerHTML="<img src='ajax src='ajax-loader.gif'>" ...... ...... No trecho acima:-

1) Verificamos se o objeto xmlhttp no falso (o que significa que conseguimos criar o objeto AJA AJAX, caso contrrio ele seria falso. 2) Criamos objSpan que aponta para objeto SPAN chamado aviso, que um objeto SPAN que no tem contedo algum (est vazio) e est localizado ao lado da caixa de texto de identificao do usurio. Ao criarmos o objeto objSpan, que aponta para o objeto original podemos manipular suas objSpan, propriedades e mtodos como se estivssemos trabalhando com o prprio objeto SPAN aviso. 3) Temos agora um exemplo disto. Ao definirmos a propriedade innerHTML do objeto objSpan, estamos na verdade definindo a propriedade do objeto SPAN aviso. S para lembrar, a propriedade finindo innerHTML de um objeto SPAN ou DIV aceita comandos em HTML e executa executa-os. Ao sair desta linha, este objeto ir tentar carregar a imagem ajax ajax-loader.gif
} } // Se consegui criar o objeto AJAX gui if(xmlhttp) { var objSpan =document.getElementById("aviso") objSpan.innerHTML="<img src='ajax src='ajax-loader.gif'>" var txtUsuario = document.getElementById("idUsuario").value ...... ...... Precisamos agora pegar o que foi digitado na caixa de texto idUsuario. Para isto, iremos acessar sua os . propriedade value atravs do DOM (document.getElementById()): (document.getElementById()):-

A varivel txtUsuario contem o que o usurio digitou. No exemplo acima, ela contem o texto Carlos Carlos.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer o

Pgina 8

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

var objSpan =document.getElementById("aviso") objSpan.innerHTML="<img src='ajax-loader.gif'>" var txtUsuario = document.getElementById("idUsuario").value var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario) ...... ...... Iremos criar agora a varivel enderecoURL que conter a chamada pgina de localizao do ID do Usurio. Esta pgina chama-se localizaUsuario.php. Precisamos chamar esta pgina passando-lhe o cdigo digitado pelo usurio (neste caso, o cdigo Carlos). Para isto, iremos enviar este cdigo atravs do mtodo GET que nos permite enviar uma informao atravs da URL. Exemplo:localizaUsuario.php?codigo=Carlos Veja acima que o mtodo GET alm de ser utilizado em formulrios pode tambm ser via URL. Por que estamos usando a funo escape? Temos um pequeno problema. Existem navegadores que ao digitarmos um cdigo com acentos, ele transforma os acentos num cdigo de escape. Veja:localizaUsuario.php?codigo=Jo%E3o Por exemplo, caso utilizemos o cdigo Joo, no Mozilla Firefox, ele transformar Joo para Jo%E3o, o que far com que a pgina PHP no consiga localizar o cdigo correto. Como o Internet Explorer no faz esta alterao na informao enviada e como precisamos ter a certeza de que a pgina funcionar em ambos os navegadores, iremos alterar o envio da informao escapando (transformando todos os caracteres em cdigos especiais de escape) esta informao e efetuando o processo reverso na pgina PHP. Bom, o que importa que a varivel enderecoURL est com o seguinte contedo:-

localizaUsuario.php?codigo=Carlos
Vamos configurar o objeto AJAX com estas informaes? var txtUsuario = document.getElementById("idUsuario").value var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario) //Abre o Endereo especificado pelo metodo 'GET' xmlhttp.open("GET", enderecoURL ,true) ...... ...... O objeto AJAX tem um mtodo chamado open que abre uma determinada pgina (efetua uma conexo) para recebimento de dados e aceita os seguintes parmetros:-

1) Mtodo de Requisio de dados: GET ou POST (Existem outros, mas vamos nos limitar nestes dois) 2) Endereo a ser lido (neste caso, utilizaremos a varivel enderecoURL que tem a pgina que queremos acessar e que est preparada para enviar o cdigo que queremos passar para a pgina de consulta) 3) Assncrono: Neste caso, o true significa verdade, ou seja, queremos uma conexo assncrona. A conexo assncrona faz com que o objeto no trave o funcionamento da pgina HTML permitindo que o objeto AJAX execute em paralelo com a execuo da pgina HTML.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 9

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

A partir desta linha o objeto AJAX ir acessar a pgina de consulta e j comeara a aguardar o retorno das informaes desta pgina. Ops, falta algo. Precisamos configurar o que fazer quando o objeto AJAX receber os dados da pgina de consulta. O manipulador onreadystatechange Para isto, iremos trabalhar com o manipulador de eventos onreadystatechange (alguns chamam de propriedade do objeto AJAX). Neste manipulador, podemos criar uma funo e associ-la ao manipulador ou simplesmente inserir uma funo dentro do manipulador (utilizaremos esta forma) para tratar o processo de recebimento de dados pelo objeto AJAX da pgina destino. Vamos l? //Abre o Endereo especificado pelo metodo 'GET' xmlhttp.open("GET", enderecoURL ,true) xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if ( xmlhttp.status == 200) { var texto= xmlhttp.responseText //Exibe o texto no span AVISO objSpan.innerHTML=texto } else { objSpan.innerHTML="Falha" } } } ...... ...... Na primeira linha inserimos uma funo no manipulador onreadystatechange. Esta funo s ser executada pelo prprio objeto AJAX assim que ele comear a ser executado. O que precisamos fazer aqui entender bem o funcionamento desta funo, quais so as propriedades mais importantes, seus valores e para que elas servem. Propriedade readyState Esta propriedade define o status do objeto AJAX quanto ao processo de recebimento de dados da pgina destino e pode ter os seguintes valores:Valor Significado 0 O objeto foi instanciado (criado), mas ainda no foi inicializado 1 O objeto j foi aberto 2 Dados j foram enviados pgina destino (solicitao efetuada) 3 Dados esto sendo carregados, o que significa que a operao est em processo 4 O objeto est finalizado, o que significa que o recebimento de dados finalizou Para ns, o que interessa quando a propriedade readState est com valor igual a quatro, o que significa que o processo j finalizou e a informao, caso no tenha havido nenhum problema est disponvel para uso.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 10

DESENVOLVIMENTO WEB INTRODUO AO AJAX Propriedade status Esta propriedade armazena o resultado do acesso pgina destino do objeto AJAX. Seus valores mais comuns so:Valor Significado 200 OK pgina encontrada e executada 403 Forbidden contedo proibido de ser exibido 404 Not Found Pgina no encontrada

5 de novembro de 2008

O desenvolvedor deve checar qual o valor desta propriedade para tomar a ao devida. Se o valor desta propriedade for duzentos (200) significa que a pgina foi encontrada de forma que podemos continuar o procedimento que em geral utilizar o resultado que veio desta pgina e foi armazenado no objeto AJAX. if ( xmlhttp.status == 200) ..... ..... Caso contrrio, houve algum problema (exemplo: Pgina no encontrada). Neste caso, a obrigao do desenvolvedor informar o usurio. Neste exemplo, o desenvolvedor deve informar ao usurio que houve falha na tentativa de localizao do id do usurio. A propriedade statusText uma forma mais amigvel de representao do texto ocorrido. O desenvolvedor pode utilizar esta propriedade para exibir o erro em formato texto ao invs do cdigo do erro ao usurio final. objSpan.innerHTML="Falha na localizao do ID:" + xmlhttp.statusText ...... ...... Recuperando o resultado do objeto AJAX

Vamos agora estudar a seguinte situao:-

1) O objeto AJAX est com seu status finalizado (readyState=4), ou seja, pronto para ser acessado.

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 11

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

2) O status do acesso pgina destino teve sucesso (status=200) 3) Vamos agora acessar o objeto AJAX e utilizar os dados que foram recuperados da pgina consultada
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if ( xmlhttp.status == 200) { var texto= xmlhttp.responseText //Exibe o texto no span AVISO objSpan.innerHTML=texto } else { objSpan.innerHTML="Falha" } ...... ...... Criamos uma varivel de nome texto que acessa a propriedade responseText do objeto AJAX. A propriedade responseText armazena o que foi recuperado da pgina consultada, no formato de texto.

O que fazemos aqui nada mais do que pegar a propriedade responseText que contm o que foi recuperado da pgina consultada (em formato texto) e inserir este contedo no objeto span (criado desde o comeo da pgina) para exibir se o ID, neste momento est disponvel ou indisponvel. Dica Alm da propriedade responseText, o objeto AJAX tem a propriedade responseXML que contem a mesma informao recuperada da pgina consultada, mas em formato XML. Para utilizar este formato o retorno da informao do PHP teria que ser formatado tambm em XML. No pretendo cobrir esta propriedade nesta apostila. Para maiores informaes sobre (demais cdigos de status), consulte:http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 12

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

Iniciando a execuo do objeto AJAX

... ... else { objSpan.innerHTML="Falha" } } } xmlhttp.send(null) } } </script> ...... ...... Para finalizar e fazer com que o objeto AJAX inicie o acesso pgina de consulta devemos acionar o mtodo send do objeto AJAX. Este o mtodo responsvel por iniciar o funcionamento do objeto AJAX. Este mtodo aceita um parmetro, mas passaremos o valor null uma vez que no o utilizaremos. Finalizamos este exemplo. No final desta apostila segue o cdigo completo destas pginas:-

CadastraUsuario.htm (Pgina bsica de cadastro com o cdigo AJAX inserido) localizaUsuario.php (Pgina que localiza o usurio, em PHP)

Trabalhando com diversos objetos AJAX

Uma possibilidade que existe a criao de diversos objetos AJAX, cada um dos quais acionando uma pgina de consulta especfica e recebendo dados diferentes. Na pgina apresentada abaixo, temos os seguintes elementos sendo alimentados dinamicamente via AJAX:-

Lista (combo) de cdigos de produtos existentes Nome do produto Preo do produto Foto do produto Descrio do produto
A tcnica aqui consiste em criar um objeto AJAX para cada item a ser utilizado. Veja o cdigo a seguir:try { xmlFoto= new XMLHttpRequest(); xmlTit= new XMLHttpRequest(); xmlPreco= new XMLHttpRequest(); xmlDesc= new XMLHttpRequest(); } catch(e1) { try { xmlFoto = new ActiveXObject("Msxml2.XMLHTTP");

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 13

DESENVOLVIMENTO WEB INTRODUO AO AJAX xmlTit = new ActiveXObject("Msxml2 ActiveXObject("Msxml2.XMLHTTP"); xmlPreco = new ActiveXObject("Msxml2.XMLHTTP"); xmlDesc = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e2) { try { xmlFoto = new ActiveXObject("Microsoft.XMLHTTP"); xmlTit = new ActiveXObject("Microsoft.XMLHTTP"); xmlPreco = new ActiveXObject("Microsoft.XMLHTTP"); xmlDesc = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3) { xmlFoto = null; } } }

5 de novembro de 2008

No exemplo acima, criamos quatro objetos AJAX, cada um dos quais far uma chamada a uma pgina diferente. O resultado pode ser verificado a seguir: seguir:-

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer o

Pgina 14

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

Concluso
O uso do Javascript e XML (AJAX) veio para ficar e trazer novas formas de enriquecer a forma pela qual os usurios interagem na interface. Cabe aos desenvolvedores o estudo destas tecnolog tecnologias para se destacarem no mercado e melhorarem a experincia do usurio nas suas ferramentas. Dvidas? cmajer@uol.com.br Carlos Majer.

Pgina CadastraUsuario.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> //W3C//DTD Transitional//EN"> <html> <head> <style type="text/css"> body{ background-repeat:no repeat:no-repeat; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans family: sans-serif; height:100%; background-color: #FFF; color: margin:0px; padding:0px; background-image:ur image:url('/images/heading3.gif'); background-repeat:no repeat:no-repeat; padding-top:85px; top:85px; } fieldset{ width:500px; margin-left:10px; left:10px; } .campos{ border:1px solid black; } </style> <script> function ChecaUsuario() { // Verfica se o navegador tem suporte a AJAX. egador try { xmlhttp = new XMLHttpRequest() } catch(e1) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") } catch(e2) {

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer o

Pgina 15

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } catch(e3) { xmlhttp = false } } } // Se conseguir criar o objeto AJAX if(xmlhttp) { // Mostra a figura de carregando na tela var objSpan =document.getElementById("aviso") //objSpan.innerHTML="Checando..." objSpan.innerHTML="<img src='ajax-loader.gif'>"

// Recuperamos o valor do objeto idUsuario var txtUsuario = document.getElementById("idUsuario").value // Montamos a URL destino (a ser executada) var enderecoURL = 'localizaUsuario.php?codigo='+escape(txtUsuario) //Abre o Endereo especificado pelo metodo 'GET' xmlhttp.open("GET", enderecoURL ,true) // Definimos a funo de tratamento da alterao de estado do objeto AJAX xmlhttp.onreadystatechange=function() { // Objeto est pronto? (Status finalizado) if (xmlhttp.readyState==4) { // Deu tudo certo? if ( xmlhttp.status == 200) { // resposta do servidor OK - L o texto var texto= xmlhttp.responseText //Exibe o texto no span AVISO objSpan.innerHTML=texto } else { objSpan.innerHTML="Falha na localizao do ID:" + xmlhttp.statusText } } } // Objeto AJAX no mais necessrio. Vamos elimin-lo. xmlhttp.send(null) } } </script> <title>Cadastro de Novo Usurio</title>

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 16

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

</head> <body> <form name="formUsuario" action="CadastraUsuario.php" method="post"> <fieldset> <legend>Dados do Usuario</legend> <table> <tr> <td><label for="idUsuario">Identificao:</label></td> <td> <input name="idUsuario" id="idUsuario" size="15" maxlength="15" onblur="ChecaUsuario()" class="campos"> <span id="aviso"></span > </td> </tr> <tr> <td><label for="nome">Nome:</label></td> <td><input name="nome" id="nome" size="40" maxlength="40" class="campos"></td> </tr> <tr> <td><label for="endereco">Endereo:</label></td> <td><input name="endereco" id="endereco" size="50" maxlength="50" class="campos"></td> </tr> <tr> <td><label for="cidade">Cidade:</label></td> <td><input name="cidade" id="cidade" size="30" maxlength="30" class="campos"></td> </tr> <tr> <td><label for="uf">Estado:</label></td> <td><input name="uf" id="uf" size="3" maxlength="2" class="campos"></td> </tr> <tr> <td><label for="cep">CEP:</label></td> <td><input name="cep" id="cep" size="9" maxlength="9" class="campos"></td> </tr> <tr> <td colspan="2" align="center"><label for="cep"><input type="submit" value="Cadastrar" /></label></td> </tr> </table> <tr> <td colspan="2" align="center"> </td> </tr> </form> </fieldset> </body> </html> Pgina localizaUsuario.php <?php $conexao = mysql_connect("localhost","root",""); $charset = "iso-8859-1";

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 17

DESENVOLVIMENTO WEB INTRODUO AO AJAX

5 de novembro de 2008

$mime = "text/html"; header("Content-Type: $mime;charset=$charset"); mysql_select_db("exemploAjax",$conexao); if(isset($_GET['codigo'])) { $comandoSQL = "select * from usuarios where idUsuario='".$_GET['codigo']."'"; //echo $comandoSQL; $res = mysql_query($comandoSQL) or die(mysql_error()); $linhas = mysql_num_rows($res); if( $linhas > 0) { echo "<font color=red><strong>Indispon&iacute;vel</strong></font>"; } else { echo "<font color=green> Dispon&iacute;vel</font>"; } mysql_close(); } ?>

Introduo ao AJAX - Verso 3.0 - Prof. Carlos Majer

Pgina 18