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

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文件。

---

咳咳，还是那句话

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