Prof. Marcos Alexandruk m.alexandruk@hotmail.com
Asynchronous JavaScript and XML Não é uma "nova tecnologia" Utiliza os recursos já existentes do JavaScript Jesse James Garret utilizou o termo pela primeira vez em 2005: "Ajax: A New Approach to Web Applications"
Aplicações Desktop geralmente apresentam interfaces ricas em recursos, facilidades operacionais e grande velocidade no retorno das informações aos usuários (baixo tempo de resposta). Aplicações Web não apresentavam estas mesmas características.
Ajax incului recursos que possibilitam às aplicações Web vantagens semelhantes às apresentadas pelas aplicações Desktop. A Web deixa de ser apenas uma provedora de conteúdo e passa a ser uma plataforma de aplicativos.
"Web 2.0 é a mudança para uma internet como plataforma... a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva". - Tim O'Reilly, 2004.
Principais Aspectos do AJAX: Dinamismo e interatividade, utilizando DOM e JavaScript Recuperação assíncrona de dados, utilizando a classe XMLHttpRequest Camada de apresentação padronizada, utilizando XHTML e CSS
Aplicação web clássica: Algum evento (como o clique do mouse) na interface HTML dispara uma requisição HTTP para um servidor O servidor recebe a requisição, verifica o que deve fazer (cálculo, acesso ao banco de dados, etc.) e retorna uma resposta em HTML que é recebida pelo browser, que realiza um reload da página.
Aplicação web clássica: Após a requisição ter sido disparada o usuário nada pode fazer enquanto aguarda a resposta do servidor. A cada retorno do servidor toda a interface (página HTML) é recarregada.
Aplicação AJAX: Pode ser construídas de maneira que o usuário não venha a perceber que está sendo feita uma comunicação com o servidor. Usuário não é obrigado a aguardar retornos que interrompem o fluxo de trabalho na interface. (Oferece assim vantagem similar às aplicações desktop.)
Aplicação AJAX: Utiliza uma nova camada de software no lado cliente (engine AJAX) que é escrita em JavaScript. Executa processamentos assíncronos de comunicação com o servidor (troca de dados) e também é responsável pela renderização da interface do usuário.
Processamento síncrono: aguarda o término da execução de um processo para iniciar outro. Processamento assíncrono: permite que outros processos sejam acionados ao mesmo tempo da execução do primeiro.
Classe XMLHttpRequest API (Application Programming Interface) que disponibiliza as funcionalidades HTTP (HyperText Transfer Protocol) permitindo a troca de dados entre cliente (browser) e servidor. Internet Explorer disponibilizou o recurso na forma de um ActiveX. Outros navegadores seguiram especificação da W3C.
XMLHttpRequest + onreadystatechange : Object + readystate : int + responsetext : String + responsexml : String + status : int + statustext : String + abort() : void + getallresponseheaders() : String + getresponseheader(headerneame : String) : String + open(method: String, url : String, async : boolean, username : String, password: String) : void + send(content: String) : void + setrequestheader(label: String, value: String) : void
Criando um objeto da classe XMLHttpRequest var XMLTttp; try { XMLHttp = new XMLHttpRequest(); // W3C catch(e) { try { XMLHttp = new ActiveObject("Msxml12.XMLHTTP"); // IE 6.X catch(ee) { try { XMLHttp = new ActiveObject("Microsoft.XMLHTTP"); // IE 5.X catch(eee) { alert ("Não conseguiu criar o objeto: " + eee.description);
pesquisarcepxml.html <HTML> <HEAD> <script language="javascript" type="text/javascript" src="consultarcepxml.js"></script> <TITLE>CONSULTAR CEP</TITLE> </HEAD> <BODY> <P align=center><font face="comic Sans MS" size=5>pesquisar Cep</FONT></P> <P align=center> <FORM title=consultacep name=formconsultacep action="javascript:atualiza(formconsultacep.codigocep.value);" method=post> <P align=center> <FONT size=4>digite o Cep: <INPUT maxlength=10 size=9 name=codigocep> </FONT></P> <P align=center> <INPUT type=submit value=pesquisar name=b-pesquisar ></FONT></P></FORM> <P></P> <P align=center><font size=5></font> </P> <div id=atualiza> </div> </BODY> </HTML>
consultarcepxml.js (1/2) var comunicacao; function buscardados(url,codigocep) { comunicacao = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.xmlhttprequest) { comunicacao = new XMLHttpRequest(); comunicacao.onreadystatechange = tratarretorno; comunicacao.open("get", url+'?codigocep='+codigocep, true); comunicacao.send(null); else if (window.activexobject) // Procura por uma versao ActiveX (IE) { comunicacao = new ActiveXObject("Microsoft.XMLHTTP"); if (comunicacao) { comunicacao.onreadystatechange = tratarretorno; comunicacao.open("get", url+'?codigocep='+codigocep, true); comunicacao.send();
consultarcepxml.js (2/2) function tratarretorno() { if ( comunicacao.readystate == 4 ) { if (comunicacao.status == 200) { var result = comunicacao.responsexml; var arearepaint = document.getelementbyid( 'atualiza' ); var tagxml = result.getelementsbytagname( 'cep' ); var endereco = tagxml[0].getelementsbytagname('endereco')[0].firstchild.nodevalue; var bairro = tagxml[0].getelementsbytagname('bairro')[0].firstchild.nodevalue; var cidade = tagxml[0].getelementsbytagname('cidade')[0].firstchild.nodevalue; var retorna = "<font color=red>" + "Endereco: " + endereco + "<br>" + " Bairro: " + bairro + "<br>" + " Cidade: " + cidade + "<br>" + "</font>"; arearepaint.innerhtml = retorna; else { alert("houve um problema ao obter os dados:\n" + comunicacao.statustext); function Atualiza(codigoCep) { buscardados("consultarcepxml.php", codigocep);
consultarcepxml.php (1/2) <? // conexão com o banco de dados $host = "127.0.0.1"; $user = "root"; $senha = ""; $con = mysql_connect($host, $user, $senha) or die ("ERRO DE CONEXÃO COM SGDB ". mysql_error()); mysql_select_db("livro"); // pega o parametro enviado pelo formulario HTML import_request_variables("gp"); // prepara e executa a sentença sql $sql = "SELECT endereco, bairro, cidade FROM cep WHERE codigocep = '$codigocep'"; $resultado = mysql_query($sql) or die("a busca do cep falhou: ". mysql_error() ); $linha = mysql_fetch_array($resultado);
consultarcepxml.php (2/2) // prepara o retorno dos dados em XML para a engine AJAX header("content-type: text/xml"); echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"; echo "<cep>\n"; if ($linha) { $endereco = $linha["endereco"]; $bairro = $linha["bairro"]; $cidade = $linha["cidade"]; echo "<endereco>$endereco</endereco>\n"; echo "<bairro>$bairro</bairro>\n"; echo "<cidade>$cidade</cidade>\n"; else echo "<erro>cep Inexistente!!!</erro>\n"; echo "</cep>\n";?>