AJAX. Prof. Marcos Alexandruk

Tamanho: px

Começar a partir da página:

Download "AJAX. Prof. Marcos Alexandruk"

Paulo Cássio Soares Ramires
7 Há anos
Visualizações:

1 Prof. Marcos Alexandruk

2 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"

3 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.

4 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.

5 "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.

6 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

7 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.

8 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.

9 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.)

10 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.

11 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.

12 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.

13 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

14 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);

15 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>

16 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();

17 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);

18 consultarcepxml.php (1/2) <? // conexão com o banco de dados $host = " "; $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);

19 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 \"?>\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";?>

Documentos relacionados

AJAX (Asynchronous Javascript And XML)

AJAX (Asynchronous Javascript And XML) André Tavares da Silva andre.silva@udesc.br AJAX O nome AJAX foi idealizado por Jesse James Garrett, que definiu o objeto XMLHttpRequest. O AJAX não é uma linguagem