slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
AJAX PowerPoint Presentation
Download Presentation
AJAX

Loading in 2 Seconds...

  share
play fullscreen
1 / 24
montana-serrano

AJAX - PowerPoint PPT Presentation

48 Views
Download Presentation
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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. AJAX Asynchronous JavaScript and XML

  2. Introdução • Disparidade entre aplicações desktop e web • Páginas são totalmente recarregadas • Necessidade de páginas web mais dinâmicas

  3. História do AJAX • Nomeado por Jesse James Garett, co-fundador da Adaptive Path • Inicialmente exclusivo do Internet Explorer 5, mas depois foi incorporado por outros navegadores

  4. Objetivo da técnica • Fazer o carregamento de uma parte de uma página web sem ter que carregá-la toda. • Criar páginas web mais dinâmicas.

  5. Quem usa

  6. Características • Não é uma tecnologia mas sim um agrupamento dessas. • Utiliza: • XMLHttpRequest object • JavaScript/DOM • CSS • XML

  7. XMLHttpRequest object • Originalmente construído pela Microsoft mas logo foi adotado pela Mozilla,Apple e Google. • Usado para trocar informações com o servidor de forma assíncrona.

  8. XMLHttpRequest object Apesar de ter XML no nome, pode ser usado para recuperar informações de vários tipos de dados.

  9. JavaScript/DOM JavaScript é uma linguagem de programação interpretada e orientada objetos mais conhecida como a linguagem de script da Web.

  10. JavaScript/DOM • Usado para a interação do usuário com a parte da página que ele quer que seja feito o carregamento. • Usado para mostrar o conteúdo processado pelo servidor.

  11. XML (eXtensible Markup Language) • XML é uma linguagem de marcação recomendada pela W3C para a criação de documentos com dados organizados hierarquicamente, tais como textos e banco de dados.

  12. XML(eXtensible Markup Language) Formato utilizado para fazer a troca de mensagens com o servidor.

  13. <?xml version="1.0" encoding="ISO-8859-1"?> <receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora"> <titulo>Pão simples</titulo> <ingredientes> <ingrediente quantidade="3" unidade="xícaras">Farinha</ingrediente> <ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente> <ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente> <ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente> </ingredientes> <instrucoes> <passo>Misture todos os ingredientes, e dissolva bem.</passo> <passo>Cubra com um pano e deixe por uma hora em um local morno.</passo> <passo>Misture novamente, coloque numa bandeja e asse num forno.</passo> </instrucoes> </receita> XML(eXtensible Markup Language)

  14. Funcionamento • É feito uma troca de informação entre a página web e o servidor em background, permitindo que seja carregado uma parte dessa página de maneira assíncrona.

  15. Exemplos • Página estática - a página inteira é carregada quando é feita uma requisição. • Ex: http://www.lucasrosa.com.br/ • Página dinâmica com Ajax – parte do conteúdo consegue ser carregado sem que a página inteira seja recarregada. • Exemplo:

  16. Funcionamento(continuação) • Browser – faz uma requisição HttpRequest • Browser – cria um objeto XMLHttpRequest • Servidor – trata essa requisição com os dados que devem ser devolvidos ao browser • Browser – processa essa informação de retorno do servidor usando JavaScript • Browser – carrega o conteúdo da requisição

  17. Um evento ocorre ... SERVIDOR Processa o HttpRequest Cria um response e envia os dados de volta para o navegador NAVEGADOR Cria um objeto XMLHttpRequest Envia um HttpRequest Internet Navegador Processa os dados retornados usando Javascript Atualiza conteúdo da página Internet

  18. Exemplo Implementado

  19. Ajax em JavaServer Faces • Diminuir o número de páginas • Evitar recarregar páginas ao máximo • Desenvolver as regras de navegação orientadas a estados e não a páginas.

  20. Notações e Frameworks • JSON (JavaScript Object Notation) • Dojo Toolkit • DWR (Direct Web Remoting) • GWT (Google Web Toolkit) • Integração com JavaServer Faces (JSF)

  21. Lados bons do Ajax • Redução de banda: • Não há necessidade de carregar a página inteira • Rapidez • Validação de dados

  22. Lados ruins do Ajax • O problema do botão “voltar” • Cliente (browser) sobrecarregado em alguns casos • Compatibilidade com smartphones

  23. Referências http://www.adaptivepath.com/ideas/ajax-new-approach-web-applicationshttp://www.apostilaz.com.br/baixar/ajax-web-20/http://imasters.com.br/artigo/10224/ajax/vantagens-e-desvantagens-do-uso-de-ajax-aspectos-praticos http://www.alexhopmann.com/xmlhttp.htm https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest http://www.rponte.com.br/2008/04/10/utilizando-ajax-com-jsf-de-maneira-eficiente/ http://www.atomicmicrosystems.com/Ajax.html