javascript跨域获取json数据

项目在开发过程中,用到了天气预报的功能,所以需要调用天气预报的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

上一篇:转:cookie和session(一)——原理


下一篇:SQL学习笔记四(补充-1)之MySQL单表查询