简单谈谈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字符串与数组转换汇总
May 26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
详解JS中的柯里化(currying)
Aug 17 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
js获取Get值的方法
2016/09/29 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
深入浅析var,let,const的异同点
2018/08/07 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
python调用shell的方法
2013/11/20 Python
深入理解Django的中间件middleware
2018/03/14 Python
pandas中去除指定字符的实例
2018/05/18 Python
python将回车作为输入内容的实例
2018/06/23 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python 中@property的用法详解
2020/01/15 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2015年端午节活动方案
2015/05/05 职场文书
董事长开业致辞
2015/07/29 职场文书
高一数学教学反思
2016/02/18 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
详解python的异常捕获
2022/03/03 Python