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.