javascript跨域获取json数据

2023-01-29 21:42:20

项目在开发过程中，用到了天气预报的功能，所以需要调用天气预报的api，一开始以为直接用ajax调用url就可以获取天气数据，结果涉及到了跨域的问题，这里做一个记录。

说到跨域，就得知道同源策略。

同源策略（Same origin policy），是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略就是指页面上的脚本不能访问非同源的资源(包括HTTP响应和Cookie)

为什么要有同源策略？科普:xss攻击浏览器同源策略与跨域访问

跨域（Cross-Domain ）：违反了同源策略，即域名、协议、端口不完全相同时，js不能进行数据传输或通信。

跨域的错误提示：Origin XX is not allowed by Access-Control-Allow-Origin

解决跨域的方法：

1. 通过jsonp实现跨域

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>），并可以*执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。jsonp正是利用这个特性来实现的。JSONP实际上是一种脚本注入(Script Injection)方式，存在一定的安全隐患

我的天气预报的数据来源api是百度api store提供的，返回的数据是json格式。天气信息是根据登陆用户的信息变化的，所以在添加script的节点需要动态添加。

这里有个问题：动态添加的script节点如何销毁？

jQuery的ajax实现跨域

由于项目用到了jQuery框架，所以直接用jQuery的ajax或者getJSON来实现跨域。根据jQuery的api介绍（http://api.jquery.com/jQuery.getJSON/#urldatacallback），getJSON只是Query的ajax的一种简化写法。利用jQuery的ajax实现跨域和自己添加script的原理是一样的，只不过我们不需要手动的插入script标签以及定义回调函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。参考：http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

   $.ajax({

                type: "GET",

                url: "http://api.duoshuo.com/threads/counts.jsonp?short_name=official&threads=4ff1cbc43ae636b72a00001d",

                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    alert(textStatus);

                    alert(errorThrown);

                    this; // 调用本次AJAX请求时传递的options参数

                },

                dataType: "jsonp",

                success: function (msg, textStatus) {

					alert('ok')

					}

			})

　　百度apistore中的天气api并不支持jsonp，所以，当我采用上述方式请求数据时，返回的数据依然是json，而不是 回调函数（json）的格式，所以无法执行回调函数，此时的错误提示为：Uncaught syntax Error: unexpected token:……，这是因为服务器返回来json数据后直接放入了script标签，等script标签加载完后，会立即把响应的json当js去执行，很明显{"errNum":0,"errMsg":"success","retData":{"city":"\u5317\u4eac","pinyin":"beijing","citycode":"101010100","date":"15-03-03","time":"08:00","postCode":"100000","longitude":116.391,"latitude":39.904,"altitude":"33","weather":"\u6674","temp":"4","l_tmp":"-4","h_tmp":"4","WD":"\u5317\u98ce","WS":"5-6\u7ea7(25~34m\/h)","sunrise":"06:45","sunset":"18:07"}}不是合法的js语句，错误出现报错

2.使用HTML5 postMessage

未完待续

参考文献：

[1] http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

[2] http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

[3] http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0

[4] http://www.cnblogs.com/2050/p/3191744.html

[5] http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

码农公寓

解决跨域的方法：

2.使用HTML5 postMessage

参考文献：

相关文章