简单谈谈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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
详解Node.JS模块 process
Aug 31 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php自动加载方式集合
2016/04/04 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP7修改的函数
2021/03/09 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
控制打印时页眉角的代码
2007/02/08 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python pickle模块用法实例
2015/04/14 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python异常的检测和处理方法
2018/10/26 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
财务会计专业毕业生自荐信
2013/10/19 职场文书
车间操作工岗位职责
2013/12/19 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
详解JS数组方法
2021/11/20 Javascript