1 / 15

Pacote Web - Ajax

Amirton Chagas http://amirton.wordpress.com amirton@proativasolucoes.com. Pacote Web - Ajax.

lan
Download Presentation

Pacote Web - Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Amirton Chagas http://amirton.wordpress.com amirton@proativasolucoes.com Pacote Web - Ajax

  2. Este trabalho está licenciado sob uma Licença CreativeCommons 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 CreativeCommons, 171 SecondStreet, Suite 300, San Francisco, California 94105, USA.

  3. Problemas • Páginaspodem ser dinâmicas • A mudança de páginanão… • Enviarmuitoconteúdonão é uma boa idéia • Tempo de carregamentoexcessivo • Complexidadeparamanutenção • O quefazer?

  4. O que é Ajax • AJAX! • Asynchronous JavascriptAnd XML • Requisiçõesassíncronas a maisconteúdo • Respostasfacilmenteinterpretadas • Não se limita a umatecnologia • É um conceito! • Não é obrigatórionem o uso de Javascript, nem de XML • Nemmesmo de chamadasassíncronas!

  5. Exemplo: Sem Ajax (...) Com ajax http://bing.com/images GMail iGoogle Fotos no Orkut e Facebook • http://images.google.com • Hotmail • Google

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

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

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

  9. Manipulacao de DOM com jQuery • .children() • Todos osnó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/

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

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

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

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

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

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

More Related