简单谈谈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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
JS实现鼠标移动拖尾
Dec 27 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 session
2013/10/28 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
详解python Todo清单实战
2018/11/01 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
What is view? why do we have view?
2012/06/22 面试题
高中数学教师求职信
2013/10/30 职场文书
大学活动邀请函
2014/01/28 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
原告代理词范文
2015/05/25 职场文书
python pyhs2 的安装操作
2021/04/07 Python