No response from MediaWiki API using jQuery

Question

I've tried to get some content from Wikipedia as JSON:

$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json", function(data) {
    doSomethingWith(data);
});

But I got nothing in response. If I paste to the browser's adress bar, something like

http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles=jQuery&format=json

I get the expected content. What's wrong?

Answer 1

You need to trigger JSONP behavior with $.getJSON() by adding &callback=? on the querystring, like this:

$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json&callback=?", function(data) {
    doSomethingWith(data);
});

You can test it here.

Without using JSONP you're hitting the same-origin policy which is blocking the XmlHttpRequest from getting any data back.

Answer 2

As the other answers point out, you are making a cross-domain request.

The one answer which works now and which they have both given is to use JSONP instead of JSON, but there is another answer called CORS Cross-origin resource sharing.

However, even though CORS is supported by MediaWiki, it is not yet enabled on Wikipedia due to subtleties between it and how Wikipedia's caching works.

There is an open bug report to get this working in Wikipedia: Enable $wgCrossSiteAJAXdomains for wikimedia sites.

Once this is resolved you will be able to make cross-domain AJAX requests to Wikipedia without needing JSONP from browsers which support CORS. The latest versions of all the major browsers now support CORS. For Internet Explorer that means version 10 which not many people are running. Version 9 has an alternative solution called xdomainrequest which didn't gain much popularity.

Answer 3

You'll need to use getJSONP if your getting data from another domain, it's part of the "same origin policy".

EDIT

Actually what Nick said, slap &callback=? on the end of your query string to invoke getJSONP.

Answer 4

One option to perform CORS request instead of JSONP is to explicitly include parameter origin=* in request url, for example:

var title = "jQuery";

$.getJSON("https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json&origin=*", function(data) {
    console.log(data.query.pages);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>