JSONP

Also known as JSON with Padding

thumb | right | alt=Graphical logo for JSONP | Graphical logo for JSONP JSONP, or JSON-P (JSON with Padding), is a JavaScript technique for requesting data via the HTML element. It was proposed by Bob Ippolito in 2005. JSONP enables sharing of data bypassing same-origin policy, which disallows running JavaScript code to read media DOM elements or XMLHttpRequest data fetched from outside the page's originating site. The originating site is indicated by a combination of URI scheme, hostname, and port number.

Article · Português

JSONP ou "JSON with padding" é um complemento ao formato de dados JSON. Ele provê um método para enviar requisições de dados de um servidor para um domínio diferente, uma coisa proibida pelos navegadores típicos por causa da Política de mesma origem. Com a Política de mesma origem, uma página servida de server1.example.com não pode normalmente se conectar ou se comunicar com servidores diferentes de server1.example.com. Uma exceção é a tag HTML <script></code>. Explorando a política aberta para a tag <code><script></code>, algumas páginas usam a tag para receber código <a href="/wiki/JavaScript" title="JavaScript">Javascript</a> que opera com dados em formato JSON de outra origem gerados dinamicamente. Esse padrão de uso é conhecido com JSONP. Requisições de JSONP não trazem JSON, mas código Javascript arbitrário. Eles são executados pelo <a href="/wiki/Interpretador" title="Interpretador">interpretador</a> Javascript, e não parseados pelo parser JSON.Tem sido levantadas algumas críticas ao JSONP. <a href="/wiki/Cross-origin_resource_sharing" title="Cross-origin resource sharing">Cross-Origin Resource Sharing</a> é um método mais recente de obter dados de um servidor num domínio diferente, que lida com alguma dessas críticas.<meta property="mw:PageProp/toc" /><h2>Como funciona[<a href="/w/index.php?title=JSONP&veaction=edit&section=1" class="mw-editsection-visualeditor" title="Editar secção: Como funciona">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=1" title="Editar secção: Como funciona">editar código-fonte</a>]</h2>Para ver como esse pattern funciona, considere uma requisição a uma <a href="/wiki/URL" title="URL">URL</a> que retorna um documento JSON. Um programa Javascript pode fazer a requisição dessa URL por <a href="/wiki/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, por exemplo. Suponha que uma URL é <code>http://server2.example.com/RetrieveUser?UserId=xxx</code>. Suponha que userID de Foo é 1234. Um navegador requerendo a URL <code>http://server2.example.com/RetrieveUser?UserId=1234</code>, passando o userID de Foo, pode receber algo como:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>{"Name": "Foo", "Id" : 1234, "Rank": 7}</pre></div>Esses dados em formato JSON podem ser dinamicamente gerados, de acordo com os parâmetros passados na URL.Agora imagine especificar uma URL que retorna JSON como um atributo src para um elemento <a href="/wiki/HTML_element#script_tag" class="mw-redirect" title="HTML element"><code><script></code></a>. O problema como isso é que o JSON é interpretado com Javascript, mas ao invés de interpretar o conteúdo como notação literal de um objeto ele seria interpretado como um bloco e descartado como um erro de sintaxe. Mesmo que ele fosse corretamente interpretado como uma notação literal de objeto ele não poderia ser acessado por Javascript já que não estaria atribuído a uma variável.No uso do JSONP, o atributo src no elemento <code><script></code> é um JSON gerado dinamicamente, com uma chamada de função o encapsulando. Dessa forma, o recurso retornado continua sendo código Javascript válido, mas por ser um literal de um objeto anônimo encapsulado em uma chamada de função, o ambiente Javascript do navegador por agir nos dados retornados. Ele poderia parecer com isso:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre> functionCall({"Name": "Foo", "Id" : 1234, "Rank": 7});</pre></div>A chamada de função é o P do JSONP - o "padding" (espaçamento) em volta do JSON puro, ou de acordo com alguns<a href="#cite_note-1">[1]</a> o "prefixo".<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <script type="text/javascript" src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"> </script></pre></div>Neste exemplo, a carga recebida seria:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre> parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});</pre></div><h2>Padding[<a href="/w/index.php?title=JSONP&veaction=edit&section=2" class="mw-editsection-visualeditor" title="Editar secção: Padding">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=2" title="Editar secção: Padding">editar código-fonte</a>]</h2>Enquanto o padding (prefixo) é tipicamente o nome da função callback que é definida dentro do contexto de execução do navegador, ela pode ser uma atribuição de uma variável, trecho de if , ou qualquer outro trecho de código Javascript.A resposta a uma requisição JSONP (nominalmente, uma requisição seguindo a patter de uso do JSONP) não é JSON e não é parseada como JSON; o payload pode ser qualquer expressão Javascript arbitraria, e não precisa nem mesmo incluir JSON. Mas convencionalmente, é um fragmento Javascript que invoca uma chamada de função em algum dado formatado em JSON.Em outras palavras, o uso típico do JSONP provê acesso cross-domanin a uma API JSON existente, encapsulando o conteúdo JSON em uma chamada de função.<h2>Injeção do elemento script[<a href="/w/index.php?title=JSONP&veaction=edit&section=3" class="mw-editsection-visualeditor" title="Editar secção: Injeção do elemento script">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=3" title="Editar secção: Injeção do elemento script">editar código-fonte</a>]</h2>JSONP só faz sentido quando usado com o elemento script. Para cada novo request JSONP, o navegador precisa adicionar um novo elemento <a href="/wiki/HTML_element#script_tag" class="mw-redirect" title="HTML element"><code><script></code></a>, ou reutilizar um já existente. A forma antiga, adicionando um novo elemento script, é feita via manipulação dinâmica do DOM, e é conhecida como injeção de elemento script. O elemento <code><script></code> é injetado no DOM, com a URL do endpoint JSON desejado setado como o valor do atributo "src". Esse injeção de elemento script dinâmica é comumente feita por uma biblioteca Javascript auxiliar. jQuery e outros frameworks tem funções auxiliares; há também opções padrões. <a href="#cite_note-2">[2]</a>A injeção dinâmica do elemento script para uma chamada JSONP seria parecido com isso:<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <script type="text/javascript" src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"> </script></pre></div>Após o elemento ser injetado, o navegador interpreta o elemento, e faz um HTTP GET na URL definida no atributo "src", obtendo o conteúdo. O navegador então interpreta o payload como Javascript. Isso é tipicamente uma invocação de função.Dessa forma, o uso do JSONP pode ser dito por permite que páginas do navegador contornem a política de mesma origem via injeção de elemento script. <h2>História[<a href="/w/index.php?title=JSONP&veaction=edit&section=4" class="mw-editsection-visualeditor" title="Editar secção: História">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=4" title="Editar secção: História">editar código-fonte</a>]</h2>Em Julho de 2005 George Jempty sugeriu uma forma opcional de atribuir uma variavel ao JSON.<a href="#cite_note-3">[3]</a><a href="#cite_note-4">[4]</a> A proposta original para o JSONP, onde o padding é uma função callback, parece ter sido feita por Bob Ippolito em Dezembro de 2005<a href="#cite_note-5">[5]</a> e agora é usado por muitas aplicações <a href="/wiki/Web_2.0" title="Web 2.0">Web 2.0</a> como o <a href="/wiki/Dojo_Toolkit" title="Dojo Toolkit">Dojo Toolkit</a>, <a href="/wiki/Google_Web_Toolkit" title="Google Web Toolkit">Google Web Toolkit</a>,<a href="#cite_note-6">[6]</a> e <a href="/wiki/Web_service" title="Web service">Web services</a>.<h2>References[<a href="/w/index.php?title=JSONP&veaction=edit&section=5" class="mw-editsection-visualeditor" title="Editar secção: References">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=5" title="Editar secção: References">editar código-fonte</a>]</h2><div class="reflist columns references-column-width" style="-moz-column-width: 30em; -webkit-column-width: 30em; column-width: 30em; list-style-type: decimal;"><ol class="references"><li id="cite_note-1"><a href="#cite_ref-1">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20141115070803/http://epimorph-pubx1.appspot.com/help.html">«Experimental RDF result set to JSON translator»</a>. Consultado em 20 de fevereiro de 2012. Arquivado do <a rel="nofollow" class="external text" href="http://epimorph-pubx1.appspot.com/help.html">original</a> em 15 de novembro de 2014</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.btitle=Experimental+RDF+result+set+to+JSON+translator&rft.genre=unknown&rft_id=http%3A%2F%2Fepimorph-pubx1.appspot.com%2Fhelp.html&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"> </li><li id="cite_note-2"><a href="#cite_ref-2">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="http://pastebin.com/ADxHdCnB">«example jsonp library on pastebin»</a></cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.btitle=example+jsonp+library+on+pastebin&rft.genre=unknown&rft_id=http%3A%2F%2Fpastebin.com%2FADxHdCnB&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"> </li><li id="cite_note-3"><a href="#cite_ref-3">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="http://replay.web.archive.org/20060212113746/http://htmatters.net/htm/1/2005/07/evaling-JSON.cfm">«eval'ing JSON»</a>. 19 de julho de 2005</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.btitle=eval%27ing+JSON&rft.date=2005-07-19&rft.genre=unknown&rft_id=http%3A%2F%2Freplay.web.archive.org%2F20060212113746%2Fhttp%3A%2F%2Fhtmatters.net%2Fhtm%2F1%2F2005%2F07%2Fevaling-JSON.cfm&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"> </li><li id="cite_note-4"><a href="#cite_ref-4">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="http://tech.groups.yahoo.com/group/json/message/82">«json: Message: Re: Comments»</a>. 17 de agosto de 2005</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.btitle=json%3A+Message%3A+Re%3A+Comments&rft.date=2005-08-17&rft.genre=unknown&rft_id=http%3A%2F%2Ftech.groups.yahoo.com%2Fgroup%2Fjson%2Fmessage%2F82&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"> </li><li id="cite_note-5"><a href="#cite_ref-5">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://www.webcitation.org/65OHzF7n5?url=http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">«Remote JSON - JSONP»</a>. from __future__ import *. Bob.pythonmac.org. 5 de dezembro de 2005. Consultado em 8 de setembro de 2008. Arquivado do <a rel="nofollow" class="external text" href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">original</a> em 12 de fevereiro de 2012</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.atitle=Remote+JSON+-+JSONP&rft.date=2005-12-05&rft.genre=unknown&rft.jtitle=from+__future__+import+%2A&rft_id=http%3A%2F%2Fbob.pythonmac.org%2Farchives%2F2005%2F12%2F05%2Fremote-json-jsonp%2F&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal" class="Z3988"> </li><li id="cite_note-6"><a href="#cite_ref-6">↑</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://www.webcitation.org/6Djo88laj?url=http://www.gwtapps.com/?p=42">«GWT Tutorial: How to Read Web Services Client-Side with JSONP»</a>. Google Web Toolkit Applications. 6 de fevereiro de 2008. Consultado em 3 de julho de 2009. Arquivado do <a rel="nofollow" class="external text" href="http://www.gwtapps.com/?p=42">original</a> em 17 de janeiro de 2013</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fpt.wikipedia.org%3AJSONP&rft.atitle=GWT+Tutorial%3A+How+to+Read+Web+Services+Client-Side+with+JSONP&rft.date=2008-02-06&rft.genre=unknown&rft.jtitle=Google+Web+Toolkit+Applications&rft_id=http%3A%2F%2Fwww.gwtapps.com%2F%3Fp%3D42&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal" class="Z3988"> </li></ol></div><h2>Ligações externas[<a href="/w/index.php?title=JSONP&veaction=edit&section=6" class="mw-editsection-visualeditor" title="Editar secção: Ligações externas">editar</a> | <a href="/w/index.php?title=JSONP&action=edit&section=6" title="Editar secção: Ligações externas">editar código-fonte</a>]</h2><ul><li>Site official: <a rel="nofollow" class="external free" href="http://www.json-p.org">http://www.json-p.org</a> (em inglês)</li><li><a rel="nofollow" class="external text" href="http://www.vcarrer.com/2010/11/about-jsonp-in-javascript.html">About JSONP in JavaScript</a> (em inglês)</li><li><a rel="nofollow" class="external text" href="https://code.google.com/p/jsonp-java/">jsonp-java wraps any response content into a jsonp callback</a> (em inglês)</li><li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20111227014302/http://cheeso.members.winisp.net/srcview.aspx?dir=js">An implementation of a JSONP utility class</a> (em inglês)</li></ul></div></script>