Question

我在这里努力想弄清楚如何做一个JSONP请求，但我寻找参考资料的所有地方都是jQuery示例。我可以阅读jQuery源代码，但我想要一个简洁明了的例子。我正在为某些东西构建一个库，我不想包含jQuery，所以请不要使用jQuery $.getJSON。我知道如何使用它。

我的服务器使用callback({"foo":"bar"}) MIME发出正常content-type: application/json; charset=utf-8响应。

因此，如果我输入一个脚本标签（使用Twitter，因为我知道他们的API有效）：

<script src="http://twitter.com/users/oscargodson.json?callback=test"></script>

或动态。无论是工作还是我得到JSON，它是我无法弄清楚的下一步。

如果我在脚本加载后只做console.log(test)，我会得到：Uncaught ReferenceError: test is not defined

为什么呢？在我从服务器得到响应后，我是如何将它传递给自己的？在我自己的服务器上如果我做callback = {"foo":"bar"}回调工作并返回一个对象，但不是上面的方式。怎么会？我只使用AJAX库来做到这一点，但对于这个项目，我需要自己编写代码：）

Answer 1

如果你设置“callback = test”，那么在你的客户端代码中你需要有一个名为“test”的函数，它从服务器获取json值并为你处理它。

JQuery就是这样做的，具有动态生成的函数名称。

function test(data) { console.log(data) }
get_jsonp("http://www.example.com/?callback=test")

Answer 2

一个简单的脚本包含应该完成这项工作：

function test(res) {
    // TODO: manipulate the results here like for example showing
    // the created_at property
    alert(res.created_at);    
}

window.onload = function() {
    var script = document.createElement("script");
    script.src = 'http://twitter.com/users/oscargodson.json?callback=test';
    document.body.appendChild(script);
};

这是一个live demo。

显然你不应该忘记浏览器可能会缓存静态资源，比如脚本，所以如果你想确保新的信息，你可以调整一些时间戳到网址。

JSONP帮助（没有jQuery）

2 个答案: