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

Question

How do I pull from API's in AJAX format such as these:

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

I am an amateur programmer so anything in Javascript would be helpful

Answer 1

The easiest way to extract this data is to use jQuery to make a cross domain ajax request. Basically, the idea is this:

$.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');
    }
});

You'll notice that the jsonpCallback is set to loadScoreboard because that's what the jsonp data looks like.

Here's a jsfiddle with a full working sample.

Fire up Developer tools in Google Chrome (hit F12 in your keyboard) and click on the console tab to see the full response.

Update: Here's another fiddle with better output results: http://jsfiddle.net/3mQh7/6/

Now let me explain in more detail:

1. The above code uses jQuery, which is just a Javascript library that you can include in your page.
2. jQuery itself has a bunch of utility functions that make it easy(er) to make an Ajax request (which is what you need in this case). So the line that says $.ajax(... is just me calling the jQuery function to make ajax requests.
3. Since this is an Ajax request to another third-party website, you need to initiate what's called a Cross Domain Resource Sharing ( CORS ) Ajax request. In order to do this, you need to specify some special parameters in your function call. For example, you need to specify that the data type that you expect to receive back is of type JSONP (essentially, you are asking to receive data in Javascript Object Notation format - JSON)
4. Finally, the data returned by the website you linked defines a callback function called loadScoreboard - you can see this by simply going to the link and analyzing the output. As a result, when you make the ajax request, you must name the callback function the same as the one presented in the output from the site. If you don't, jQuery automatically creates one for you with a unique identifier, but since it doesn't match the name that's imposed by the website (namely loadScoreboard ), you would get errors. That's why you need to define the parameter jsonCallback='loadScoreboard'.

So the whole thing is simply making an XHTML HTTP GET Request to get a resource on a third party website that returns data in JSON format. When the data is returned, a function called loadScoreboard is expected to be called immediately with the data itself passed in as parameter to this function.

If you look at my second fiddle you'll see a more elaborate example, which iterates through the results and creates a table.