jQuery JSON request gets a '200 OK' answer but no content

Question

I am using jQuery to get visitor's location via their IP address. There's a great service for this called freeGeoIP. All I need to do is tack 'json' or 'xml' at the end of their URL, then add the IP address, and it will return the required data.

When I do this manually in my browser, it works: I get a tiny document to download. When I do a $.ajax or $.getJSON request from the browser, it answers with a '200 OK' header and the metadata below. But no actual data comes in. What's going on?

EDIT: I've added the javascript/jQuery code:

function openForm(event,ui){
    var _this = $(this);
    //Get details on the user's IP
    var myIP = $('#yourIP').attr('ip');alert(myIP);
    var url = 'http://freegeoip.appspot.com/json/' + myIP;
    $.ajax({
        url: url,
        dataType: 'json',
        contentType: 'text/json',
        timeout: 10000,
        complete: function(ip){
            alert('Success Ajax!');
            //URL returns status,ip,countrycode,countryname,regioncode,regionname,city,zipcode,latitude,longitude
            $('#yourIP').text(ip.city + ", " + ip.countryname +  " at " + ip.latitude + " latitude.");
            $('#yourIP').attr({'city': ip.city,'country': ip.countryname});
        }
    });

RESPONSE HEADERS
Cache-Control   no-cache
Content-Type    text/json
Expires Fri, 01 Jan 1990 00:00:00 GMT
Content-Encoding    gzip
Date    Fri, 17 Dec 2010 15:26:48 GMT
Server  Google Frontend
Content-Length  156

REQUEST HEADERS
Host    freegeoip.appspot.com
User-Agent  Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729)
Accept  application/json, text/javascript, */*; q=0.01
Accept-Language nl,en-us;q=0.7,en;q=0.3
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Connection  keep-alive
Content-Type    text/json
Referer http://www.freshbase.nl/permaculture/index.php
Origin  http://www.freshbase.nl

Solution 1

That's because you're running afoul of the cross-domain request limitation of the XMLHttpRequest object used in jQuery's AJAX features. Some browsers throw an empty 200 response when that happens (which is confusing).

You need to either use a service that supports JSONP, to circumvent the cross-domain issue, or use a server-side proxy on the same domain to act as a local intermediary.

Solution 2

200 just means that the request returned properly with no errors. It was a successful request.

A successful request can return no content, much like a SQL query returning no records.

Solution 3

You are trying to do Cross Site Ajax Request. Browsers block such manipulations as dangerous for security. Look here how to solve your problem: Cross-site AJAX requests

Solution 4

, all you need to add a jsoncallback as querystring parameter

var url = 'http://freegeoip.appspot.com/json/' + myIP + "&jsoncallback=?;

$.getJSON(url,
        function(data){

        });

Solution 5

So I solved my own problem! Thanks to everyone for guiding me onto a few paths that helped me understand more about cross-site requests, JSONP etc.

It's really very simple. The page that wants to have these data is composed with PHP. So I added these two lines to the PHP:

$myIP = $_SERVER['REMOTE_ADDR'];
$myGeoData = file_get_contents('http://freegeoip.appspot.com/json/' . $myIP);

and then echoed these variables in the appropriate bits of the page for jQuery to pick up and act on.

So if a web service delivers its data in the form of a file or a plain string, file_get_contents is all you need to obtain that data and start using it.

You can obtain it in PHP either before you send the whole page to the browser, or you can do an Ajax request to a purpose-built PHP script on your own server that uses this command. Thanks again folks!

View more solutions

Comments

[Wytze]

Thanks, I was (only just) aware of that. The problem is that I am not getting any data from a URL when I request it from Javascript, whereas it does provide me the promised data if I simply type the URL into the browser address bar. What's the problem then?

[Wytze]

Thanks, you're using terms that are complex to me, but I'll be using JSONP as a search term to find out more.

[rlorenzo]

An easy example of JSONP that you can search for is consuming the Twitter or Flickr API with jQuery. You'll find lots of examples of working against JSONP. The service you're consuming must support JSONP for that approach to be possible though.

[Wytze]

Hi gov, this does not seem to work. This provider does not seem to provide JSONP format, only JSON.