利用js获取客户端ip的方法

获取ip有两种方式，下面分别对每种方法进行研究。

1. 通过script标签引入url

比如如下代码：

<scripttype="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <scripttype="text/javascript"> alert(returnCitySN.cip) </script>

访问链接 http://pv.sohu.com/cityjson?ie=utf-8 ，我们可以看到网页返回的是一段语句：

var returnCitySN = {"cip": "192.168.1.1", "cid": "CN", "cname": "CHINA"};

所以第一段js代码就相当于

<script type="text/javascript"> var returnCitySN = {"cip": "192.168.1.1", "cid": "CN", "cname": "CHINA"}; </script>

所以我们在后面就可以访问这个json变量并读取它的数据了。

也有的网站服务提供回调函数的，比如http://freegeoip.net。这个网站支持json，xml，csv，jsonp格式。我们可以将上面的url换成http://freegeoip.net/json/?callback=foo

<scripttype="text/javascript" src="http://freegeoip.net/json/?callback=foo"></script> <scripttype="text/javascript"> function foo(json){ alert(json.ip); // alerts the ip address } </script>

这个网址和上面的不同，返回的是jsonp，所以我们可以直接使用函数foo，这个名字可以自定义。上面的代码相当于

<scripttype="text/javascript"> foo({"ip":"192.168.1.1"}); </script> <scripttype="text/javascript"> function foo(json){ alert(json.ip); // alerts the ip address } </script>

如果把callback函数去掉，譬如http://freegeoip.net/json/，返回的就只有json数据了，但是这个json数据因为没有变量名，不好调用，我们就要用其他的方法来调用这个json数据了。

2. ajax调用

如果该url返回的是json格式的数据，要想调用，就需要用到ajax。

<script > $.getJSON('//freegeoip.net/json/', function(data) { console.log(JSON.stringify(data, null, 2)); }); </script>

以上的代码其实是简写的ajax，写成ajax：

$.ajax({ url: 'http://freegeoip.net/json/', success: function(data){ console.log(JSON.stringify(data)); }, type: 'GET', dataType: 'JSON' });

值得一提的是当dataType和type的选择会影响能不能从服务器返回数据。比如当dataType为json，type为post，则freegeoip不能返回数据。别的服务器比如//gd.geobytes.com/GetCityDetails则是当dataType为json的时候都不能返回。这个应该和服务的后台支持有关系。 还有一些东西，比如//gd.geobytes.com/GetCityDetails如果不加?callback=? getJson就返回不了东西，这些都是服务器支持的问题，就不研究了。