O que é JSONP?
O importante a lembrar com o jsonp é que na verdade não é um protocolo ou tipo de dados. É apenas uma maneira de carregar um script rapidamente e processar o script que é introduzido na página. No espírito do JSONP, isso significa introduzir um novo objeto javascript do servidor no aplicativo / script do cliente.
Quando o JSONP é necessário?
É um método de permitir que um domínio acesse / processe dados de outro na mesma página de forma assíncrona. Principalmente, é usado para substituir as restrições do CORS (compartilhamento de recursos de origem cruzada) que ocorreriam com uma solicitação XHR (ajax). As cargas de script não estão sujeitas a restrições CORS.
Como isso é feito
A introdução de um novo objeto javascript no servidor pode ser implementada de várias maneiras, mas a prática mais comum é o servidor implementar a execução de uma função de 'retorno de chamada', com o objeto necessário passado para ele. A função de retorno de chamada é apenas uma função que você já configurou no cliente que o script que você carrega chama no ponto em que o script carrega para processar os dados passados para ele.
Exemplo:
Eu tenho um aplicativo que registra todos os itens na casa de alguém. Meu aplicativo está configurado e agora quero recuperar todos os itens no quarto principal.
Meu aplicativo está ativado app.home.com
. As APIs das quais eu preciso carregar os dados estão ativadas api.home.com
.
A menos que o servidor esteja configurado explicitamente para permitir isso, não posso usar o ajax para carregar esses dados, pois mesmo as páginas em subdomínios separados estão sujeitas a restrições XHR CORS.
Idealmente, configure as coisas para permitir XHR no domínio x
Idealmente, como a API e o aplicativo estão no mesmo domínio, talvez eu tenha acesso para configurar os cabeçalhos api.home.com
. Se assim for, posso adicionar um Access-Control-Allow-Origin:
item de cabeçalho que conceda acesso app.home.com
. Supondo que o cabeçalho esteja configurado da seguinte maneira Access-Control-Allow-Origin: "http://app.home.com"
:, isso é muito mais seguro do que configurar o JSONP. Isso ocorre porque ele app.home.com
pode obter tudo o que deseja api.home.com
sem api.home.com
dar acesso ao CORS a toda a Internet.
A solução XHR acima não é possível. Configurar o JSONP No script do meu cliente: configurei uma função para processar a resposta do servidor ao fazer a chamada JSONP. :
function processJSONPResponse(data) {
var dataFromServer = data;
}
O servidor precisará ser configurado para retornar um mini-script parecido com algo como "processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Ele pode ser projetado para retornar essa sequência se algo como //api.home.com?getdata=room&room=main_bedroom
for chamado.
Em seguida, o cliente configura uma tag de script como tal:
var script = document.createElement('script');
script.src = '//api.home.com?getdata=room&room=main_bedroom';
document.querySelector('head').appendChild(script);
Isso carrega o script e chama imediatamente window.processJSONPResponse()
como gravado / eco / impresso pelo servidor. Os dados passados como parâmetro para a função agora são armazenados na dataFromServer
variável local e você pode fazer o que precisar.
Limpar
Uma vez que o cliente tenha os dados, ie. imediatamente após o script ser adicionado ao DOM, o elemento de script pode ser removido do DOM:
script.parentNode.removeChild(script);