Ajax fácil com jQuery

Até pouco tempo atrás, para utilizar técnicas ajax, eram necessários conhecimentos sobre o método XMLHttpRequest que resultava em enormes funções escritas em javascript e muito trabalho ao desenvolvedor. Hoje podemos utilizar bibliotecas como o jQuery para tornar o trabalho com ajax muito simples.

O objetivo desse tutorial é imprimir o conteúdo de um arquivo html em um objeto div sem a necessidade de carregar a página.

Ajax (Asynchronous Javascript and XML) é uma técnica javascript que utiliza o método XMLHttpRequest para fazer requisições assíncronas. Pensando de forma simples, uma função javascript assume o papel de navegador acessando uma determinada url e fornecendo como retorno o conteúdo HTML gerado pela url acessada.

Exemplo de método ajax sem utilizar jQuery

function handler() {
 if(this.readyState == 4 && this.status == 200) {
  if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data)
     //successo
   alert(this.responseXML.getElementById('test').firstChild.data);
  else
   return false
 } else if (this.readyState == 4 && this.status != 200) {
  //página não encontrada ou erro na conexão
   return false
 }
}

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "arquivo.html");
client.send();

Método ajax utilizando jQuery

$.ajax({
  url: 'arquivo.html',
  success: function(data) {
    alert(data);
  }
});

Comentando:

Partimos de um HTML básico com um botão para acionar a função ajax e um elemento div, onde será impresso o resultado da requisição. Não esquecendo de adicionar a biblioteca jQuery e também do CSS básico.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax fácil com jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20div%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.loader%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

  </head>
  <body>
      <img src="loader.gif" class="loader" alt="loader" />
      <input type="button" value="AJAX!">

<div>&nbsp;</div>

  </body>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.4.3.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>

Temos outro arquivo chamado ‘arquivo.html’ com o seguinte conteúdo:


<h1>Ajax!</h1>



Duis in turpis in arcu blandit pretium at sed metus. Sed tortor sapien, cursus vitae facilisis ac, tempor non eros. Donec at velit velit, cursus tristique justo?Nullam commodo sapien sit amet sapien porttitor eu rutrum arcu mollis. Nullam sagittis tempor risus, et convallis dolor eleifend vitae.In ac lacus libero; ut aliquam turpis.Quisque placerat blandit libero; eget  orttitor nunc eleifend vel. In hac habitasse platea dictumst. Aliquam dapibus fermentum fringilla.Integer mi erat, porta at aliquet a, consectetur in est.
<img src="http://images.vinteum.com/img/logo.png" />


</html>

Nosso objetivo é acessar este arquivo através de ajax, obter o conteúdo HTML e imprimir em um elemento DIV. Para utilizar o ajax é simples:

$.ajax({
  url: 'arquivo.html',  //URL solicitada
  success: function(data) { //O HTML é retornado em 'data'
    alert(data); //Se sucesso um alert com o conteúdo retornado pela URL solicitada será exibido.
  }
});

Neste ponto o ajax já está funcionando, basta imprimir o HTML retornado em um elemento div:

$.ajax({
  url: 'arquivo.html',
  success: function(data) {
      $('div').html(data);
  }
});

É possível ainda utilizar várias propriedades da função ajax do jQuery. Vamos utilizar as propriedades “beforeSend” e “complete”.

A propriedade “beforeSend” será acionada antes de rodar o ajax já a propriedade “complete” será acionada quando a requisição estiver completa.

Para quem quiser exibir o conhecido “ajax loading gif” enquanto a requisição é feita basta utilizar essas propriedades para controlar o CSS relacionado ao gif, Exemplo:

loading.gif aguarde, carregando…

$.ajax({
  url: 'arquivo.html',
  success: function(data) {
    $('div').html(data);
  },
  beforeSend: function(){
    $('.loader').css({display:"block"});
  },
  complete: function(){
    $('.loader').css({display:"none"});
  }
});

Uma boa opção para encontrar ‘loading gifs’ é o site http://ajaxload.info.
Pronto. Temos um ajax simples escrito em jQuery com ‘loading gif’.

Código completo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax fácil com jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20div%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.loader%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

  </head>
  <body>
      <img src="loader.gif" class="loader" alt="loading" />
      <input type="button" value="AJAX!">

