JSONP cross-domain request with Ajax issues

Question

I'm trying to use IPInfoDB to obtain the IP geolocation in an application but I'm having issues that I can't resolve. I created a HTML file and did the very basic requirements to get the info from IPInfoDB and it works fine. When I try to run the exact same code inside the application it gives the error "Failed to load resource" in the console on the first attempt and then any attempts after that throw a GET error pointing to the jquery file on line 8516 (developer version of jquery-1.10.2.js). Any help would be greatly appreciated. Below is the code that works perfectly in the html file but throws an error when inside the application.

<!DOCTYPE html>
<html>
<head>

<style>
.IPinfoTableDiv
{
    width:900px;
    margin:auto;
}
.IPinfoTable
{
    width:100%;
}
table thead tr td, table tbody tr td
{
    border: solid 1px lightgrey;
}
</style>

<script src="jquery-1.10.2.js"></script>

<script>
var geoLocationUrl = 'http://api.ipinfodb.com/v3/ip-city/?key=MyKey&format=json';

$(document).ready(function() 
{
function handleData(data)
{
    var newTR = $("<tr/>")
    .append($('<td/>').text(data.cityName))
    .append($('<td/>').text(data.countryCode))
    .append($('<td/>').text(data.countryName))
    .append($('<td/>').text(data.ipAddress))
    .append($('<td/>').text(data.latitude))
    .append($('<td/>').text(data.longitude))
    .append($('<td/>').text(data.regionName))
    .append($('<td/>').text(data.timeZone))
    .append($('<td/>').text(data.zipCode));

    $("#IPInfoBody").append(newTR);
}

jQuery.ajax(
{
    type : 'GET',
    url : geoLocationUrl,
    crossDomain: true,
    dataType : 'jsonp',
    success : function(data)
    {
        console.log("Success");
        console.log(data);
        handleData(data);
    }
});
});
</script>
</head>
<body>
<div class="IPinfoTableDiv">
<table>
    <thead>
        <tr>
            <td>City</td>
            <td>Country Code</td>
            <td>Country Name</td>
            <td>IP Address</td>
            <td>Latitude</td>
            <td>Longitude</td>
            <td>Region</td>
            <td>Time Zone</td>
            <td>Zipcode</td>
        </tr>
    </thead>
    <tbody id="IPInfoBody">
    </tbody>
</table>
</div>
</body>
</html>

I noticed the first time I attempt to load the page in the application and it throws the "Failed to load resources" it gives a link, which, when opened brings up the JSON that I want to use. Attached are images to show what i'm talking about.

Initial Failure with link: 初始故障

Clicking the link brings up the JSON that I want: JSON连结

GET error pointing at jquery file line 8516 if I attempt more than once: 在此处输入图片说明

I am reading up on JSONP and am having trouble understanding it. I read something about it returns the data wrapped in a function, which is what I'm assuming is what is in the link in the second picture. I am not sure why the normal HTML page works fine but the application fails to load the resource on the initial attempt and then just has a GET error that points to jQuery. The application is in an eclipse environment using tomcat to serve it.

UPDATE: In Firefox, it works fine (in the application as well). In Google Chrome, not so much. I'll look into that more and see if I can determine why that is and update accordingly.

UPDATE 2: So I've tested in Firefox and IE(10) and both of those have no issues. It seems to be specific to Chrome. Even using the jsfiddle that Kevin B posted, the issue only occurs in chrome.

Answer 1

The problem ended up being the AdBlock Plus extension blocking the JSONP from loading for some reason. Once I disabled AdBlock Plus, everything works fine in Chrome.

JSONP cross-domain request with Ajax issues

Question

1 answers

solution1
0 ACCPTED 2013-10-30 20:51:06

JSONP cross-domain request with Ajax issues

Question

1 answers

solution1 0 ACCPTED 2013-10-30 20:51:06

solution1
0 ACCPTED 2013-10-30 20:51:06