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...
<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
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...
... 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:
Postar um comentário