简单谈谈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操作Cookies包括(读取添加与删除)
Dec 26 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
详解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
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python遍历pandas数据方法总结
2018/02/09 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
某公司.Net方向面试题
2014/04/24 面试题
医护人员英文求职信范文
2013/11/26 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
教学质量评估实施方案
2014/03/17 职场文书
科研课题实施方案
2014/03/18 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
起诉状范本
2015/05/20 职场文书
建国大业观后感
2015/06/01 职场文书
新学期开学标语2015
2015/07/16 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Python实战之实现简易的学生选课系统
2021/05/25 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers