jump to navigation

Get Your IP with JQuery December 26, 2011

Posted by Tournas Dimitrios in JQuery.

Locating visitor’s IP address with server-side code is only one line of code , for example , with PHP it would be : ” echo $_SERVER[REMOTE_ADDR] ” . Now let’s demonstrate an alternative method , this time client-side . This example will use an AJAX call to a remote service which is JSONP  compatible . First let’s be clear from the beginning , all client-side code (Flash’s Actionscript , Javascript’s AJAX-calls , Java-applets , ) run in a “sandbox” shell . A client-side code is allowed to request data from the server of it’s origin and would normally restricted to access data from a server in a different domain . Actionscript3  could access resources(data) from a different domain if that domain gives permissions to do so   (crossdomain.xml ) or using the “Security.allowDomain ” function . Another method to access data from an remote domain is by implementing a “proxy-server” on your web-host , but this approach is slower as it requires two or more calls to fetch the data  .  Ajax requests are under the same limitations , you cannot do cross-domain calls .  JSONP or “JSON with padding” is a method used to bypass the cross-domain policies in web browsers . Using JSONP, you can dynamically insert JavaScript with JSON Data, from different domains . You just need to make sure that the third-party Service supports JSONP. JSONP is a very simple way to get JSON data from ‘other domains’. For those new to JSONP, read on Wikipedia .

To retrieve your IP Address using JSONP and jQuery , use the following code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
        $("#GetIP").click(function () {
            var jqxhr = $.getJSON("http://jsonip.appspot.com?callback=?",
                        function (data) {
            .error(function () { alert("error"); })
<!-- Your HTML code --> 
<input id="GetIP" type="button" value="Get Your IP Address" />

In the code above , we are calling a service which supports JSON calls . If the request URL includes the string “callback=?“, the request is treated as JSONP.
JSONP comes with its own set of security risks . Read this article to explore ways to minimize this risks .
Note: As of jQuery 1.5 , all of jQuery’s Ajax methods return a superset of the XMLHTTPRequest object i.e. the jQuery XHR object . Read more here


1. Merced - September 7, 2013

Hey there! I actually delighted in reading your article.
Hope you write more similar to this!

2. Pieczątki Warszawa - September 18, 2013

Pretty great post. I just stumbled upon your weblog
and wished to say that I’ve truly loved browsing your blog posts.
In any case I’ll be subscribing inn your feed and I am hopinbg you write
once more soon!

3. rep - April 18, 2014

Spot on with this write-uρ, I honestly Ьelieve tҺаt tɦiѕ web site ոeeds faг more
attention. I’ll probablƴ be bɑck aցain tߋ read tɦrough morе, thaոks forr thе info!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s