1. Curso
Ext JS 4
Data Package:
JsonP Proxy

2. Agenda
• Introdução à JsonP
• JsonP Proxy com Reader
• Problemas com Writer
• Exemplo prático

3. Requisitos

4. Ext JS 4 SDK
Servidor (Apache)
Editor de Texto
Browser (Firefox c/ Firebug ou Chrome)
PHP + MySQL (ou outra linguagem)
Domínio Diferente

10. O que é JsonP?

11. http://json-p.org/

12. http://json-p.org/
Cross-Domain Ajax

13. http://json-p.org/
Cross-Domain Ajax
Same-origin policy - browsers

14. Como Funciona no Ext?

15. Envia
<script
src="http://domainB.com/users?callback=someCallback"></
script>

16. Recebe
someCallback({
contatos: [
{
id: 1,
nome: "Loiane Groner",
email: "contato@loiane.com"
}
]
});

17. Recebe
someCallback({
contatos: [
{
id: 1,
nome: "Loiane Groner",
email: "contato@loiane.com"
}
]
});

18. Recebe
Função Javascript com retorno JSON
someCallback({
contatos: [
{
id: 1,
nome: "Loiane Groner",
email: "contato@loiane.com"
}
]
});

19. Mas... e XML?

20. Faz sentido?
<script type="text/javascript">
someCallback({
<contatos>
<id>1</id>
<nome>Loiane</nome>
<email>contato@loiane.com</email>
<contatos>
});
</script>

21. Faz sentido?
<script type="text/javascript">
someCallback({
<contatos>
<id>1</id>
<nome>Loiane</nome>
<email>contato@loiane.com</email>
<contatos>
});
</script>
Vai compilar?

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

23. Vamos voltar...
Mais um problema

24. Envia
<script
src="http://domainB.com/users?callback=someCallback"></
script>

25. Envia
<script
src="http://domainB.com/users?callback=someCallback"></
script>

26. Envia
<script
src="http://domainB.com/users?callback=someCallback"></
script>
REQUEST_METODO == GET

27. e POST,
PUT,
DELETE?

28. Sorry,
Não foi criado para isso!

29. Objetivo é buscar dados em outro
domínio

30. Show me the code!

31. Código Fonte da Aula
https://github.com/loiane/curso-
extjs4

32. Link do Curso com todas as
aulas publicadas
http://www.loiane.com/2011/11/curso-de-extjs-4-
gratuito/

33. http://amzn.com/
1849516669
http://www.packtpub.com/ext
js-4-first-look/book

34. contato = {
email: ‘curso@extjs4.com’,
blog: ‘loiane.com’,
facebook: ‘facebook.com/loianegroner’,
twitter: ‘@loiane’,
github: ‘loiane’,
vimeo: ‘loiane’,
youtube: ‘loianeg’
}

35. Obrigada!