<div>&nbsp;</div>

  </body>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.4.3.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%24('input').click(function()%7B%20%2F%2FQuando%20clicado%20no%20elemento%20input%0A%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20'arquivo.html'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('div').html(data)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Falert(data)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20beforeSend%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.loader').css(%7Bdisplay%3A%22block%22%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20complete%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.loader').css(%7Bdisplay%3A%22none%22%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>

Para ver um exemplo on-line clique aqui.
O manual completo do jQuery pode ser encontrado em http://api.jquery.com/jQuery.ajax/.

Gostou? Compartilhe!

Compartilhe:

Postado por tpastorello

Leia Mais:

22 respostas para “Ajax fácil com jQuery”

  1. […] This post was mentioned on Twitter by Blackjack, Tiago Pastorello. Tiago Pastorello said: RT @vinteum Blackjack » Ajax fácil com jQuery http://retwt.me/1PNYu […]

  2. pirilampo disse:

    Otimo
    vlw

  3. zpyohavz disse:

    oaayLF vbdlydvjkrnk, [url=http://yflbejzcucqc.com/]yflbejzcucqc[/url], [link=http://sughrqsrktrm.com/]sughrqsrktrm[/link], http://oafnvkxrrzpr.com/

  4. Douglas Santos disse:

    Simples e objetivo!

  5. Italo disse:

    Olá Douglas. Estou tendo um probleminha estranho. Veja, tenho o seguinte código:

    No JQuery eu só mudei para pegar a DIV pelo ID

    $(‘#_right’).html(data);

    Usei o seu método, ele funciona no IE mas não no Firefox, a DIV _right simplesmete some. Porque isso?

  6. Italo disse:

    Olá. Digamos que eu queira que o conteúdo permaneça carregado após dar um F5. Como faria?

    • tpastorello disse:

      Olá Italo, não entendi.

      Você quer que o conteúdo seja carregado antes de carregar a requisição? Isso não é possível. O conteúdo só é gerado após a conexão via HTTP, cada conexão é um requisição.
      Seria impossível fazer uma requisição antes de carregar o site. Você pode fazer algo pareciso carregando o conteúdo via ajax, mas só depois que a primeira requisição acontecer.

      • Italo disse:

        Olá tpastorello.

        Bem..deixe ver se consigo explicar. No exemplo online, após clicar no botão AJAX ele carrega a URL e modifica o html da DIV, certo? Mas se eu teclar F5 após isso ela (DIV) volta ao estado original, vazio.

        O que eu gostaria de saber é se seria possível manter esse conteúdo lá uma vez que ele já tenha sido carregado uma vez.

        • eu disse:

          Quando vc recarrega a página, ele está requisitando a página toda novamente. O que você pode fazer é guardar o estado no cookie. Ou seja, quando pressionar o botão ajax, além de buscar o html, vc seta no cookie que ele já fez esse procedimento. E quando o usuário carregar a tela novamente, ou seja, uma nova requisição, vc busca no cookie que ele já tinha esse conteúdo e apresenta novamente pra ele.

          • HB1 disse:

            Utilize uma funcionalidade do html chamada LocalStorage, utilizando essa funcionalidade você consegue armazenar os dados da div dentro de um cookie , o que faz com que quando o seu site for carregado novamente ele ja esteja la por causa deste “cookie”

  7. Lucas disse:

    Boa noite, e se eu quisesse chamar uma ação de um botão via Ajax, por exemplo, um botão Salvar ?

  8. Gerbert disse:

    Ótimo post!

  9. Raquel Souza disse:

    OLá, eu fiz o codigo direitinho como esta no tutorial mas não deu certo,até ctrl-c ctrl-v tbm,mas a imagen loader.gif até aparece mas ela não some, e a pagina arquivo.html nem da sinal de vida, até troquei o html(data) por text(data) e append(data) e nao deu nem nada, troquei a versão do jquery primeiro usei a 1.11.3 depois a do tutorial 1.4.3 tbm não deu em nada , alguem pode me audar o que estari adando errado

  10. Anderson Paixão disse:

    Ótimo post. Parabéns!

  11. Willian disse:

    cara, estou usando seu método, fiz uma busca no banco para me trazer alguns resultados, estes resultados possuem botões com as chamadas AJAX para trazer outras páginas, só que somente o 1º registro funciona, os demais não funcionam, ou seja, não chamam a página que deveriam chamar…

    pode me ajudar?

  12. Ótima publicação. Simples e objetiva.
    Seu post me ajudou bastante. Agradeço! =)

  13. Rodrigo disse:

    Sempre tive dificuldades em rodar jquery no IE. Será que é normal?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *