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

You should really supply a snippet of your code since you may not have configured your $.ajax() function correctly. — Soviut, Dec 17 '10 at 15:38
Why can't you just grab the remote_addr from the request header? I second the notion to see the code. — jMyles, Dec 17 '10 at 15:41
By the way, grabbing the remote_addr will get me the IP address, but what I want is additional location info based on the IP address. City and country, basically. — Wytze, Dec 17 '10 at 15:57
@user browser doesn't allow if you are making request to the file which exists in another domain , if so you have to use getjsonp with callback as querystring. — kobe, Dec 17 '10 at 16:14

score 10 · Accepted Answer · answered Dec 17 '10 at 15:51

10

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.

answered Dec 17 '10 at 15:51

Dave Ward

59,815
13
117
134

1

Thanks, you're using terms that are complex to me, but I'll be using JSONP as a search term to find out more. – Wytze Dec 17 '10 at 15:59
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. – Dave Ward Dec 17 '10 at 16:23

score 3 · Answer 2 · answered Dec 17 '10 at 15:38

3

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.

answered Dec 17 '10 at 15:38

Jack Marchetti

15,536
14
81
117

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 Dec 17 '10 at 15:40

score 2 · Answer 3 · edited May 23 '17 at 12:16

2

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

edited May 23 '17 at 12:16

Community

1
1

answered Dec 17 '10 at 16:16

Dao

2,784
3
28
36

score 1 · Answer 4 · answered Dec 17 '10 at 16:26

1

, all you need to add a jsoncallback as querystring parameter

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

$.getJSON(url,
        function(data){

        });

answered Dec 17 '10 at 16:26

kobe

15,671
15
64
91

Hi gov, this does not seem to work. This provider does not seem to provide JSONP format, only JSON. – Wytze Dec 21 '10 at 15:40

score 1 · Answer 5 · answered Dec 22 '10 at 09:36

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!

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

5 Answers5

Linked