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
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.

CSS




HTML



SCRIPT



CONTEUDO.PHP


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:



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.

Leia também: Portfolio image slider com CSS e JQuery. Acompanhe as últimas notícias de tecnologia aqui no Oficina da Net. Sempre trazendo conteúdos novos e produtos interessantes.

Compartilhe com seus amigos:
Comentários:
Carregar comentários