AJAX (Asynchronous Javascript And XML) Seminário de Sistemas Distribuidos
O que é AJAX? <ul><li>É uma técnica de desenvolvimento client-side que permite recuperar dados do servidor de maneira assi...
O que AJAX tem há ver com Sistemas Distribuídos? <ul><li>Usando o conceito de AJAX, nós podemos disparar requisições em ba...
Vantagens da utilização de AJAX <ul><ul><li>Aplicações mais &quot;dinâmicas&quot; </li></ul></ul><ul><ul><li>Possibilidade...
Principais usos do AJAX <ul><ul><li>Iteração com APIs (Twitter, Facebook, Picasa, Flickr) </li></ul></ul><ul><ul><li>Submi...
Restrições <ul><li>Existem algumas restrições para o uso de AJAX, apesar de todos os browsers modernos permitirem o uso de...
Como fazer uma requisição assincrona <ul><li>function carrega(url){ </li></ul><ul><li>         //Exibe o texto carregando ...
Bibliotecas para facilitar o uso de AJAX <ul><ul><li>jQuery (http://www.jquery.com) </li></ul></ul><ul><ul><li>Prototype (...
Exemplo de AJAX usando jQuery <ul><li>//requisitando uma URL e enviando dados via GET </li></ul><ul><li>$.get( </li></ul><...
AJAX vs. HTML5 <ul><li>Com o HTML5 surgiu uma nova maneira que fazer requisições assincronas, muito mais transparente e a ...
Upcoming SlideShare
Loading in …5
×

Ajax (Asynchronous Javascript And Xml)

1,114 views

Published on

Slideshow about AJAX to SENAC/RS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ajax (Asynchronous Javascript And Xml)

  1. 1. AJAX (Asynchronous Javascript And XML) Seminário de Sistemas Distribuidos
  2. 2. O que é AJAX? <ul><li>É uma técnica de desenvolvimento client-side que permite recuperar dados do servidor de maneira assincrona, sem interferir na página que faz a requisição.  </li></ul>
  3. 3. O que AJAX tem há ver com Sistemas Distribuídos? <ul><li>Usando o conceito de AJAX, nós podemos disparar requisições em background enquanto o site continua responsivo, não prejudicando o fluxo do site </li></ul>
  4. 4. Vantagens da utilização de AJAX <ul><ul><li>Aplicações mais &quot;dinâmicas&quot; </li></ul></ul><ul><ul><li>Possibilidade de processar várias requisições ao mesmo tempo </li></ul></ul><ul><ul><li>Velocidade de processamento (Não é necessário enviar todos os headers para a requisição  </li></ul></ul>
  5. 5. Principais usos do AJAX <ul><ul><li>Iteração com APIs (Twitter, Facebook, Picasa, Flickr) </li></ul></ul><ul><ul><li>Submissão de formulários </li></ul></ul><ul><ul><li>Aplicações Ricas (Gmail, iGoogle, Google Reader) </li></ul></ul>
  6. 6. Restrições <ul><li>Existem algumas restrições para o uso de AJAX, apesar de todos os browsers modernos permitirem o uso de requisições assincronas, os mais antigos (bem antigos) não tem suporte (campanha &quot;Morra IE6 e toda sua corja&quot;), assim como alguns browsers mobile (Opera mini, Nokia Browser) </li></ul>
  7. 7. Como fazer uma requisição assincrona <ul><li>function carrega(url){ </li></ul><ul><li>         //Exibe o texto carregando no div conteúdo </li></ul><ul><li>         var conteudo=document.getElementById(&quot;conteudo&quot;) </li></ul><ul><li>         conteudo.innerHTML='<div class=&quot;carregando&quot;>carregando...</div>' </li></ul><ul><li>         //Abre a url </li></ul><ul><li>         xmlhttp.open(&quot;GET&quot;, url,true); </li></ul><ul><li>         //Executada quando o navegador obtiver o código </li></ul><ul><li>         xmlhttp.onreadystatechange=function() { </li></ul><ul><li>                if (xmlhttp.readyState==4){ </li></ul><ul><li>                    //Lê o texto </li></ul><ul><li>                    var texto=xmlhttp.responseText </li></ul><ul><li>                     //Desfaz o urlencode </li></ul><ul><li>                     texto=texto.replace(/+/g,&quot; &quot;) </li></ul><ul><li>                     texto=unescape(texto) </li></ul><ul><li>                     //Exibe o texto no div conteúdo </li></ul><ul><li>                     var conteudo=document.getElementById(&quot;conteudo&quot;) </li></ul><ul><li>                     conteudo.innerHTML=texto </li></ul><ul><li>                 } </li></ul><ul><li>         } </li></ul><ul><li>         xmlhttp.send(null) </li></ul><ul><li>     } </li></ul>
  8. 8. Bibliotecas para facilitar o uso de AJAX <ul><ul><li>jQuery (http://www.jquery.com) </li></ul></ul><ul><ul><li>Prototype (http://www.prototypejs.org/) </li></ul></ul><ul><ul><li>Mootools (http://mootools.net/) </li></ul></ul><ul><ul><li>Dojo (http://www.dojotoolkit.org/) </li></ul></ul><ul><ul><li>Várias outras que não vou citar (google it) </li></ul></ul>
  9. 9. Exemplo de AJAX usando jQuery <ul><li>//requisitando uma URL e enviando dados via GET </li></ul><ul><li>$.get( </li></ul><ul><li>     &quot;teste.php&quot;,  </li></ul><ul><li>     {nome: &quot;Henrique&quot;, sobrenome: &quot;Boaventura} </li></ul><ul><li>); </li></ul><ul><li>     </li></ul><ul><li>//requisitando uma URL e enviando dados via POST </li></ul><ul><li>$.post( </li></ul><ul><li>     &quot;teste.php&quot;,  </li></ul><ul><li>     {nome: &quot;Henrique&quot;, sobrenome: &quot;Boaventura} </li></ul><ul><li>); </li></ul><ul><li>     </li></ul><ul><li>//requisitando uma URL sem enviar nada e colocando o conteúdo dentro de um elemento </li></ul><ul><li>     $('#resultado').load('teste.php'); </li></ul>
  10. 10. AJAX vs. HTML5 <ul><li>Com o HTML5 surgiu uma nova maneira que fazer requisições assincronas, muito mais transparente e a prova de falhas. </li></ul><ul><li>Os WebSockets fazem basicamente a mesma coisa que o AJAX, mas mantém uma conexão constante com o servidor, sem a necessidade de inúmeras requisições. Apenas um keepAlive é enviado para dizer... estou vivo. </li></ul>

×