Exemplo básico de uso de .ajax () com JSONP?

187

Alguém poderia me ajudar a descobrir como começar a usar o JSONP?

Código:

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

Violino: http://jsfiddle.net/R7EPt/6/

Deveria produzir um alerta, pelo que pude extrair da documentação: não está (mas não está produzindo nenhum erro).

obrigado.

ajax json jsonp simon
fonte
$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: fotos, jsonp: false,}); Você inseriu fotos como uma sequência.
Wolverine

Respostas:

388

JSONP é realmente um truque simples para superar a mesma política de domínio XMLHttpRequest . (Como você sabe, não é possível enviar uma solicitação AJAX (XMLHttpRequest) para um domínio diferente.)

Portanto, em vez de usar XMLHttpRequest , precisamos usar tags HTMLl de script , aquelas que você costuma usar para carregar arquivos JS, para que JS obtenha dados de outro domínio. Soa estranho?

A coisa é - as tags de script podem ser usadas de maneira semelhante ao XMLHttpRequest ! Veja isso:

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";

Você terminará com um segmento de script que se parece com este após carregar os dados:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

No entanto, isso é um pouco inconveniente, porque precisamos buscar esse array na tag de script . Então, os criadores do JSONP decidiram que isso funcionaria melhor (e é):

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

Aviso my_callback função ali? Então - quando o servidor JSONP recebe sua solicitação e encontra o parâmetro de retorno de chamada - em vez de retornar uma matriz JS simples, ele retornará isso:

my_callback({['some string 1', 'some data', 'whatever data']});

Veja onde está o lucro: agora temos o retorno de chamada automático ( my_callback ) que será acionado assim que recebermos os dados. É tudo o que há para saber sobre JSONP : são tags de retorno de chamada e script.

NOTA:
Estes são exemplos simples de uso de JSONP, não são scripts prontos para produção.

Demonstração de RAW JavaScript (feed simples do Twitter usando JSONP):

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>


Exemplo básico de jQuery (feed simples do Twitter usando JSONP):

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONP significa JSON com preenchimento . (técnica muito mal nomeada, pois realmente não tem nada a ver com o que a maioria das pessoas pensaria como "preenchimento".)

Aquele cara
fonte
3
Agora, essa resposta está um pouco desatualizada porque os navegadores agora suportam Access-Control-Allow-Origincabeçalhos que permitem que chamadas regulares do Ajax sejam feitas para alguns domínios de origem cruzada.
jfriend00
Lembre-se de que você não pode fazer um formulário POST com JSONP. Mais informações aqui: markhneedham.com/blog/2009/08/27/…
thdoan
4
O que você deve considerar se deseja tornar esses scripts prontos para produção?
guest
1
Uau, isso é realmente útil! Finalmente, eu sei o que exatamente é JSONP e como ele funciona!
Jerry Liu
146

Existe uma maneira ainda mais fácil de como trabalhar com JSONP usando jQuery

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

O ?final da URL informa ao jQuery que é uma solicitação JSONP em vez de JSON. O jQuery registra e chama a função de retorno de chamada automaticamente.

Para mais detalhes, consulte a documentação do jQuery.getJSON .

Petr Peller
fonte
2
@PetrPeller, parece ótimo, mas não pareço criar um produto com isso. Você pode ver isso uma vez? JSFiddle Ele não alerta dados. Talvez eu perdi alguma coisa
tika
A resposta JSONP @xDNP deve ser suportada pelo servidor. Seu servidor parece não suportá-lo, pois não consigo ver nenhum retorno de chamada adicional aqui: mylivecanvas.com/api/… . Além disso, você deve usar, &callback=?pois esse não é o primeiro parâmetro no seu caso.
precisa
1
@PetrPeller Estou muito interessado em sua solução. Mas isso não funciona comigo. Não quero postar uma nova pergunta, mas isso não me ajuda. O que parece não suportar por servidor significa? O que devo fazer? E você pode me fornecer uma URL completa que funcione para o meu servidor? Eu ficaria grato por você. Preciso de alguma configuração de servidor?
21714
3
O que faz a última edição, "Por favor, não use mais o jQuery!" significar?
ParkCheolu
1
Agora é 2018, e não tenho certeza do que deve ser usado em 2017!
Vasily Hall 27/01
28

Em resposta ao OP, há dois problemas com seu código: você precisa definir jsonp = 'callback' e adicionar uma função de retorno de chamada em uma variável como você parece não funcionar.

Atualização: quando eu escrevi isso, a API do Twitter estava aberta, mas eles mudaram e agora requer autenticação. Mudei o segundo exemplo para um exemplo funcional (2014Q1), mas agora usando o github.

Isso não funciona mais - como exercício, veja se você pode substituí-lo pela API do Github: 

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

embora alert () um array como esse realmente não funcione bem ... A guia "Net" no Firebug mostrará o JSON corretamente. Outro truque útil está fazendo

alert(JSON.stringify(data));

Você também pode usar o método jQuery.getJSON . Aqui está um exemplo completo de html que obtém uma lista de "gists" do github. Dessa forma, ele cria uma função de retorno de chamada nomeada aleatoriamente para você, que é o final "retorno de chamada =?" no URL.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, gist){
                        $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + 
                            (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>
PapaFreud
fonte
2
Você está certo, isso não funciona mais. O Twitter mudou sua API.
PapaFreud 13/03
3 
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

O código acima ajuda na obtenção de imagens da API do Flicker. Isso usa o método GET para obter imagens usando JSONP. Pode ser encontrado em detalhes aqui

Ganesh Babu
fonte