1

私は完全にうまく機能するjQuery AJAX呼び出しを持っています:

$.ajax({
    url: "http://exampleurl.com/sub/sub2/posts?api_key=ApIKeyGoEsHEre",
    dataType: 'jsonp',
    success: function(data){
        filter(data); // Callback function
    }
});

ただし、これの純粋な JS バージョンを動作させることができず、dataType: jsonp問題が発生しています。私の試みは次のとおりです

このアプローチでは、URL の末尾にUnexpected token :追加?callback=filterすると、ページが見つからないというエラーが表示されます

var script = document.createElement('script');
script.src = 'http://exampleurl.com/sub/sub2/posts?api_key=ApIKeyGoEsHEre';
console.log(script);
document.body.appendChild(script);

私の2番目のアプローチ。Unexpected token :同様のエラーが表示されます

function jsonp(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
}    
function jsonpCallback(data) {
     filter(JSON.stringify(data));
}    
jsonpCallback(jsonp("http://exampleurl.com/sub/sub2/posts?api_key=ApIKeyGoEsHEre"));

私の 3 番目のアプローチ。のエラーが表示されますcannot load (the url). Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "http://exampleurl.com/sub/sub2/posts?api_key=ApIKeyGoEsHEre", true);

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            filter(JSON.stringify(data));
            console.log(JSON.stringify(data));
        }
    }       
    xmlhttp.send();
}
loadXMLDoc();

ここにjsFiddleがあります

どこが間違っていますか？

4

2 に答える 2

0

JSONP URL をブラウザーにロードして、返される JavaScript が有効かどうかを確認しましたか? あなたが書いたものではなく、その JavaScript からエラーが発生している可能性があります。

ただし、2 番目のアプローチでは、jsonpCallback自分自身を呼び出すべきではありません。jsonp関数によってロードされたスクリプトがそれを行います。

xmlhttp.openスクリプトに対して別のドメインの URL を使用できないため、3 番目のアプローチは機能しません(別のドメインがクロスオリジン リソース共有をサポートしている場合を除く)。JSON-P の全体的な考え方は<script>、別のドメインを指すページにタグを追加して、クロスドメイン リクエストを有効にすることです。

編集：

あ、みつけた。?callback=filter使用している URL の末尾に文字通り追加したと思います。callback URL の最後にパラメーターを追加します (Tumblr が JSON 応答ではなく、有効な JavaScript 応答を返すようにします)。

URL には既にapi_keyパラメーターが含まれているため、URL の末尾に追加する必要があります ( の代わりに に&callback=filter注意してください)。&?

于 2013-10-15T23:30:24.013 に答える