Javascript 将数据类型为jsonp的jqueryajax更改为纯jsajax

我有一个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末尾添加

？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);

我的第二种方法；给我一个错误

意外标记：

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"));

我的第三种方法；给我一个错误

无法加载（url）。起源http://fiddle.jshell.net 访问控制允许源站不允许使用。

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();

---

我哪里出错了？

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

然而，在第二种方法中，您不应该自己调用

jsonpCallback

。由

jsonp

函数加载的脚本将实现这一点

您的第三种方法不起作用，因为您不能在脚本的不同域上使用

xmlhttp.open

（除非不同域支持）。JSON-P的整个思想是向指向不同域的页面添加一个

标记，以支持跨域请求

编辑： 啊，发现了。我认为您确实在所使用的URL的末尾添加了

？callback=filter

。您希望在URL的末尾附加一个

回调

参数（以便Tumblr返回一个有效的JavaScript响应，而不是JSON响应）

由于您的URL已经包含

api\u key

参数，您应该在URL的末尾添加

&callback=filter

（注意

&

而不是

？

）。

请看这里

编辑：

---

它在你的简化版本中似乎有效，但在完整版本中不起作用 在jsFiddle中，我得到一个错误，因为有人试图引用中的节点 不存在的上下文。知道为什么吗

这是因为您不能执行

document.body.appendChild（“”）

您必须创建DOM元素，如：

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

编辑2：

它找不到任何对象的类型，即使它们已找到
在控制台中对象的相同位置

与jQuery的
each
不同，传递给
forEach
回调的第一个参数是项，而不是索引。
索引是第二个参数，它们有反向的API。
您是在JSFIDLE中构建的吗？可以看到链接吗？是的，我正在JSFIDLE中构建。我将链接添加到question@Zeaklous，我还将检查如何使用jQuery修复它；）@plalx我不需要jQuery修复程序，我已经在问题中提供了一个。当我尝试在完整的JSFIDLE上实现您的修复时，我得到了一个错误
尝试在一个不存在的上下文中引用一个节点。
就像我说的jQuery版本工作得很好，在浏览器中打开JSONP URL也是如此。感谢关于第三种方法的信息，当我尝试它时，我认为它不起作用。它似乎在您的简化版本中起作用，但在完整的JSFIDLE中不起作用。我得到了一个错误
尝试在不存在节点的上下文中引用节点。
知道为什么吗@Zeaklous让我检查一下。@plalx:在将
标记附加到
之前，您可能需要定义
窗口。过滤器
，以防JSON-P响应以惊人的速度返回。@PaulD.Waite由于脚本是异步加载的，因此当前的JS块将始终在脚本加载的代码运行之前执行到底。然而，之前有它可能有助于可读性和理解。@plalx再次很好地捕捉到错误，但现在它说对象的
类型
s是
未定义的
，即使它们在控制台中的对象中的同一位置。有什么想法吗？我保证这是最后一个问题，哈哈
var div = document.createElement('div');