简单谈谈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 相关文章推荐
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
Ant Design的Table组件去除
Oct 24 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的异常处理类Exception的使用及说明
2012/06/13 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript计时器详解
2015/02/28 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
大学生的创业计划书就该这么写
2014/01/30 职场文书
学生周末长期请假条
2014/02/15 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
班级寄语大全
2014/04/10 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python