简单谈谈json跨域


Posted in Javascript onMarch 13, 2016

这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^

首先,先了解浏览器有一个很重要安全性限制,即为同源策略:不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~

简单的说,只要协议,端口,域名有一个不同,即为跨域!

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。

解决方法:

1.使用jsonp解决跨域 :(仅适用于GET请求)

实现原理:<script>  标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

使用JavaScript代码解决

var eleScript = document.createElement("script"); 
  eleScript.type = "text/javascript"; 
  eleScript.src = "http://example2.com/getinfo.php"; 
  document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

使用jquery解决

$.ajax({ 
    url: http://跨域的dns/document!searchJSONResult.action, 
    type: "GET", 
    dataType: 'jsonp',   //主要是这里和原来的json改变了!
    jsonp: 'jsoncallback', 
 })

2.使用HTML5的window.postMessage方法来跨域传送数据   (只兼容IE8+、FireFox、Chrome、Opera等浏览器)

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。

------------暂且先介绍这2种解决方法……其实还有很多其他的,之后再一一补充-----------------

Javascript 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
实例分析javascript中的异步
Jun 02 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 #Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 #Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 #Javascript
Node.js的Express框架使用上手指南
Mar 12 #Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 #Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 #Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 #Javascript
You might like
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
简单谈谈python中的语句和语法
2017/08/10 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
使用Django框架创建项目
2022/06/10 Python