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

时间:2014-03-31 13:43:43

标签: javascript api

如何从AJAX格式中提取API,如下所示:

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

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

1 个答案:

答案 0 :(得分:0)

提取此数据的最简单方法是使用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/

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

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

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