CursoExt JS 4

Data 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 Texto

Browser (Firefox c/ Firebug ou Chrome)

PHP + MySQL (ou outra linguagem)

Domínio Diferente

O que é JsonP?

http://json-p.org/

Cross-Domain Ajax

http://json-p.org/

Cross-Domain Ajax

http://json-p.org/

Same-origin policy - browsers

Como Funciona no Ext?

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

Envia

Recebe

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

Recebe

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

Recebe

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

Função Javascript com retorno JSON

Mas... e XML?

Faz sentido?

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

Faz sentido?

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

Vai compilar?

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!

Vamos voltar...Mais um problema

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

Envia

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

Envia

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

Envia

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!

https://github.com/loiane/curso-extjs4

Código Fonte da Aula

http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/

Link do Curso com todas as aulas publicadas

http://amzn.com/1849516669

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

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

Obrigada!