Carregando Conteúdo Estático com AJAX

Olá pessoal, no tutorial desta semana vou mostrar como carregar um conteúdo estático vindo de outro arquivo utilizando AJAX. A vantagem do AJAX é que a requisição é atendida sem dar refresh na página. Ao clicar no link, é passado um parâmetro para a página .php, nesta página é feita uma comparação e é retornado o resultado para página HTML.

Por Programação Pular para comentários

Ol? pessoal, no tutorial desta semana vou mostrar como carregar um conte?do est?tico vindo de outro arquivo utilizando AJAX. A vantagem do AJAX ? que a requisi??o ? atendida sem dar refresh na p?gina. Ao clicar no link, ? passado um par?metro para a p?gina .php, nesta p?gina ? feita uma compara??o e ? retornado o resultado para p?gina HTML.

CSS




HTML

Carregando Conteúdo Estático com AJAX


SCRIPT



CONTEUDO.PHP


Carregando Conteúdo Estático com AJAXCarregando Conteúdo Estático com AJAXCarregando Conteúdo Estático com AJAX

Sobre a empresa...
Nossa empresa ? espacializada em vendas produtos importados.



Primeira coisa: n?o se esque?a de adicionar o Jquery na p?gina.


Entendendo o HTML


Primeiramente vem uma DIV com a class menu e dentro dela uma lista que ir? formar os menus um do lado do outro. Depois dela, h? uma DIV com a class reset. Essa DIV serve somente para quebrar a flutua??o dos menus, j? que usamos float:left para que os li?s ficassem um do lado da outro.
Logo abaixo, uma DIV com a class carregando. Dentro dela h? um gif animado que aparecer? enquanto a requisi??o estiver sendo processada no arquivo .php.

E finalmente, uma DIV com a class conteudo, que receber? o resultado da requisi??o, ou seja, o conte?do buscado do arquivo .php.


Entendendo o CSS


O CSS vou detalhar de uma forma r?pida j? que ele n?o ? o foco deste tutorial. Vamos l?: A class reset ? somete para quebrar o float utilizado nos li?s que formam o menu. Retiramos os espa?amentos externos e internos da DIV que contem a class menu. Os li?s que est?o dentro da DIV com a class menu v?o receber algumas formata?es de fonte, borda, cor de fundo e a flutua??o a esquerda pra ficar um do lado do outro. Os links dos li?s que est?o dentro da DIV com a class menu v?o receber algumas formata?es de fonte. A DIV com a class carregando recebe uma formata??o de espa?amento interno e que ficar? oculta. Ela s? aparece enquanto a requisi??o est? sendo processada. A DIV com a class conte?do tamb?m recebe algumas formata?es de fonte e que ficar? oculta. Ela s? aparece depois que a requisi??o ? completada e o conte?do vindo do arquivo .php ? exibido.


Entendendo o SCRIPT


A primeira linha identifica o clique no link existente em um li dentro da DIV com a a class menu:
$(".menu ul li a").click(function(){

Quando ? dado o clique, ? armazenado em uma vari?vel, o valor do atributo HREF deste link clicado. Vamos usar como exemplo o valor produtos que esta no HREF do primeiro li (produtos) :
link=$(this).attr("href")

(dentro de link est? armazenado o atributo HREF do link que eu cliquei)
(dentro de link est? armazenado produtos agora)

Na pr?xima linha come?a a requisi??o Ajax:
$.ajax(

Os par?metros passados para essa requisi??o s?o: O m?todo utilizado:
method:"get",

Nesse m?todo dizemos que algum valor necess?rio para a resposta (retorno) ser? passado via URL. Para qual p?gina ser? mandado os dados dessa requisi??o para serem analizados? Est? descrito na pr?xima linha:
url:"conteudo.php",

Como ele sabe qual conte?do exibir, isso ? dado pela linha abaixo:
data:"pag="+link,

(pag=link ent?o pag=produtos, vai retornar o conte?do de produtos) A linha abaixo define o que vai acontecer antes dos dados serem mandados para a p?gina .php.
beforeSend:function(){
    $(".carregando").show()
},

A DIV com a class carregando ser? exibida. Nesta linha ? definido o que acontecer? quando a requisi??o for completada:
complete:function(){
    $(".carregando").hide()
},

A DIV com a class carregando ? oculta novamente. Na pr?xima linha nos diz o que acontecer? quando a requisi??o for um sucesso, ou seja, quando a resposta estiver pronta para ser mostrada:
success:function(html){
    $(".conteudo").html(html).show("slow")
}

A DIV com a class conte?do ? exibida e dentro dela o conte?do encontrado de acordo com o par?metro passado na vari?vel link. No nosso exemplo, o conte?do relativo a produtos.
OBS: esse HTML, ? um local tempor?rio onde a resposta da requisi??o ? armazenada. A ?ltima linha ? somente para anular o refresh quando um link ? clicado:
return false



Entendendo o conte?do.php


Na primeira linha, ? armazenado na vari?vel $pagina o que estiver dentro de pag. Lembrando que o conte?do desta vari?vel foi passado via URL no script anterior (pag=link). No nosso exemplo ? produtos, ent?o est? assim $pagina=produtos.



Depois disso ele come?a a comparar:

Carregando Conteúdo Estático com AJAXCarregando Conteúdo Estático com AJAXCarregando Conteúdo Estático com AJAX



Se o que estiver em $pagina for igual a produtos ent?o ser? retornado (exibido dentro da DIV com a class conteudo) o que estiver dentro das { }, ou seja, ser?o exibidas as imagens.

Sobre a empresa...
Nossa empresa ? espacializada em vendas produtos importados.



Se o que estiver em $pagina for igual a sobre ent?o ser? retornado (exibido dentro da DIV com a class conteudo) o que estiver dentro das { }, ou seja, ser? exibido o texto. No nosso exemplo o que est? dentro de p?gina ? produtos, ent?o exibir? as imagens. Ao clicar em sobre, ser? armazenado em $pagina o valor sobre e conseq?entemente exibir? o texto. Bem pessoal, esse foi o tutorial de hoje...
At? mais.

Mais sobre: AJAX, jquery, script
Compartilhe com seus amigos:
Suelen Braga
Suelen Braga Sou web designer há 1 ano e meio, adoro experimentar algumas animações com JQuery, JQuery e AJAX, PHP e passar às outras pessoas, ajudando no dia-a-dia do desenvolvedor web. Estou estudando também sobre HTML5 e CCS3.
FACEBOOK // TWITTER: @suelenbraga2006
Quer conversar com o(a) Suelen, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(14,46%)
10(55,60%)
15(11,61%)
20(9,57%)
26(8,76%)