CODEWITHSUNDEEP
jqueryajaxapicross-domain
Albert Rannetsperger
Albert Rannetsperger

Reputation: 934

Cross Domain jQuery .AJAX problems

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.

Upvotes: 2

Views: 2146

Answers (5)

Ross
Ross

Reputation: 14415

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.

Upvotes: 3

Allen Liu
Allen Liu

Reputation: 4038

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
}

Upvotes: 1

gislikonrad
gislikonrad

Reputation: 3571

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.

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117314

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

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

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.

Upvotes: 0

Related Questions