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
– Felix Kling, Commented Jun 3, 2011 at 17:02

WesleyJohnson · Accepted Answer · 2011-06-03 17:19:20Z

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 3, 2011 at 17:19

answered Jun 3, 2011 at 17:05

WesleyJohnson

1,5581 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

WesleyJohnson Over a year ago

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.

squidbe Over a year ago

Slick! Didn't know jQuery supported that. @WesleyJohnson, do you know as of what version?

nrabinowitz Over a year ago

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.

WesleyJohnson Over a year ago

@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 Over a year ago

@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.

|

jhocking · Accepted Answer · 2011-06-03 17:00:12Z

0

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

answered Jun 3, 2011 at 17:00

jhocking

5,5871 gold badge27 silver badges39 bronze badges

Comments

aorcsik · Accepted Answer · 2011-06-03 17:00:23Z

0

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.

answered Jun 3, 2011 at 17:00

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

Comments

Dark Falcon · Accepted Answer · 2011-06-03 17:02:00Z

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 3, 2011 at 17:02

Dark Falcon

44.2k6 gold badges91 silver badges104 bronze badges

Comments

Localghost · Accepted Answer · 2011-06-03 17:03:27Z

0

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.

answered Jun 3, 2011 at 17:03

Localghost

7203 silver badges7 bronze badges

Comments

squidbe · Accepted Answer · 2011-06-03 17:07:24Z

0

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.

answered Jun 3, 2011 at 17:07

squidbe

1,0101 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

Trouble performing simple GET request returning JSON with Javascript

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related