O que é JSONP?

06/04/2017

0

Fala pessoal, nos meus estudos aqui vi esse tal de JSONP e que o mesmo pode substituir o AJAX.

Alguém pode me explicar o que é isso e se de fato ele substitui o nosso tão útil AJAX? Seria uma alternativa melhor?
Calebe Menezes

Calebe Menezes

Responder

Post mais votado

06/04/2017

Opa Calebe, tudo bem?


Por causa do chamado "same-origin policy", nao é possível recuperar dados JSON de outro domínio através do AJAX. Porém, é possível inserir tags script em nossa página e referenciar scripts externos ao nosso domínio. Normalmente utilizamos isso para acessar um CDN; por exemplo, jQuery.

Logo, se pensou em utilizar esse método para recuperar dados JSON de outros domínios, já que com AJAX nao seria possível. Assim, surgiu o JSONP, que basicamente é um JSON, mas com os dados "inseridos" como parâmetro de uma funçao. Assim, podemos recuperar dados de outro domínio através do JSONP. Um exemplo:

// Isto é JSON
{"nome":"Calebe","id":1}

// Isto é JSONP
func({"nome":"Calebe","id":1});

Definimos o conteúdo de uma página, em um domínio externo ao nosso, na forma de JSONP. Podemos entao, criar uma funçao igual a essa e conseguir acessar os dados, em nossa aplicaçao:

function func(json){
  alert(json.nome);
}
var elemento = document.createElement("script");
elemento.setAttribute("type", "text/javascript");
elemento.src = "http://exemplo.com/jsonp";
document.body.appendChild(elemento);



Logo, quando criarmos o elemento, o src vai ser definido como o conteúdo da página referenciada, em formato JSONP: Como temos una funçao de mesmo nome no nosso escopo, que chama o alert da propriedade nome do objeto passado, aparecerá um alert com o texto "Calebe" na nossa tela.

O JSONP é uma alternativa para passar por cima da limitaçao do same-domain policy, porém é mais um "hack". Existe uma alternativa mais moderna chamada CORS. Com JSONP você pode somente utilizar requisiçoes GET. Com CORS, você pode utilizar quaisquer outros métodos. Vá de JSONP se você quer suporte a navegadores mais antigos (Internet Explorer<=9, por exemplo) e somente para leitura (GET).


Um abraço.

Luis Mesa

Luis Mesa
Responder

Mais Posts

06/04/2017

Luis Mesa

Respondendo a sua pergunta, nao acredito que seja um substituto, já que com JSONP, como dito, se assemelha a um "hack", e com o surgimento do CORS se permite requisiçoes a outros domínios utilizando AJAX, realizando a configuraçao necessário no servidor.
Responder

10/04/2017

Calebe Menezes

Camarada...

Sensacional essa parada!

Vou começar a ver sobre isso para aplicar nos meus projetos.

Me parece ser muito promissor mais para frente!
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar