简单谈谈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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP 处理图片的类实现代码
2009/10/23 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python六大开源框架对比
2015/10/19 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python3模拟登录操作实例分析
2019/03/12 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python中对_init_的理解及实例解析
2019/10/11 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
计算机个人求职信范例
2014/01/24 职场文书
会计岗位说明书
2014/07/29 职场文书
会计专业求职信
2014/08/10 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
日元符号 ¥
2022/02/17 杂记
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
全网非常详细的pytest配置文件
2022/07/15 Python