Pacote Web - Ajax

Amirton Chagashttp://amirton.wordpress.comamirton@proativasolucoes.com

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/ ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.

Problemas

Páginas podem ser dinâmicas A mudança de página não…

Enviar muito conteúdo não é uma boa idéia Tempo de carregamento excessivo Complexidade para manutenção

O que fazer?

O que é Ajax

AJAX! Asynchronous Javascript And XML

Requisições assíncronas a mais conteúdo

Respostas facilmente interpretadas

Não se limita a uma tecnologia É um conceito! Não é obrigatório nem o uso de Javascript, nem de

XML▪ Nem mesmo de chamadas assíncronas!

Exemplo:

SEM AJAX (...)

http://images.google.com

Hotmail

Google

COM AJAX

http://bing.com/images

GMail

iGoogle

Fotos no Orkut e Facebook

DOM

“É a maneira como JavaScript vê a página HTML e o estado do browser” Wikipedia

É a representação interna usada pelos browsers para armazenar e prover acesso à estrutura da página.

DOM Level 2 IE6+, FF 1.5+, Opera, Safari...

Manipulacao de DOM com jQuery

Função $ Retorna um objeto jQuery $(document)▪ Retorna o análogo a “document” de JavaScript

$(“div”)▪ Retorna todos os elementos <div> atualmente na DOM

$(“div.bkWt”)▪ Retorna todos os elementos <div class=“bkWt”> na DOM

$(“#IdElmt”)▪ Retorna o elemento de id IdElmt

$(“div, p, h2”)▪ Retorna todos os elementos div ou p ou h2.

Manipulacao de DOM com jQuery

.append() e .prepend() Insere o conteúdo passado como parâmetro DENTRO da tag,

depois ou antes (respectivamente) do conteúdo atual

.after(), .before() Insere o conteúdo passado como parâmetro depois ou antes,

FORA da tag.

.replaceWith() Troca a TAG (não apenas o conteúdo) pelo conteúdo passado

como parâmetro

.empty() Limpa o conteúdo da tag (limpa também eventos associados)

Manipulacao de DOM com jQuery

.children() Todos os nós filhos Pode-se passar restrições, como .children(“.txAzul”)▪ Só retorna os filhos de classe txAzul

.next() e .nextAll(), prev() e prevAll() Retorna o próximo e todos os próximos elementos de mesmo nível.

prev e prevAll fazem o mesmo, mas retornando os anteriores Também aceitam restrições

.siblings() Todos os nós de mesmo nível Também aceita restrições

Mais em: http://oscarotero.com/jquery/

Função de Callback

No mundo síncrono, uma chamada é feita após a outra, numa ordem pré-determinada

No mundo assíncrono, entre uma chamada e outra, podem acontecer várias outras... Callback é a função a ser executada

quando o método assíncrono terminar sua execução

Chamadas Assíncronas com jQuery

.load(url, [data], [callback]) Requisita um documento html para a url [data] são campos enviados como POST

$.get(url, [data], [callback], [type]) $.post(url, [data], [callback], [type])

Requisita uma resposta para a url (via get ou post, respectivamente)

[type] denota o tipo de resposta: "xml", "html", "script", "json", "jsonp", ou "text”

Chamada geral em jQuery

$.ajax(opções) Maior flexibilidade Maior controle▪ Funções de callback para:▪ Antes da requisição▪ Depois da requisição terminar com sucesso▪ Depois da requisição terminar com erro

Maior complexidade▪ Lida direto com o objeto XMLHttpRequest▪ Muitos parâmetros para setar▪ Na maioria dos casos, $.get, $.put ou .load já

bastam...

XMLHttpRequest

Idéia desenvolvida pela Microsoft Aprimorada pela Mozilla Foundation Padronizada posteriormente pelo W3C

Maneira de um script requisitar dados diretamente a um servidor web E receber a resposta em um formato conhecido▪ XML, no caso...

É usado por baixo dos panos em praticamente todas as APIs baseadas em Ajax jQuery é uma delas

XMLHttpRequest

Usar direto, sem APIs, é error-prone e complexo Não é impossível...▪ Precisa tomar cuidado com maneiras diferentes de

criar o objeto nos diferentes browsers▪ A manipulação também pode variar um pouco▪ Alguns códigos “místicos” podem surgir▪ As APIs como jQuery já fazem isso para você...

http://www.linhadecodigo.com.br/Artigo.aspx?id=922

Termo de Exoneração de Responsabilidade

A Licença Simplificada não é uma licença propriamente dita. Ela é apenas uma referência útil para entender a Licença Jurídica (a licença integral) - ela é uma expressão dos seus termos-chave que pode ser compreendida por qualquer pessoa. A Licença Simplifica em si não tem valor legal e seu conteúdo não aparece na licença integral.

O Creative Commons não é um escritório de advocacia e não presta serviços jurídicos. A distribuição, exibição ou inclusão de links para esta Licença Simplificada não estabelece qualquer relação advocatícia.