【笔记】通过jsonp方式获取用户ip地址

此处用到第三方接口，有可能以后会失效：http://pv.sohu.com/cityjson

 

方式一：用ajax（不在第三方接口的白名单内，会跨域）

$.ajax({
    type: "GET",
    url: 'https://pv.sohu.com/cityjson',
    cache: false,
    async: false,
    dataType: "json",
    success: function (res) {
        alert(res);
    },
    error: function () {
        alert("请检查网络或稍后重试");
    }
})

得到的结果就是显示跨域

方式二：利用jsonp的方式（即通过创建script标签来实现）

先尝试一下这个接口直接通过浏览器url请求得到的结果内容是什么，如图可以知道该接口返回的是一个 returnCitySN 变量，直接通过script引入的话，就相当于一个全局变量

那就在我们脚本文件里面加入以下代码即可

var new_js = document.createElement("script");
try {
    document.body.appendChild(new_js);
    new_js.src = 'http://pv.sohu.com/cityjson';
} catch (err) {
    console.log("创建script标签失败");
}

// 监听script标签加载完毕
new_js.onload = new_js.onreadystatechange = function () {
    if (!this.readyState //这是FF的判断语句，因为ff下没有readyState这个值，IE的readyState肯定有值
        || this.readyState == 'loaded' || this.readyState == 'complete' // 这是IE的判断语句
    ) {
        console.log("ip地址：", returnCitySN);
        document.body.removeChild(new_js);
    }
};

最终得到的结果就是