简单谈谈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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
8个PHP数组面试题
2015/06/23 PHP
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
详解django三种文件下载方式
2018/04/06 Python
Python rstrip()方法实例详解
2018/11/11 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python保留小数位的三种实现方法
2020/01/07 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
违反工作纪律检讨书
2014/02/15 职场文书
安全生产专项整治方案
2014/05/06 职场文书
标枪加油稿
2015/07/22 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android