0
PHP e AJAX: do Request ao Framework Rafael Machado Dohms Coordenação PHPDF
Licença e distribuição <ul><li>Esta palestra esta disponibilizada sob a licença Creative Commons Atribuição-Uso Não-Comerc...
Conteúdo <ul><li>Pré-Requisitos </li></ul><ul><li>O que é AJAX? </li></ul><ul><ul><li>Como funciona? </li></ul></ul><ul><u...
Pré-Requisitos <ul><li>Javascript </li></ul><ul><li>DOM (Document Object Model) </li></ul><ul><li>Javascript com XML </li>...
Quem sou? <ul><li>Rafael Machado Dohms  é Engenheiro da Computação (DF-13735/D) formado pelo Centro Universitário de Brasí...
Objetivo <ul><li>Apresentar a técnica de programação conhecida como AJAX, apresentando sua forma de trabalho e demonstrand...
AJAX- O que é? <ul><li>Não é uma tecnologia nova! </li></ul><ul><ul><li>Nova forma de se utilizar tecnologias já consolida...
Como funciona AJAX? Apache IIS Lighthttp... PHP ASP JSP Ruby ...
O XMLHttpRequest <ul><li>Histórico </li></ul><ul><ul><li>2000 - Criado pela Microsoft para o Outlook WebAccess </li></ul><...
XMLHttpRequest <ul><li>Propriedades </li></ul><ul><ul><li>readyState   </li></ul></ul><ul><ul><ul><li>0 = uninitialized (n...
XMLHttpRequest <ul><li>Métodos </li></ul><ul><ul><li>open (&quot;method&quot;,&quot;URL&quot;,async,&quot;uname&quot;,&quo...
Onde usar e onde não? <ul><li>Use: </li></ul><ul><ul><li>Auto-complete </li></ul></ul><ul><ul><li>Validação complexa de da...
Quem já usa? <ul><li>Google </li></ul><ul><ul><li>GMail </li></ul></ul><ul><ul><li>Google Calendar </li></ul></ul><ul><ul>...
Caminhos ao Aprendizado <ul><li>Sem utilizar bibliotecas/frameworks </li></ul><ul><ul><li>Vantagens: </li></ul></ul><ul><u...
Prática 1: no braço <ul><li>Objetivo </li></ul><ul><ul><li>Mural de recados </li></ul></ul><ul><li>Funcionalidades </li></...
Prática 1
Prática 1 <ul><li>Funções Javascript </li></ul><ul><ul><li>criaRequest </li></ul></ul><ul><ul><ul><li>Cria uma instância d...
Prática 1 <ul><li>Funções PHP </li></ul><ul><ul><li>gravaDepoimento </li></ul></ul><ul><ul><ul><li>Recebe Dados do POST </...
Prática 1 <ul><li>Retorno XML </li></ul><?xml version= &quot;1.0&quot;  encoding= &quot;iso-8859-1&quot;  ?> <response> <e...
Prática 1
O XAJAX <ul><li>O que é? </li></ul><ul><ul><li>Biblioteca em PHP, que implementa as funções javascript necessárias </li></...
Prática 2: XAJAX <ul><li>Objetivo </li></ul><ul><ul><li>Mural de recados </li></ul></ul><ul><li>Funcionalidades </li></ul>...
Prática 2
Prática 2 <ul><li>Funções XAJAX </li></ul><ul><ul><li>gravaDepoimento </li></ul></ul><ul><ul><ul><li>Recebe os dados </li>...
Outras estradas e Comentários <ul><li>Bibliotecas </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><ul><li>Prototyp...
AJAX com JSON <ul><li>JSON: Javascript Object Notation </li></ul><ul><ul><li>Ganhou muito espaço recentemente </li></ul></...
Contato <ul><li>Obrigado! </li></ul><ul><li>Aproveitem o evento </li></ul><ul><li>Blog </li></ul><ul><ul><li>www.rafaeldoh...
Upcoming SlideShare
Loading in...5
×

PHP e AJAX: do Request ao Framework

5,184

Published on

Plaestra atualizada para o PHP Conference 2007

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,184
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
153
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "PHP e AJAX: do Request ao Framework"

  1. 1. PHP e AJAX: do Request ao Framework Rafael Machado Dohms Coordenação PHPDF
  2. 2. Licença e distribuição <ul><li>Esta palestra esta disponibilizada sob a licença Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 3.0 Genérica </li></ul><ul><li>Você pode: </li></ul><ul><ul><li>copiar, distribuir, exibir e executar a obra </li></ul></ul><ul><ul><li>criar obras derivadas </li></ul></ul><ul><li>Sob as seguintes condições: </li></ul><ul><ul><li>Atribuição . Você deve dar crédito ao autor original, da forma especificada pelo autor ou licenciante. </li></ul></ul><ul><ul><li>Uso Não-Comercial . Você não pode utilizar esta obra com finalidades comerciais. </li></ul></ul><ul><ul><li>Compartilhamento pela mesma Licença . Se você alterar, transformar, ou criar outra obra com base nesta, você somente poderá distribuir a obra resultante sob uma licença idêntica a esta. </li></ul></ul><ul><li>http://creativecommons.org/licenses/by-nc-sa/3.0/ </li></ul>
  3. 3. Conteúdo <ul><li>Pré-Requisitos </li></ul><ul><li>O que é AJAX? </li></ul><ul><ul><li>Como funciona? </li></ul></ul><ul><ul><li>O Objeto XMLHttpRequest </li></ul></ul><ul><li>Onde devo usar? </li></ul><ul><li>Quem está usando? </li></ul><ul><li>Caminhos para o aprendizado </li></ul><ul><li>Prática 1: no braço </li></ul><ul><li>Prática 2: XAJAX </li></ul><ul><li>Outras soluções e comentários </li></ul>
  4. 4. Pré-Requisitos <ul><li>Javascript </li></ul><ul><li>DOM (Document Object Model) </li></ul><ul><li>Javascript com XML </li></ul><ul><li>PHP com XML </li></ul><ul><li>MySQL e conexão com Banco de Dados </li></ul><ul><li>Noções de OO </li></ul>
  5. 5. Quem sou? <ul><li>Rafael Machado Dohms é Engenheiro da Computação (DF-13735/D) formado pelo Centro Universitário de Brasília, natural de Porto Alegre/RS. Atua na área de desenvolvimento e implementação de projetos de sistemas web-based, e é Analista de Sistemas no Ministério do Meio Ambiente. </li></ul><ul><li>8 anos de experiência em PHP </li></ul><ul><li>Membro da coordenação do PHPDF </li></ul>
  6. 6. Objetivo <ul><li>Apresentar a técnica de programação conhecida como AJAX, apresentando sua forma de trabalho e demonstrando como aproveitar a biblioteca XAJAX. </li></ul>
  7. 7. AJAX- O que é? <ul><li>Não é uma tecnologia nova! </li></ul><ul><ul><li>Nova forma de se utilizar tecnologias já consolidadas: CSS, DOM, JS e o XMLHttpRequest </li></ul></ul><ul><li>Asyncronous Javascript And XML </li></ul><ul><ul><li>Envio assíncrono de dados </li></ul></ul><ul><ul><li>Grandes por míudos: </li></ul></ul><ul><ul><ul><li>Enviar e receber dados novos sem recarregar a página (background) </li></ul></ul></ul>
  8. 8. Como funciona AJAX? Apache IIS Lighthttp... PHP ASP JSP Ruby ...
  9. 9. O XMLHttpRequest <ul><li>Histórico </li></ul><ul><ul><li>2000 - Criado pela Microsoft para o Outlook WebAccess </li></ul></ul><ul><ul><li>2002 – Incorporado no Mozilla </li></ul></ul><ul><ul><li>2006 – Publicado o primeiro Draft na W3C </li></ul></ul><ul><ul><ul><li>http://www.w3.org/TR/XMLHttpRequest/ </li></ul></ul></ul>
  10. 10. XMLHttpRequest <ul><li>Propriedades </li></ul><ul><ul><li>readyState </li></ul></ul><ul><ul><ul><li>0 = uninitialized (não inicializado) </li></ul></ul></ul><ul><ul><ul><li>1 = opened (aberto) </li></ul></ul></ul><ul><ul><ul><li>2 = headers_received (cabeçalhos recebidos) </li></ul></ul></ul><ul><ul><ul><li>3 = loading (carregando) </li></ul></ul></ul><ul><ul><ul><li>4 = done (pronto) </li></ul></ul></ul><ul><ul><li>responseText </li></ul></ul><ul><ul><li>responseXML </li></ul></ul><ul><ul><li>Status (200,404,403...) </li></ul></ul><ul><ul><li>statusText (Not found…) </li></ul></ul><ul><ul><li>onreadystatechange -- evento </li></ul></ul>
  11. 11. XMLHttpRequest <ul><li>Métodos </li></ul><ul><ul><li>open (&quot;method&quot;,&quot;URL&quot;,async,&quot;uname&quot;,&quot;pswd&quot;) </li></ul></ul><ul><ul><ul><li>Ex: open(“POST”,”arquivo.php”,true); </li></ul></ul></ul><ul><ul><li>setRequestHeader (&quot;label&quot;,&quot;value&quot;) </li></ul></ul><ul><ul><li>send (content) </li></ul></ul><ul><ul><li>getResponseHeader(&quot;headername&quot;) </li></ul></ul><ul><ul><li>getAllResponseHeaders() </li></ul></ul><ul><ul><li>abort() </li></ul></ul>
  12. 12. Onde usar e onde não? <ul><li>Use: </li></ul><ul><ul><li>Auto-complete </li></ul></ul><ul><ul><li>Validação complexa de dados </li></ul></ul><ul><ul><li>Criação de subitens de um item maior </li></ul></ul><ul><ul><li>Carregar dados externos de acordo com parâmetros em tempo real </li></ul></ul><ul><ul><li>Validação/Processamento de dados confiávies </li></ul></ul><ul><li>Não use: </li></ul><ul><ul><li>Navegação </li></ul></ul>
  13. 13. Quem já usa? <ul><li>Google </li></ul><ul><ul><li>GMail </li></ul></ul><ul><ul><li>Google Calendar </li></ul></ul><ul><ul><li>Google Maps </li></ul></ul><ul><li>Sistemas </li></ul><ul><ul><li>De votação </li></ul></ul><ul><ul><li>De Cálculo de Transporte </li></ul></ul>
  14. 14. Caminhos ao Aprendizado <ul><li>Sem utilizar bibliotecas/frameworks </li></ul><ul><ul><li>Vantagens: </li></ul></ul><ul><ul><ul><li>Maio domínio da ferramenta </li></ul></ul></ul><ul><ul><ul><li>Maior controle (como e onde) </li></ul></ul></ul><ul><ul><li>Desvantagens </li></ul></ul><ul><ul><ul><li>Tempo e esforço </li></ul></ul></ul><ul><li>Utilizando bibliotecas/frameworks </li></ul><ul><ul><li>Vantagens </li></ul></ul><ul><ul><ul><li>Produtividade acelerada </li></ul></ul></ul><ul><ul><ul><li>JavaScript opcional </li></ul></ul></ul><ul><ul><ul><li>Menos pré-requisitos </li></ul></ul></ul><ul><ul><li>Desvantagem </li></ul></ul><ul><ul><ul><li>Refém da biblioteca </li></ul></ul></ul><ul><ul><ul><li>Pouco conhecimento do “por trás das cortinas” </li></ul></ul></ul>
  15. 15. Prática 1: no braço <ul><li>Objetivo </li></ul><ul><ul><li>Mural de recados </li></ul></ul><ul><li>Funcionalidades </li></ul><ul><ul><li>Adição de mensagens </li></ul></ul><ul><ul><li>Visualização de mensagens </li></ul></ul><ul><li>Material </li></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>Base de dados </li></ul></ul>O browser FireFox possui uma extensão (componente) chamado FireBug que ajuda muito a debugar sites com AJAX, pois mostra todas requisições feitas, o que foi enviado e o que foi recebido
  16. 16. Prática 1
  17. 17. Prática 1 <ul><li>Funções Javascript </li></ul><ul><ul><li>criaRequest </li></ul></ul><ul><ul><ul><li>Cria uma instância do objeto XmlHttpRequest </li></ul></ul></ul><ul><ul><li>enviaDados() </li></ul></ul><ul><ul><ul><li>Reúne os dados </li></ul></ul></ul><ul><ul><ul><li>Usa o Request para enviar os dados por POST </li></ul></ul></ul><ul><ul><ul><li>Define função de retorno </li></ul></ul></ul><ul><ul><li>recebeDados() </li></ul></ul><ul><ul><ul><li>Verifica estado </li></ul></ul></ul><ul><ul><ul><li>Recebe valores </li></ul></ul></ul><ul><ul><ul><li>Altera DOM </li></ul></ul></ul>
  18. 18. Prática 1 <ul><li>Funções PHP </li></ul><ul><ul><li>gravaDepoimento </li></ul></ul><ul><ul><ul><li>Recebe Dados do POST </li></ul></ul></ul><ul><ul><ul><li>Grava no banco </li></ul></ul></ul><ul><ul><li>montaTemplate </li></ul></ul><ul><ul><ul><li>Monta template </li></ul></ul></ul><ul><ul><ul><li>Monta XML de resposta </li></ul></ul></ul><ul><ul><ul><li>Retorna dados </li></ul></ul></ul>
  19. 19. Prática 1 <ul><li>Retorno XML </li></ul><?xml version= &quot;1.0&quot; encoding= &quot;iso-8859-1&quot; ?> <response> <erro> 0/1 </erro> <item id= &quot;1&quot; > Retorno em HTML ou Texto </item> </response>
  20. 20. Prática 1
  21. 21. O XAJAX <ul><li>O que é? </li></ul><ul><ul><li>Biblioteca em PHP, que implementa as funções javascript necessárias </li></ul></ul><ul><li>Onde? </li></ul><ul><ul><li>http://www.xajaxproject.org/ </li></ul></ul>
  22. 22. Prática 2: XAJAX <ul><li>Objetivo </li></ul><ul><ul><li>Mural de recados </li></ul></ul><ul><li>Funcionalidades </li></ul><ul><ul><li>Adição de mensagens </li></ul></ul><ul><ul><li>Visualização de mensagens </li></ul></ul><ul><ul><li>Remoção </li></ul></ul><ul><li>Material </li></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>XAJAX </li></ul></ul><ul><ul><li>Base de dados </li></ul></ul>
  23. 23. Prática 2
  24. 24. Prática 2 <ul><li>Funções XAJAX </li></ul><ul><ul><li>gravaDepoimento </li></ul></ul><ul><ul><ul><li>Recebe os dados </li></ul></ul></ul><ul><ul><ul><li>Validação dos dados </li></ul></ul></ul><ul><ul><ul><li>Insere no banco </li></ul></ul></ul><ul><ul><ul><li>Gera retorno </li></ul></ul></ul><ul><ul><li>delDepoimento </li></ul></ul><ul><ul><ul><li>Recebe id do depoimento </li></ul></ul></ul><ul><ul><ul><li>Deleta do banco </li></ul></ul></ul><ul><ul><ul><li>Define ações javascript </li></ul></ul></ul>
  25. 25. Outras estradas e Comentários <ul><li>Bibliotecas </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><ul><li>Prototype, DoJo, JQuery </li></ul></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><ul><li>SAJAX (http://www.modernmethod.com/sajax/) </li></ul></ul></ul><ul><ul><ul><li>PEAR::HTML_AJAX (http://pear.php.net/package/HTML_AJAX) </li></ul></ul></ul><ul><ul><ul><li>Xajax (http://www.xajaxproject.org/) </li></ul></ul></ul><ul><li>Soluções </li></ul><ul><ul><li>Javascript Remote Invocation </li></ul></ul><ul><ul><li>XML RPC </li></ul></ul><ul><ul><li>Flash Remoting </li></ul></ul><ul><li>Segurança?? </li></ul>
  26. 26. AJAX com JSON <ul><li>JSON: Javascript Object Notation </li></ul><ul><ul><li>Ganhou muito espaço recentemente </li></ul></ul><ul><ul><li>Implementado nativamente no PHP 5.2.1 </li></ul></ul><ul><ul><ul><li>json_encode e json_decode </li></ul></ul></ul><ul><ul><li>Processamento mais ágil </li></ul></ul>{response: {erro: 0 , item: { id: 1 , texto: “Retorno em Texto ou HTML” } } Leitura: alert (obj.response.erro); //Alerta 0 {response: {erro: 0 , itens: [{ id: 1 , texto: “primeiro” }, { id: 2 , texto: “segundo” }] } Leitura: alert (obj.response.itens[1].texto); //Alerta “segundo”
  27. 27. Contato <ul><li>Obrigado! </li></ul><ul><li>Aproveitem o evento </li></ul><ul><li>Blog </li></ul><ul><ul><li>www.rafaeldohms.com.br </li></ul></ul><ul><li>Email </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Links </li></ul><ul><ul><li>FireFox : http://www.getfirefox.com/ </li></ul></ul><ul><ul><li>FireBug : http:// www.getfirebug.com/ </li></ul></ul><ul><ul><li>Xajax : http://www.xajaxproject.org/ </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×