简单谈谈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 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
js实现简单的打印表格
Jan 15 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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代码优化的53个细节
2014/03/03 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
如何在PHP中读写文件
2020/09/07 PHP
jquery 上下滚动广告
2009/06/17 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
three.js 入门案例详解
2018/01/23 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python求出0~100以内的所有素数
2018/01/23 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
环境科学专业个人求职信
2013/09/26 职场文书
演讲稿的写法
2014/05/19 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
心灵点滴观后感
2015/06/02 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js