简单谈谈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中的运算符种类及其规则介绍
Sep 26 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
Javascript实现单例模式
Jan 24 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
简单的js计算器实现
Oct 26 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 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命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php中fsockopen用法实例
2015/01/05 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
django-filter和普通查询的例子
2019/08/12 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
基于Python的OCR实现示例
2020/04/03 Python
Python同时处理多个异常的方法
2020/07/28 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
初中毕业生自我评价
2015/03/02 职场文书
担保贷款承诺书
2015/04/30 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python