Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Curso Ext JS 4Data Package: JsonP Proxy
Agenda• Introdução à JsonP• JsonP Proxy com Reader• Problemas com Writer• Exemplo prático
Requisitos
Ext JS 4 SDK          Servidor (Apache)           Editor de TextoBrowser (Firefox c/ Firebug ou Chrome)  PHP + MySQL (ou o...
O que é JsonP?
http://json-p.org/
http://json-p.org/Cross-Domain Ajax
http://json-p.org/     Cross-Domain AjaxSame-origin policy - browsers
Como Funciona no Ext?
Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
RecebesomeCallback({    contatos: [        {            id: 1,            nome: "Loiane Groner",            email: "contat...
RecebesomeCallback({    contatos: [        {            id: 1,            nome: "Loiane Groner",            email: "contat...
Recebe                   Função Javascript com retorno JSONsomeCallback({    contatos: [        {            id: 1,       ...
Mas... e XML?
Faz sentido?<script type="text/javascript">someCallback({    <contatos>        <id>1</id>        <nome>Loiane</nome>      ...
Faz sentido?<script type="text/javascript">someCallback({    <contatos>        <id>1</id>        <nome>Loiane</nome>      ...
Faz sentido?<script type="text/javascript">someCallback({    <contatos>        <id>1</id>        <nome>Loiane</nome>      ...
Vamos voltar...Mais um problema
Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>     REQUEST_METODO == GET
e POST,  PUT,DELETE?
Sorry,Não foi criado para isso!
Objetivo é buscar dados em outro            domínio
Show me the code!
Código Fonte da Aulahttps://github.com/loiane/curso-              extjs4
Link do Curso com todas as          aulas publicadashttp://www.loiane.com/2011/11/curso-de-extjs-4-                    gra...
http://amzn.com/1849516669http://www.packtpub.com/extjs-4-first-look/book
contato = { email: ‘curso@extjs4.com’, blog: ‘loiane.com’, facebook: ‘facebook.com/loianegroner’, twitter: ‘@loiane’, gith...
Obrigada!
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Upcoming SlideShare
Loading in …5
×

Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy

4,160 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy

  1. 1. Curso Ext JS 4Data Package: JsonP Proxy
  2. 2. Agenda• Introdução à JsonP• JsonP Proxy com Reader• Problemas com Writer• Exemplo prático
  3. 3. Requisitos
  4. 4. Ext JS 4 SDK Servidor (Apache) Editor de TextoBrowser (Firefox c/ Firebug ou Chrome) PHP + MySQL (ou outra linguagem) Domínio Diferente
  5. 5. O que é JsonP?
  6. 6. http://json-p.org/
  7. 7. http://json-p.org/Cross-Domain Ajax
  8. 8. http://json-p.org/ Cross-Domain AjaxSame-origin policy - browsers
  9. 9. Como Funciona no Ext?
  10. 10. Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
  11. 11. RecebesomeCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "contato@loiane.com" } ]});
  12. 12. RecebesomeCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "contato@loiane.com" } ]});
  13. 13. Recebe Função Javascript com retorno JSONsomeCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "contato@loiane.com" } ]});
  14. 14. Mas... e XML?
  15. 15. Faz sentido?<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>contato@loiane.com</email> <contatos>});</script>
  16. 16. Faz sentido?<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>contato@loiane.com</email> <contatos>});</script> Vai compilar?
  17. 17. Faz sentido?<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>contato@loiane.com</email> <contatos>});</script> Vai compilar? NÃO!
  18. 18. Vamos voltar...Mais um problema
  19. 19. Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
  20. 20. Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script>
  21. 21. Envia<scriptsrc="http://domainB.com/users?callback=someCallback"></script> REQUEST_METODO == GET
  22. 22. e POST, PUT,DELETE?
  23. 23. Sorry,Não foi criado para isso!
  24. 24. Objetivo é buscar dados em outro domínio
  25. 25. Show me the code!
  26. 26. Código Fonte da Aulahttps://github.com/loiane/curso- extjs4
  27. 27. Link do Curso com todas as aulas publicadashttp://www.loiane.com/2011/11/curso-de-extjs-4- gratuito/
  28. 28. http://amzn.com/1849516669http://www.packtpub.com/extjs-4-first-look/book
  29. 29. contato = { email: ‘curso@extjs4.com’, blog: ‘loiane.com’, facebook: ‘facebook.com/loianegroner’, twitter: ‘@loiane’, github: ‘loiane’, vimeo: ‘loiane’, youtube: ‘loianeg’ }
  30. 30. Obrigada!

×