Question

我在显示我从另一个域上的JSONP服务获取的数据时遇到问题。我一直在关注众多教程和指南，但无法进入在网页上显示它的阶段。

我要做的是使用javascript在HTML页面上显示返回的JSON对象。

我可以看到返回的JSON对象，我实际上可以使用Fiddler查看它，但是我无法进入下一个阶段并实际在页面上生成它。

我一直在关注这个例子What is JSONP all about?更具体地说是Twitter的解释，并一直在努力使其适应我自己的需要。

根据我的理解myCallback在下面的URL末尾指的是我必须定义的函数。

<script src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>

<script>
function myCallback(jsonData) {...}
<script>

如果我到目前为止我如何通常访问jsonData并显示页面上的所有内容？

有人可以给我一个如何处理这个的通用例子，并解释他们在做什么吗？

我知道这已被问了100次，但我只需指向正确的方向。谢谢你们。

Answer 1

代码的一个问题是不制作JSONP request - 好吧，但是不是以异步方式！相反，代码将请求的结果用作“普通”非动态脚本源目标，默认情况下， scripts元素同步加载脚本。

在这种情况下，发布的HTML将导致 ReferenceError （检查错误控制台），因为在评估JSONP脚本源时尚未定义myCallback。一个“修复”是首先将脚本放在myCallback - 至少然后应该用数据调用它。

要在HTML文档中异步获取JSONP，请动态加载JSONP脚本元素（例如在“onload”中）或使用包装器（例如jQuery.ajax）自动包装/分派JSONP请求。 async属性也可能是一个选项，但并不普遍支持。

获取数据后，必须以有意义的方式使用。我不确定上下文中有什么“有意义的”。在任何情况下，以下内容都应显示发回的数据的警报：

<!-- ensure the function is defined first -->
<script>
// data is /not/ JSON, just a normal JavaScript value ..
function mycallback(data) {
    // .. and turn the data into a JSON string for display
    // (`debugger` and `console.log` will be more useful for exploring)
    alert(JSON.stringify(data))
}
</script><!-- make sure to use valid HTML -->
<script src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=mycallback"></script>

我还更新了代码以使用mycallback而不是myCallback（请注意大小写差异），因为使用callback=myCallback执行请求会在响应中生成mycallback(..) ..永远不会调用名为myCallback的函数。我不知道为什么案件崩溃了 - 它是Twitter API的一个错误或“特征”。

显示JSONP数据

1 个答案: