简单谈谈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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
JavaScript实现音乐播放器
Aug 14 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
php中$this-&amp;gt;含义分析
2009/11/29 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
js版本A*寻路算法
2006/12/22 Javascript
js 判断 enter 事件
2009/02/12 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
详解python中的异常捕获
2020/12/15 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
售后服务经理岗位职责范本
2014/02/22 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
武侯祠导游词
2015/02/04 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers