Cross Domain jQuery .AJAX problems

Question

I'm trying to use jQuery's .AJAX function to send a request to IPINFODB's API to get the geolocation of the user(s) visiting our site.

Problem is, from what I can gather jQuery's .AJAX function doesn't allow cross-domain requests and in-turn, returns nothing.

The following code alerts out [blank]

$.ajax({
    type: "POST",
    url: "http://api.ipinfodb.com/v3/ip-city/ip_query.php",
    data: "key=***********&format=json&ip=<?php echo $_SERVER['REMOTE_ADDR']; ?>",
    success: function(r) {

        alert(r);

    }
});

I've tried all variations of parameters for the .AJAX request such as GET, JSON, blah blah blah but still nothing. Does anyone know of another way of making a request to this API via AJAX? Preferably not using YQL.

:) 5 Answers, no up votes, and no correct answers marked...

Ross
– Ross

2011-09-16 15:11:44 +00:00
Commented Sep 16, 2011 at 15:11 — Ross
– Ross, Commented Sep 16, 2011 at 15:11

Ross · Accepted Answer · 2011-09-15 13:57:15Z

3

This can be done with AJAX. You will need to use JSONP to get around the cross domain issues.

Here is the code:

$.getJSON("http://api.ipinfodb.com/v3/ip-city/?key=API_KEY&format=json&callback=?" )
 .error (function  () {
    // error code
 }) 
 .success(function (result) { 
    // success code
    console.log(result); 
    console.log("your location is", result.latitude, result.longitude);
 });

You will need to replace API_KEY with your own API Key.

edited Sep 15, 2011 at 13:57

answered Sep 15, 2011 at 13:49

Ross

14.5k13 gold badges66 silver badges94 bronze badges

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

Comments

Allen Liu · Accepted Answer · 2011-08-30 00:05:23Z

I have implemented recently for a WordPress plugin.

Here is what my AJAX call looked like:

jQuery.ajax({
type : "GET",
url : "action.php",
data : {    
    ipinfodb_api_key : "<?php echo $ipinfodb_api_key; ?>",
    ip : "<?php echo $_SERVER['REMOTE_ADDR']?>"},
        success : function(response) {
            jQuery("#<?php echo $widgetid; ?>").html(response);
    }
});

Here is my function in action.php that processes this information:

function processData($ipinfodb_api_key, $ip) {
$longitude = null;
$latitude = null;
$url = 'http://api.ipinfodb.com/v2/ip_query.php?key='.$ipinfodb_api_key.'&ip='.$ip.'&timezone=false';
$content = @file_get_contents($url);
if ($content != FALSE) {
    $xml = new SimpleXmlElement($content);
    if ($xml->Latitude) $latitude = $xml->Latitude;
    if ($xml->Longitude) $longitude = $xml->Longitude;
}
    // return latitude or longitude or do further processing
}

Darin Dimitrov · Accepted Answer · 2011-08-29 22:12:37Z

0

If the remote server doesn't support JSONP, due to the same origin policy restriction, you cannot call it directly from javascript (unless of course you write your own browser and implementation of javascript which doesn't respect this policy).

To workaround this restriction you could write a server side script on your domain that will act as a bridge between your domain and the remote domain (api.ipinfodb.com) and then send the AJAX request to your own server side script.

answered Aug 29, 2011 at 22:12

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

2 Comments

Albert Rannetsperger Over a year ago

OK thanks, i've just had a quick look into this and gonna try the server side script route. good advice!

Ross Over a year ago

Fortunately it does support JSONP, but with a different URL.

Dr.Molle · Accepted Answer · 2011-08-29 22:24:41Z

0

Try this url:

http://api.ipinfodb.com/v3/ip-city/?key=<your_api_key>&format=json&callback=?

...and send the request via GET(leave data empty)

http://ipinfodb.com/ip_location_api_json.php

answered Aug 29, 2011 at 22:24

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Comments

gislikonrad · Accepted Answer · 2011-08-29 23:10:38Z

0

You could write a webmethod in your webapplication that does a webrequest from your server. In essence, you're wrapping the call with another function and then you can call your function since it's the same origin.

answered Aug 29, 2011 at 23:10

gislikonrad

3,5912 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Cross Domain jQuery .AJAX problems

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related