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给我带来了麻烦。我的尝试如下

这种方法给了我一个错误Unexpected token :，添加?callback=filter到 URL 的末尾说找不到页面

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

我的第二种方法；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"));

我的第三种方法；给我一个错误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

2

看看这里jsfiddle.net/FSyT5/1

var script = document.createElement('script');

script.src = 'http://api.tumblr.com/v2/blog/solacingsavant.tumblr.com/posts?api_key=Srhk9qkcJO69pAoB4ltM5uIqpwUBO7kgDqDEaCD9Jo8EafWyHE&callback=filter';

document.getElementsByTagName('head')[0].appendChild(script);

window.filter = function filter(data) {
    console.log(data);
};

编辑：

它似乎在您的简化版本中有效，但在完整的 jsFiddle 中无效，我收到一个错误：尝试在不存在的上下文中引用节点。知道为什么吗？

那是因为你做不到document.body.appendChild("<div id='fromTumblr'></div>");

您必须创建 DOM 元素，例如：

var div = document.createElement('div');

编辑2：

它没有找到任何对象的类型，即使它们在控制台中的对象中的同一位置找到。

与 jQuery 不同each，传递给forEach回调的第一个参数是项目，而不是索引。这index是第二个参数，他们有反转的 API。

于 2013-10-15T23:39:35.360 回答
0

您是否尝试过在浏览器中加载 JSONP URL，并查看它返回的 JavaScript 是否有效？我怀疑错误可能来自那个 JavaScript，而不是你写的。

但是，在您的第二种方法中，您不应该给jsonpCallback自己打电话。jsonp您的函数加载的脚本将执行此操作。

您的第三种方法不起作用，因为您不能将xmlhttp.open不同域上的 URL 用于脚本（除非不同域支持跨域资源共享）。JSON-P 的整个想法是<script>在页面上添加一个指向不同域的标签，以启用跨域请求。

编辑：

啊，发现了。我认为您从字面上附加?callback=filter到您正在使用的 URL 的末尾。您希望在 URL 的末尾附加一个callback 参数（以便 Tumblr 返回有效的 JavaScript 响应，而不是 JSON 响应）。

由于您的 URL 已经包含api_key参数，您应该添加&callback=filter到 URL 的末尾（注意&而不是?）。

于 2013-10-15T23:30:24.013 回答