Use A Cabeça jQuery

este capítulo é novo 291

Uma pitada de Ajax, uma gota

de jQuery e sete xícaras de

creme de leite. Tem certeza

de que você escreveu essa

receita certo, querido?

8

jQuery e Ajax

Por favor, passe os dados

Usar jQuery para fazer truques legais com CSS e DOM é divertido,

mas logo você precisará ler informações (ou dados) de um servidor e exibi-las.

Talvez você até tenha de atualizar pequenas partes da página com as informações

do servidor, sem ter de recarregar a página. É aí que entra o Ajax. Combinado com

jQuery e JavaScript, ele pode fazer exatamente isso. Neste capítulo, aprenderemos

como jQuery faz para realizar chamadas do Ajax com o servidor e o que ele pode

fazer com as informações retornadas.

BOOK - UCjQuery - PRODUTO FINAL.indb 291 16/05/2013 10:50:31

292 Capítulo 8

aloha dados em tempo real!

De: Marketing da WebCorps Weblândia

Assunto: Página de resultados da 42ª Corrida Anual Bit to Byte

Olá, Equipe de Web Design,

Como todos vocês estão cientes, todo ano patrocinamos a Corrida Anual de 10km da Weblândia,

fornecendo a página de resultados da corrida. Mas a nossa página está bem desatualizada,

pois só a atualizamos depois que todos os resultados saem. As pessoas querem gratificação

instantânea e, com o Twitter e o Facebook, o pessoal que participa da corrida está nos

superando, dando resultados em tempo real.

Então temos um desafio para você com uma bela recompensa. Se puder atualizar, até a semana

que vem, nossa página de resultados da Weblândia, para que nos dê resultado em tempo real,

você poderá nos encontrar na seção VIP no final da corrida. (Ah, nós mencionamos que a corrida

é em Maui este ano?)

Veja o que precisamos:

1) A página deve fornecer a opção de mostrar os corredores masculinos ou femininos, ou todos

os participantes de uma vez.

2) Ela deve fornecer atualizações automáticas enquanto os corredores atravessam a linha de

chegada.

3) As pessoas não devem ter de atualizar a página conforme os resultados são atualizados.

4) Finalmente, queremos indicar na página quando ela foi atualizada e a frequência das

atualizações e permitir que as pessoas tenham a capacidade de começar e parar as atualizações

se quiserem.

Não ficará muito diferente da página do ano passado; portanto, seria um bom lugar para

começar. Esse evento é grande, mal podemos esperar para ver o que você conseguirá!

Dionah C. Housney

Diretora de Marketing

MegaCorp Weblândia

A corrida deste ano será em Maui,

portanto, reserve já a sua vaga!

Corrida Anual de

10km Bit to Byte

Corrida Anual de

10km Bit to Byte

Traga a Corrida Bit to Byte para este século

Parece que a

equipe de web já

está pronta para

ir para o

Havaí... acho

que está na

hora de

entender

isso aqui!

Cara, Maui! Será maravilhoso se

conseguirmos ir para a

festa VIP!

BOOK - UCjQuery - PRODUTO FINAL.indb 292 16/05/2013 10:50:33

você está aqui  293

jQuery e Ajax

Configurando um plugin

Os plugins são extensões para a base da

biblioteca JavaScript que melhoram a

funcionalidade ou simplificam funções

específicas ou tarefas. No exemplo acima,

combinando com nossa CSS, o plugin

idTabs converte nosso elemento ul em

abas clicáveis e diz ao links a em nosso lis

quais elementos div mostrar quando eles

são clicados. Esse plugin específico nos

dá uma estrutura de navegação fácil de

usar em nossa página; portanto, podemos

manter tipos diferentes de informação

visualmente separados, mas, ainda assim,

usar a mesma área de exibição.

Analisando a página do ano passado

Vamos dar uma olhada na página do ano passado para ver como ela foi configurada e como

ficou, para podermos entender melhor o que está sendo pedido pelo departamento de

marketing.

Essas abas foram

criadas por um

plugin (espere um

pouco para saber

mais sobre isso...).

Esse é o resultado

da função getTime.

Os dados da

corrida são

gravados no código

da página depois

que a corrida

termina.

Não se preocupe

muito com o plugin.

Os plugins fornecem

funcionalidade

adicional para a

biblioteca padrão do

jQuery. Veremos mais sobre eles

no Capítulo 10, mas, por enquanto,

vamos ver o que esse plugin pode

fazer para acelerar nosso projeto...

BOOK - UCjQuery - PRODUTO FINAL.indb 293 16/05/2013 10:50:34