简单谈谈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 array 数组详解
Mar 22 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
详解vue项目打包步骤
Mar 29 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
理解javascript封装
2016/02/23 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python脚本实现验证码识别
2018/06/07 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python中open函数的基本用法示例
2019/09/07 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
优秀技术工人先进材料
2014/02/17 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
查摆剖析材料范文
2014/09/30 职场文书
个人四风问题整改措施
2014/10/24 职场文书
五一劳动节活动总结
2015/02/09 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2015元旦感言
2015/12/09 职场文书