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

前端之家收集整理的这篇文章主要介绍了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文件


咳咳,还是那句话

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

原文链接:https://www.f2er.com/json/289161.html

猜你在找的Json相关文章