Pacote Web - Ajax
description
Transcript of Pacote Web - Ajax
![Page 2: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/2.jpg)
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.
![Page 3: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/3.jpg)
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?
![Page 4: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/4.jpg)
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!
![Page 5: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/5.jpg)
Exemplo:
SEM AJAX (...)
http://images.google.com
Hotmail
COM AJAX
http://bing.com/images
GMail
iGoogle
Fotos no Orkut e Facebook
![Page 6: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/6.jpg)
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...
![Page 7: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/7.jpg)
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.
![Page 8: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/8.jpg)
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)
![Page 9: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/9.jpg)
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/
![Page 10: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/10.jpg)
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
![Page 11: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/11.jpg)
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”
![Page 12: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/12.jpg)
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...
![Page 13: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/13.jpg)
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
![Page 14: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/14.jpg)
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
![Page 15: Pacote Web - Ajax](https://reader036.fdocumentos.com/reader036/viewer/2022082423/56815171550346895dbfa6c4/html5/thumbnails/15.jpg)
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.