将带有 datatype:jsonp 的 jQuery ajax 更改为纯 JS ajax

Changing jQuery ajax with datatype:jsonp into pure JS ajax

本文关键字：ajax JS jQuery datatype jsonp      更新时间：2023-09-26

我有一个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 : ，在 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);

我的第二种方法;也给了我一个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

我哪里出错了？

看看这里 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。

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

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

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

编辑：

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

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

相关文章：