简单谈谈json跨域
作者:bea
这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源策略:不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~ 简单的说,只要协议,端口,域名有一个不同,即为跨域! 然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。 解决方法: 1.使用jsonp解决跨域
这一篇文章呢,主要是之前一直听别人讲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种解决方法……其实还有很多其他的,之后再一一补充-----------------
有用 | 无用
首先,先了解浏览器有一个很重要安全性限制,即为同源策略:不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~
简单的说,只要协议,端口,域名有一个不同,即为跨域!
然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。
解决方法:
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正则表达式匹配 div style标签
- Angularjs整合微信UI(weui)
- 一步步教大家编写酷炫的导航栏js+css实现
- 原生javascript+css3编写的3D魔方动画旋扭特效
- 基于javascript html5实现3D翻书特效
- php基于redis处理session的方法
- 使用javascript插入样式
- jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
- javascript实现数组去重的多种方法
- javascript实现PC网页里的拖拽效果
- Jquery实现简单的轮播效果(代码管用)
- node模块机制与异步处理详解
- JS中创建函数的三种方式及区别
- 使用jQuery操作HTML的table表格的实例解析
- Javascript数组Array方法解读
- GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
- Javascript数组Array基础介绍
- 深入探究JavaScript中for循环的效率问题及相关优化