百度地图api 跨域

在现实生产中，我们有时候需要用到ajax请求某个接口，一般我们会使用服务端web引用的方式，但是呢，如果服务器的传输层做了限制呢？比如你的服务器只提供局域网内访问，是连不了互联网的，那么就悲剧了，用不了web引用。那么应该怎么处理呢？

 

 

有一种解决方式，就是用ajax请求，利用客户端的互联网链接，去请求对应的数据。

这里遇到了一个问题，跨域！！！！

因为你访问的域名或IP地址，与目标接口的api地址，可能在不同的域名内，那么就会导致一个神奇的错误。

这个错误叫：No Transport

千万不要小看了这个错误，很多时候你无论怎么调，他总会出现，导致你的ajax请求失败。

 

我们常见的ajax跨域请求，都会推荐使用jsonp来实现，好多人不知道什么叫jsonp。其实我也不知道，但是是不是实现跨域，就一定要用到这个东西呢？

 

我们都知道，一般请求一个接口，较常用的都会返回一个json字符串，实际上什么jsonp，都只是把这个json字符串，加多了一个函数名罢了。比如，我的一个返回值是{name:'名字'}，那么如果是jsonp返回，假设函数名是funName，那么他就会返回一个funName({name:'名字'})

 

 

明白了吗？其实就是返回了一个函数。其核心，是用到了ajax里面的一个叫jQuery.getScript(url);函数，这个函数很美，他能让我们加载远程的一个js文件，然后执行这个js，在jq的1.2以上版本，这个函数有了一个突破，能跨域调用。于是乎，jsonp就诞生了。

 

 

啥都不说了，从实例来讲述这个：目前，我需要在客户端调用百度的地图接口：http://api.map.baidu.com/geoconv/v1/?

这个接口呢，是进行经纬度转换的，其参数包括

coords=经度1,纬度1;经度2,纬度2&from=源坐标类型&to=目标坐标类型&ak=一个百度地图的token

这个接口怎么用的呢，自己百度一下。

 

 

如果我们照平常去ajax请求那么肯定会报错，因为你的程序和百度，是跨域的访问。No Transport 来了

 

 

再找找他的api文档，噢~~~百度已经想到了会有这个问题，他留了一手，有个callback参数，美美的。这个参数就能讲返回来的json带上一个函数名，这个函数名自己指定。没错，就是指定这个callback参数。于是我们的url要变形，变成http://api.map.baidu.com/geoconv/v1/?coords=经度1,纬度1;经度2,纬度2&from=源坐标类型&to=目标坐标类型&ak=一个百度地图的token&callback=funName

 

然后我们在外部指定一个funName的函数，就能获取到返回来的结果啦。

整段代码如下：

 function showLocation(text) {
            alert(
            'status:' + text.status + '\r\n' +
            'result:' + text.result + '\r\n' +
            'x1:' + text.result[0].x + '\r\n' +
            'y1:' + text.result[0].y + '\r\n' +
            'x2:' + text.result[1].x + '\r\n' +
            'y2:' + text.result[1].y
            );
        }
        function test() {
            var url = "http://api.map.baidu.com/geoconv/v1/?coords=经度1,纬度1;经度2,纬度2&from=源坐标类型&to=目标坐标类型&ak=一个百度地图的token"
            + "&callback=showLocation";
            jQuery.getScript(url);
        }

 

 

 

 

所以说，ajax实现跨域调用，就是如此简单。