AJAX com JQuery Introdução

AJAX não é uma tecnologia e sim uma metodologia que utiliza tecnologias não tão novas assim como XML e Javascript para fazer requisições ao servidor e com as informações retornadas modificar a página já carregada sem recarregar todo conteúdo novamente. E com isso economizar no tráfego de internet e melhorar a experiência do usuário.
Bom para entendermos como fazer uma requisição precisamos conhecer 2 tipos de requisição que o protocolo HTTP aceita:
GET: É o método mais comum: solicita algum recurso como um arquivo ou um script (qualquer dado que estiver identificado pelo URI) por meio do protocolo HTTP. O método GET é reconhecido por todos os servidores.
POST: Envia dados para serem processados (por exemplo, dados de um formulário HTML) para o recurso especificado. Os dados são incluídos no corpo do comando.
Vamos verificar a criação de um doc HTML para inserir os conteúdos básicos para depois alterarmos a página com a "chamada" requisição utilizando o jquery. Para isso vamos utilizar uma div. veja...
HTML Principal
1
2
3
4
5
6
7
8
9
10
<div id="carregando">Carregando</div>
<h1>Cabeçalho</h1>
<a href="conteudo1.php">Conteudo 1</a>
<a href="conteudo2.php">Conteudo 2</a>
<a href="conteudo3.php">Conteudo 3</a>
<a href="conteudo4.php">Conteudo 4</a>
<div id="conteudo"></div>
Ficaria assim...

<html>
<head>
<title>JS-AJAX</title>
</head>
<body>
<h1>MURAL</h1>
<a href="conteudo1.html">Conteudo 1</a>
<a href="conteudo2.html">Conteudo 2</a>
<a href="conteudo3.html">Conteudo 3</a>
<a href="conteudo4.html">Conteudo 4</a>
<div id="conteudo">Dados Originais...</div>
</body>
</html>

Como vimos não é nada diferente do que conhecemos, também precisamos das informações que estão em outras páginas de HTML,  os arquivos com os conteúdos que aparecem dentro do div #conteudo:

Devemos criar 4 páginas como mostra o documento html e cada um com seu conteúdo.

"conteudo1.html" com a estrutura abaixo:
<h1> Conteudo 1</h1>
<p>aqui o teste de conteúdo 1 irá aparecer</p>


"conteudo2.html" com a estrutura abaixo:
<h1> Conteudo 2</h1>
<p>aqui o teste de conteúdo 2 irá aparecer</p>


"conteudo3.html" com a estrutura abaixo:
<h1> Conteudo 3</h1>
<p>aqui o teste de conteúdo 3 irá aparecer</p>


"conteudo4.html" com a estrutura abaixo:
<h1> Conteudo 4</h1>
<p>aqui o teste de conteúdo 4 irá aparecer</p>

Agora podemos criar o script em Javascript com Jquery e ajax para "pegar os conteúdos" das páginas html 1 ou 2 ou 3 ou 4 e apresentá-los na página principal sem recarregar a página toda veja o script abaixo...

método GET:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    $("a").each(function() {
         var href = $(this).attr('href');
         $(this).attr('href','javascript:void(0)');
         $(this).click(function(){
              $('#conteudo').html("");
        
               $.get( href , function(data){
                      $('#conteudo').html(data);
                      
               });
              return null;
      });
   });
});
linha 1: cria uma função para o documento ativo;
linha 2: o método each verifica o objeto “a” (links) e cria uma função baseada nele, isto é, todo o "a" encontrado na página será utilizado para algo...
linha 3: cria uma variável href e passa para ela os atributos do tipo href
linha 4: a variável href recebe os parâmetros do link como atributos
linha 5: ao clicar no link na página principal, a variável pega os dados do endereço que sofre o clique
linha 6: depois do clique da função a variável pega os dados da página do link
linha 7: 
linha 8: retorna pela variável href os dados da página do link para a página principal com função
linha 9 : insere em "conteúdo" os dados que o href pegou na página de link
linha 10: 
linha 11: fecha a função
linha 12: retorna nada caso não encontre dados
linha 13: fecha a função
linha 14 e 15: fecha a função

O documento todo fica assim...


Não esqueça que precisa chamar os dados do js-squery para utilizar seus scripts...
e mais importante, as páginas precisam ser hospedadas para a mágica funcionar...
... hospede em easyphp como na aula abaixo...

http://academicotech.blogspot.com.br/2016/02/php-introducao.html

... e depois execute seu arquivo com a página principal...
... com o easyphp e as páginas hospedadas no alias...



... os resultados são assim...
...




Bom, o AJAX possui diversas funcionalidades, e estas são as mais utilizadas, pesquise e descubra ainda mais...


Pronto! Pronto!...

fonte:botecodigital, UFRJ, UFMS

Nenhum comentário: