curso extjs 4 - aula 23: data package: jsonp proxy

35
Curso Ext JS 4 Data Package: JsonP Proxy

Upload: loiane-groner

Post on 29-Nov-2014

4.273 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

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

CursoExt JS 4

Data Package: JsonP Proxy

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

Agenda

• Introdução à JsonP

• JsonP Proxy com Reader

•Problemas com Writer

•Exemplo prático

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

Requisitos

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

Ext JS 4 SDK

Servidor (Apache)

Editor de Texto

Browser (Firefox c/ Firebug ou Chrome)

PHP + MySQL (ou outra linguagem)

Domínio Diferente

Page 5: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Page 6: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Page 7: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Page 8: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Page 9: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
Page 10: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy

O que é JsonP?

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

http://json-p.org/

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

Recebe

someCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "[email protected]" } ]});

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

Recebe

someCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "[email protected]" } ]});

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

Recebe

someCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "[email protected]" } ]});

Função Javascript com retorno JSON

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

Faz sentido?

<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>

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

Faz sentido?

<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>

Vai compilar?

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

Faz sentido?

<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>

Vai compilar? NÃO!

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

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

Envia

REQUEST_METODO == GET

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

Show me the code!

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

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

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

Obrigada!