Question

如何从AJAX格式中提取API，如下所示：

http://live.nhle.com/GameData/RegularSeasonScoreboardv3.jsonp http://live.nhle.com/GameData/RegularSeasonScoreboardv3.jsonp

我是一名业余程序员，所以Javascript中的任何内容都会有所帮助

Answer 1

提取此数据的最简单方法是使用jQuery创建跨域ajax请求。基本上，这个想法是这样的：

$.ajax({
    dataType: 'jsonp', //data in jsonp
    contentType: "application/json; charset=utf-8",
    url: 'http://live.nhle.com/GameData/RegularSeasonScoreboardv3.jsonp',
    jsonpCallback: 'loadScoreboard', 
    success: function (data) {
       alert(data.games.length + ' games loaded');
    }
});

您会注意到jsonpCallback设置为loadScoreboard，因为这就是jsonp数据的样子。

这是一个jsfiddle，其中包含完整的工作样本。

启动Google Chrome中的开发者工具（点击键盘上的F12），然后点击console标签查看完整回复。

更新：这是另一个提高输出结果的小提琴：http://jsfiddle.net/3mQh7/6/

现在让我更详细地解释一下：

上面的代码使用jQuery，它只是一个可以包含在页面中的Javascript库。
jQuery本身有一堆实用程序函数，可以轻松（呃）发出Ajax请求（在这种情况下你需要这个）。所以说$.ajax(...的行只是我调用jQuery函数来发出ajax请求。
由于这是对另一个第三方网站的Ajax请求，因此您需要启动所谓的跨域资源共享（CORS）Ajax请求。为此，您需要在函数调用中指定一些特殊参数。例如，您需要指定您希望接收的数据类型是JSONP类型（实质上，您要求以Javascript Object Notation格式接收数据 - JSON）
最后，您链接的网站返回的数据定义了一个名为loadScoreboard的回调函数 - 您只需转到链接并分析输出就可以看到这一点。因此，当您发出ajax请求时，必须将回调函数命名为与站点输出中显示的相同。如果不这样做，jQuery会自动为您创建一个具有唯一标识符的标识符，但由于它与网站强加的名称（即loadScoreboard）不匹配，您将收到错误。这就是为什么你需要定义参数jsonCallback ='loadScoreboard'。

所以整个过程就是制作一个XHTML HTTP GET Request来获取第三方网站上的资源，该网站以JSON格式返回数据。返回数据时，预计会立即调用一个名为loadScoreboard的函数，并将数据本身作为参数传入此函数。

如果你看看我的第二个小提琴，你会看到一个更详细的例子，它会遍历结果并创建一个表格。

如何从具有AJAX格式的API中提取？

1 个答案: