Trouble performing simple GET request returning JSON with Javascript

Question

I'm horrible at Javascript, so sorry in advance for what I'm going to go ahead and assume is an amazingly stupid question.

I'm simply trying to perform a GET request to GitHub's public repo API for a given user, and return the value as JSON.

Here's the function I'm trying to use:

function get_github_public_repos(username) {

    var the_url = "http://github.com/api/v2/json/repos/show/" + username

    $.ajax({
      url: the_url,
      dataType: 'json',
      type: 'get',
      success: function(data) {
        alert('raw data: ' + data)
        var json_response = $.parseJSON(data);
        alert(json_response);
      }
    });
}

This is returning Null for data. And in the console, I see Failed to load resource: cancelled. I know the URL is correct, because if I run curl on the url, it returns the expected data.

Two problems: (a) As already said, you cannot get JSON from other domains ( you have to use JSONP if supported) (b) If it was working, `data` would be already parsed, so `$.parseJSON(data)` would fail. — Felix Kling, Jun 03 '11 at 17:02

WesleyJohnson · Accepted Answer · 2011-06-03T17:19:20.263

3

jQuery's ajax function supports JSONP which allows cross-domain requests (which you need because you're trying to request data from github.com from another domain). Just change the dataType from 'json' to 'jsonp';

function get_github_public_repos(username) {

    var the_url = "http://github.com/api/v2/json/repos/show/" + username

    $.ajax({
      url: the_url,
      dataType: 'jsonp',
      type: 'get',
      success: function(data) {
        var json_response = data;
        alert(data);
      }
    });
}

UPDATE: It's import to note that the end pint (in this case github.com's API) has to support JSONP for this to work. It's not a guarnateed solution for ANY cross-domain request as pointed out in the comments.

edited Jun 03 '11 at 17:19

answered Jun 03 '11 at 17:05

WesleyJohnson

1,538
1
16
30

It's been a while since I've worked with this, but I think the end point (github.com) has to support JSONP for this to work? Anyway, the above code was tested working in jsFiddle. – WesleyJohnson Jun 03 '11 at 17:09
Slick! Didn't know jQuery supported that. @WesleyJohnson, do you know as of what version? – squidbe Jun 03 '11 at 17:10
1

I believe this will actually work with the GitHub API, but the way you've written it seems to assume that it would work with *any* API - the service has to actually offer a JSONP service and specify the Javascript callback through a `callback` parameter for this to be the case. It just happens that GitHub offers a rich API that supports this. – nrabinowitz Jun 03 '11 at 17:13
@squidbe - Off the top of my head, I wasn't sure it supported it either but I assumed it would as it's a pretty robust library. I just hit up google for jQuery and JSONP and voila! (haha :P) I'm trying to find as of what version it's supported, but I'm not having any luck yet. I think it's been around since before 1.5 though. – WesleyJohnson Jun 03 '11 at 17:14
@nrabinowitz - You're right, I thought that was the case as indicated by my first comment on this answer. I'll edit the answer as well so anyone who comes across it will see that caveat more clearly. – WesleyJohnson Jun 03 '11 at 17:16
@WesleyJohnson Do you know how to alter this to make it work if I am using curl? E.g. if what I want to get the data for is `curl -u username:password http://www.myurl.com` – Lloyd Powell Jul 03 '12 at 13:43

score 0 · Answer 2 · answered Jun 03 '11 at 17:00

0

JavaScript is subject to cross-domain restrictions when making requests on a different server.

answered Jun 03 '11 at 17:00

jhocking

5,527
1
24
38

score 0 · Answer 3 · answered Jun 03 '11 at 17:00

Well, unless you run your code in the github.com domain, that won't work.

You can use simle ajax only in your domain.

One solution is to create a proxy for it. Make a page on your server that does one thing, gets your requested (out of domain) content with curl, and prints it. Then you call this proxy with ajax.

score 0 · Answer 4 · answered Jun 03 '11 at 17:02

0

The XmlHttpRequest object (which $ajax uses) cannot download content from a different domain due to the same origin policy. You would need to use something such as JSONP to be able to do this from a browser.

answered Jun 03 '11 at 17:02

Dark Falcon

43,592
5
83
98

score 0 · Answer 5 · answered Jun 03 '11 at 17:03

As the others have said, you cannot execute ajax on a remote domain.

You will need to write a server sided script on your domain (such as php), that will do the dirty work retrieving the information needed from the github domain.

Then, use your ajax to query your server side script for the information.

score 0 · Answer 6 · answered Jun 03 '11 at 17:07

I know the URL is correct, because if I run curl on the url, it returns the expected data.

Use that idea to get your ajax working. Create a proxy page on your site that uses curl to retrieve the data you want, then have your "the_url" variable point to that page on your site. Cross-domain restrictions prevent you from being able to use ajax in the manner you attempted.

Trouble performing simple GET request returning JSON with Javascript

6 Answers6

Linked