jsonp实现跨域调用百度地图接口

分享下自己在使用百度地图 IP定位API 时解决浏览器跨域问题的心得

JSONP

Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript 的浏览器都会使用这个策略。

json想必大家都听过或已经使用过，它就是一种轻量级的数据交换格式，而 jsonp 其实就是给 json 套上了一个函数名，例如：

// json 
{
    "province": "广东省","city": "珠海市"
}
 
// jsonp
funName(
    {
        "province": "广东省","city": "珠海市"
    }
)

使用 jsonp 解决跨域

刚刚我们简单的了解了下什么是 jsonp,那我们现在就开始实际代码操作下，用 jsonp 解决浏览器跨域问题。

百度地图 IP定位AIP

URL: http://api.map.baidu.com/location/ip?ak=请输入您的AK

AK 就是你申请的密钥

直接把 url 往浏览器里输入，回车，服务器返回的 json 数据是这样的：

{
  "address": "CN|广东|珠海|None|CHINANET|0|0","content": { "address_detail": { "province": "广东省","city": "珠海市","district": "","street": "","street_number": "","city_code": 140 },"address": "广东省珠海市","point": { "y": "2526069.55","x": "12641851.33" } },"status": 0 }

如果我们还是按照平常去写ajax请求，那么肯定会报错，因为你的程序和百度，是跨域的访问。但是不用着急，百度已经想到了会有这个问题，它留了一手，有个callback参数。这个参数就能将返回来的 json带上一个函数名，这个函数名是自己定的。

所以，我们现在需要做的是把这个 json 数据包在一个函数名里面，让它变成 jsonp 的形式，于是我定义了一个函数名 showLocation ， 然后让 callback 回调函数等于 showLocation

代码如下：

<script type="text/javascript">
    /** * 定位用户所在城市 * @author will * @date 2016-09-22 * */
 
    // 页面加载完自动执行
    $(function() {
        location ();
    })
 
    /** * callback 自定义的回调函数 * @param {[json]} data [请求返回的json数据] * */
    function showLocation(data) {
        // 定位的地址信息 根据需要写入对象属性
        var locationInfo = {
            // 省份
            province: data.content.address_detail.province,// 城市
            city: data.content.address_detail.city
        }
        alert("检查到您的IP地址为" + locationInfo.province + locationInfo.city);
    }
    function location() {
        var url = "http://api.map.baidu.com/location/ip?ak=你的密钥"
        + "&callback=showLocation";
        $.getScript(url);
    }
 
    </script>

运行结果

以上就是我的分享，因为js代码中我用了jquery的语法，所以页面里还需要引入jquery文件。

咳咳，还是那句话

还是要不断学习，因为你还很年轻