{"id":302,"date":"2007-08-27T13:21:00","date_gmt":"2007-08-27T16:21:00","guid":{"rendered":"http:\/\/helbertt.16mb.com\/site\/index.php\/2007\/08\/27\/ajax-em-20-minutos\/"},"modified":"2007-08-27T13:21:00","modified_gmt":"2007-08-27T16:21:00","slug":"ajax-em-20-minutos","status":"publish","type":"post","link":"https:\/\/helbertt.xyz\/site\/ajax-em-20-minutos\/","title":{"rendered":"AJAX em 20 minutos"},"content":{"rendered":"<p>AJAX = Asynchronous Javascript XML. Portanto, AJAX \u00e9 basicamente uma t\u00e9cnica   que consiste em fazer requisi\u00e7\u00f5es HTTP de forma ass\u00edncrona para o servidor <strong>(Nota: AJAX n\u00e3o \u00e9 uma tecnologia. \u00c9 uma t\u00e9cnica. Quem disser que \u00e9 uma   tecnologia merece arder no fogo do inferno pela eternidade)<\/strong>. Se voc\u00ea   n\u00e3o sabe o que \u00e9 uma requisi\u00e7\u00e3o HTTP, sugiro dar uma olhada <a href=\"http:\/\/pt.wikipedia.org\/wiki\/HTTP\">aqui<\/a>. N\u00e3o tem como escapar, \u00e9 a   base de tudo.<\/p>\n<p><\/p>\n<p>Fazer uma requisi\u00e7\u00e3o ass\u00edncrona significa que o processo ir\u00e1 rodar por tr\u00e1s   das cortinas, n\u00e3o interferindo no funcionamento da tela no navegador, ao   contr\u00e1rio do que acontece em uma requisi\u00e7\u00e3o normal. Quando executamos uma   requisi\u00e7\u00e3o s\u00edncrona no navegador (atrav\u00e9s de um link ou submetendo os dados de   um formul\u00e1rio), toda a interface para de responder a eventos. Isto fica   particularmente claro (e chato) quando a p\u00e1gina \u00e9 pesada e\/ou a rede esta   lenta.<\/p>\n<p><\/p>\n<p align=\"left\">As vantagens da t\u00e9cnica s\u00e3o \u00f3bvias: interfaces mais leves, suaves,   muito pr\u00f3ximas daquelas de aplicativos desktop.<\/p>\n<p><\/p>\n<p>Pr\u00e9 requisitos para conseguir mexer com AJAX? conhecer um pouco de   Javascript, DOM HTML e conhecer pelo menos uma linguagem de programa\u00e7\u00e3o server   side.<\/p>\n<p><\/p>\n<p><strong>Passo 1: Preparando o terreno<\/strong><\/p>\n<p><\/p>\n<p>Para come\u00e7ar, uma m\u00e1 not\u00edcia: muito do trabalho normalmente feito pelo   navegador quando submetemos um formul\u00e1rio com dados tem que ser feito pelo   script javascript. Ou seja, tem que ser feito pelo desenvolvedor. Um deles \u00e9   construir a string de requi\u00e7\u00e3o. O formato da string \u00e9 algo do tipo<\/p>\n<p><\/p>\n<p align=\"left\"><em>chave1=valor1&amp;chave2=valor2&amp;\u2026<\/em><\/p>\n<p><\/p>\n<p align=\"left\">N\u00e3o existe muito segredo. O \u00fanico cuidado a ser tomado \u00e9 em   rela\u00e7\u00e3o aos caracteres especiais. Espa\u00e7os, s\u00edmbolos como &amp;, =, caracteres   acentuados e caracteres n\u00e3o <a href=\"http:\/\/pt.wikipedia.org\/wiki\/ASCII\">ASCII<\/a> devem ser convertidos para o   formato <a href=\"http:\/\/pt.wikipedia.org\/wiki\/UNICODE\">Unicode<\/a>. Em   Javascript <a href=\"http:\/\/xkr.us\/articles\/javascript\/encode-compare\/\">existem   v\u00e1rias fun\u00e7\u00f5es<\/a> que fazem este tipo de convers\u00e3o, mas o mais adequado \u00e9 o par   encodeURIComponent\/decodeURIComponent.<\/p>\n<p><\/p>\n<p align=\"left\">O seu uso \u00e9 muito simples: <em>var string_codificada =   encodeURIComponent(string_original)<\/em>.<\/p>\n<p><\/p>\n<p align=\"left\">Em caso de requisi\u00e7\u00f5es muito longas, aconselho o uso de um   StringBuffer, que torna o processo de contatena\u00e7\u00e3o de strings muito mais   eficiente. <a href=\"http:\/\/log4dev.com\/2006\/04\/06\/stringbuffer-em-javascript\/\">Veja aqui como   fazer isso<\/a>.<\/p>\n<p><\/p>\n<p align=\"left\"><strong>Passo 2: enviando os dados para o servidor<\/strong><\/p>\n<p><\/p>\n<p>Muito bem. J\u00e1 temos uma string de requisi\u00e7\u00e3o, agora precisamos enviar isto   para o servidor. Para isso, existem 2 m\u00e9todos: GET e POST .<\/p>\n<p><\/p>\n<ul>  <\/p>\n<li>O m\u00e9todo GET envia os par\u00e2metros na requisi\u00e7\u00e3o   (<em>www.meusite.com?chave1=valor1&amp;chave2&amp;valor2\u2026<\/em>) e tem uma   limita\u00e7\u00e3o de tamanho de 1024 bytes. \u00c9 mais indicado para enviar par\u00e2metros   relacionados \u00e1 busca de informa\u00e7\u00f5es no servidor.   <br \/> \n<li>O m\u00e9todo POST envia os par\u00e2metros de forma separada, e n\u00e3o tem limita\u00e7\u00e3o de   tamanho. \u00c9 mais indicado para envio de dados de formul\u00e1rios, textos longos e   dados que ser\u00e3o armazenados no servidor. Se os dados forem maiores que 4KB,   alguns cuidados especiais devem ser tomados, como mostrado <a href=\"http:\/\/log4dev.com\/2006\/04\/04\/envio-de-grandes-conjuntos-de-dados-com-ajax\/\">aqui<\/a>. <\/li>\n<p><\/ul>\n<p><\/p>\n<p>Para executar a requisi\u00e7\u00e3o, o primeiro passo \u00e9 criar o objeto   HTTPRequest:<\/p>\n<p><\/p>\n<pre>var req;  <br \/>if (window.XMLHttpRequest)<br \/>      req =  new XMLHttpRequest();  <br \/>else if (window.ActiveXObject)<br \/>      req = new ActiveXObject('Microsoft.XMLHTTP');  <br \/>else<br \/>      req =  new ActiveXObject('Microsoft.XMLHTTP2');<\/pre>\n<p><\/p>\n<p>O c\u00f3digo acima cria um objeto de requisi\u00e7\u00e3o para Windows ou Firefox (eles s\u00e3o   ligeiramente diferentes, apesar de terem interfaces de uso iguais). Com o objeto   de requisi\u00e7\u00e3o na m\u00e3o, o pr\u00f3ximo passo \u00e9 definir a fun\u00e7\u00e3o que ser\u00e1 chamada quando   o resultado da requisi\u00e7\u00e3o enviado pelo servidor estiver   dispon\u00edvel:<\/p>\n<p>  req.onreadystatechange = minhafunc;<\/p>\n<p><\/p>\n<p>O uso desta fun\u00e7\u00e3o ser\u00e1 explicado no pr\u00f3ximo passo. Finalmente, o envio dos   dados. Se o m\u00e9todo usado for GET, a receita de bolo   \u00e9<\/p>\n<p>  requestObject.open(\u2019GET\u2019, url,   true);<\/p>\n<p>  requestObject.send(null);<\/p>\n<p><\/p>\n<p>Onde <em>url = endere\u00e7odapagina?stringderequisicao<\/em>. Se o m\u00e9todo for   POST, a receita de bolo \u00e9<\/p>\n<p><\/p>\n<pre>requestObject.open('POST', url, true);  requestObject.setRequestHeader('Content-Type','application\/x-www-form-urlencoded');  requestObject.setRequestHeader(\"Connection\", \"close\");  if (parameters != null)      requestObject.setRequestHeader(\"Content-length\", parameters.length);  requestObject.send(parameters);<\/pre>\n<p><\/p>\n<p>onde URL \u00e9 apenas o endere\u00e7o do servidor, e parameters cont\u00e9m a string de   requisi\u00e7\u00e3o. Muito bem, os dados foram enviados. Agora \u00e9 esperar os dados   voltarem, e irmos para o pr\u00f3ximo passo.<\/p>\n<p><\/p>\n<p><strong>Passo 3: obtendo a resposta<\/strong><\/p>\n<p><\/p>\n<p>No passo 2, definimos o valor do atributo   req.onreadystatechange. Esse atributo \u00e9 uma fun\u00e7\u00e3o que ser\u00e1 chamada   pelo navegador para tratar a resposta. Uma forma de definir a fun\u00e7\u00e3o \u00e9<\/p>\n<p><\/p>\n<pre>req.onreadystatechange= function(){      \/\/corpo da fun\u00e7\u00e3o vai aqui  }<\/pre>\n<p><\/p>\n<p>Um ponto a ser ressaltado \u00e9 que esta fun\u00e7\u00e3o pode ser chamada v\u00e1rias vezes,   sem a resposta estar dispon\u00edvel ainda: a o processo passa por v\u00e1rios estados   antes de estar pronto para processamento. Portanto \u00e9 necess\u00e1rio testar o status   do processamento. Isto pode ser feito com o seguinte c\u00f3digo<\/p>\n<p><\/p>\n<p>req.onreadystatechange= function(){<\/p>\n<p>  if (req.readyState == 4){<\/p>\n<p>  if   (req.status == 200){<\/p>\n<p>  \/\/Resposta disponivel<\/p>\n<p>  }<\/p>\n<p>  }<\/p>\n<p>  }<\/p>\n<p><\/p>\n<p>O atributo readyState pode assumir 4 valores:<\/p>\n<p><\/p>\n<ul>  <\/p>\n<li>0: requisi\u00e7\u00e3o n\u00e3o inicializada   <br \/> \n<li>1: conex\u00e3o estabelecida   <br \/> \n<li>2: requisi\u00e7\u00e3o recebida   <br \/> \n<li>3: processando   <br \/> \n<li>4: requisi\u00e7\u00e3o terminad, resposta pronta. <\/li>\n<p><\/ul>\n<p><\/p>\n<p>J\u00e1 o atributo status fornece o status do protocolo HTTP. 200 significa   OK.<\/p>\n<p><\/p>\n<p>Muito bem, temos a resposta. O \u00faltimo passo \u00e9 processar o resultado. Para   obter o DOM XML, basta executar <em>req.responseXML<\/em>. Para trabalhar com o   conte\u00fado como se fosse uma sequ\u00eancia de texto, basta executar <em>req.responseText<\/em>. E para processar o resultado como JSON, basta   executar <em>eval(\u201d(\u201d+req+\u201d)\u201d)<\/em>.<\/p>\n<p><\/p>\n<p>Segue um exemplo completo de c\u00f3digo que recebe um snippet HTML (um trecho de   c\u00f3digo em HTML) e atualiza o conte\u00fado de uma DIV com este c\u00f3digo:<\/p>\n<p><\/p>\n<pre>function atualizaDiv(){<br \/>      var req;      <br \/>      if (window.XMLHttpRequest){<br \/>          req = new XMLHttpRequest();      <br \/>      } else if (window.ActiveXObject){<br \/>         req =  new ActiveXObject('Microsoft.XMLHTTP');<br \/>      }else{<br \/>         req =  new ActiveXObject('Microsoft.XMLHTTP2');<br \/>      }    req.open('POST', url, true);<br \/>      req.setRequestHeader('Content-Type','application\/x-www-form-urlencoded');<br \/>            <br \/>      req.onreadystatechange = function(){<br \/>          if (req.readyState == 4){<br \/>             if (req.status == 200){<br \/>                 document.getElementById(\"minhaDiv\").innerHTML=req.responseText;<br \/>                 document.body.style.cursor = \"default\";<br \/>             }<br \/>          }<br \/>      }<br \/>      req.send(params);<br \/>     }<\/pre>\n<p><a href=\"http:\/\/log4dev.com\/\">Fonte: Log4Dev<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AJAX = Asynchronous Javascript XML. Portanto, AJAX \u00e9 basicamente uma t\u00e9cnica que consiste em fazer requisi\u00e7\u00f5es HTTP de forma ass\u00edncrona<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout"},"categories":[102],"tags":[],"_links":{"self":[{"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/posts\/302"}],"collection":[{"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":0,"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"wp:attachment":[{"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helbertt.xyz\/site\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}