javascript跨域获取json数据
2015-12-29 13:02
411 查看
项目在开发过程中,用到了天气预报的功能,所以需要调用天气预报的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错误原因:
虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>),并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。jsonp正是利用这个特性来实现的。
我的天气预报的数据来源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的回调函数。参考:/article/4985247.html
百度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] /article/4985247.html
[3] http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0
[4] /article/5062181.html
[5] /article/5649177.html
说到跨域,就得知道同源策略。
同源策略(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正是利用这个特性来实现的。
我的天气预报的数据来源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的回调函数。参考:/article/4985247.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] /article/5315908.html[2] /article/4985247.html
[3] http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0
[4] /article/5062181.html
[5] /article/5649177.html
相关文章推荐
- js解决中文乱码
- js类、原型——学习笔记
- jsp中div遍历list集合
- JS实例操作QQ空间自动点赞方法
- JS判断当前使用的是哪个浏览器及其版本
- Drupal 引入JS文件的几种方式
- highcharts 绘制图标的JAVASCRIPT 类库 收藏
- Js 模拟鼠标点击事件
- JS获取浏览器信息
- JS表情替换代码,这里使用字符代替图片路径
- JS正则匹配中文
- JS 中 indexOf 的用户及注意事项
- JS 去除字符串中的最后一个字符
- Json基本概念
- 上传 js (部分代码)
- javascript的未知尺寸图片保持比例水平垂直居中函数
- JS设置cookie、读取cookie、删除cookie
- javascript四舍五入tofixed
- 序列化:json_encode/json_decode 与 serialize/unserialize
- JavaScript学习笔记(一)——JS基础知识介绍