简单谈谈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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 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中adodbzip类实例
2014/12/08 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python实现点对点聊天程序
2018/07/28 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python 读取.nii格式图像实例
2020/07/01 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
寄语学生的话
2014/04/10 职场文书
中班上学期个人总结
2015/02/12 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
mysqldump进行数据备份详解
2022/07/15 MySQL