简单谈谈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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 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
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
google地图的路线实现代码
2009/08/20 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
js实现漫天星星效果
2017/01/19 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python实时监控cpu小工具
2018/06/21 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
生日寄语大全
2014/04/08 职场文书
群教班子对照检查材料
2014/08/26 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
React Fragment介绍与使用详解
2021/11/11 Javascript