简单谈谈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 02 Javascript
关于this和self的使用说明
Aug 01 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python调用摄像头显示图像的实例
2018/08/03 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
自荐信格式简述
2014/01/25 职场文书
九年级化学教学反思
2014/01/28 职场文书
自主招生推荐信范文
2014/05/10 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS