JSONP 帮助（无 jQuery）答案

【问题标题】：JSONP Help (No jQuery)JSONP 帮助（无 jQuery）
【发布时间】：2011-05-14 07:53:00
【问题描述】：

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

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

因此，如果我输入一个脚本标签，例如（使用 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 库来做到这一点，但对于这个项目，我需要自己编写代码:)

【问题讨论】：

标签： ajax json jsonp javascript

【解决方案1】：

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

JQuery 就是这样做的，它使用动态生成的函数名称。

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

【讨论】：

【解决方案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。

显然，您不应该忘记浏览器可能会缓存脚本等静态资源，因此如果您想确保最新信息，您可以为 url 调整一些时间戳。

【讨论】：