常见的javascript跨域通信方法


Posted in Javascript onDecember 31, 2015

本文主要介绍几种常见的javascript跨域通信方法。首先讲解一下JSONP。
1、JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
下面我们来介绍下JSONP的具体实现。
我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。远程服务器remoteserver.com根目录下有个remote.js文件代码如下:
alert('我是远程文件'); 
本地服务器localserver.com下有个jsonp.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。

现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。jsonp.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 var localHandler = function(data){ 
  alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result); 
 }; 
 </script> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

remote.js文件代码如下:
localHandler({"result":"我是远程js带来的数据"}); 
成功运行,看来跨域远程获取数据的目的实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?这时我们就需要将服务端提供的js脚本动态生成就行了,调用者可用通过传参告诉服务端自己需要什么函数,jsonp.html的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script type="text/javascript"> 
 // 得到航班信息查询结果后的回调函数 
 var flightHandler = function(data){ 
  alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); 
 }; 
 // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) 
 var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; 
 // 创建script标签,设置其属性 
 var script = document.createElement('script'); 
 script.setAttribute('src', url); 
 // 把script标签加入head,此时调用开始 
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script> 
</head> 
<body> 
 
</body> 
</html>

这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。
我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):

flightHandler({ 
 "code": "CA1998", 
 "price": 1780, 
 "tickets": 5 
});

传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成!
但是JSONP存在一点问题,就是由远程服务端负责包装json数据,并调用命名函数,这种方式存在安全隐患,在使用JSONP时,必须完全信任服务端所提供的数据,恶意脚本就可以直接接管我们的应用。所以接下来我们要介绍一种别的方式,来避免这种安全隐患。
2、CORS
CORS(Cross OriginResource Sharing,跨源资源共享)实现了跨源XMLHttpRequests,跨源HTTP请求包括一个Origin头部,它为服务器提供HTTP请求的源信息。头部由浏览器保护,不能被应用程序代码更改。这种方式远比评估外部输入的方式安全。
以前的ajax只能同源请求,现在通过XMLHttpRequests二级,可以进行跨域请求。假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"跨域"也就以此由来。
利用 CORS,http://www.test2.com 只需添加一个标头,就可以允许来自 http://www.test1.com 的请求。php代码如下:

header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

其中*表示允许任何域向我们的服务端提交请求。也可以设置指定的域名,代码如下:

header("Access-Control-Allow-Origin:http://www.test2.com");

设置好头信息之后,其他域就可以进行请求了。
        使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。
xhr.open('GET', ' http://www.test2.com '); 
 接下来介绍另外一种实时通信方式:
3、Cross-document messaging
跨文档信息通信。使用这个功能,只要获取到网页所在窗口对象的实例,不仅同原的web网页可以互相通信,也可以实现跨域通信。要想接受从其他窗口发送来的信息,必须对窗口对象的onmessage事件进行监听,其他窗口可以通过postmessage方法来传递数据,该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何js对象,第二个参数为接收消息的对象窗口的url地址。
下面进行试验,主页面index.html代码如下:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
 </head> 
<script type="text/javascript"> 
 function sendIt(){ 
  document.getElementById("otherPage").contentWindow 
  .postMessage(//向子窗口发出请求 
   document.getElementById("message").value,//值 
   "http://127.0.0.1:8020"//目标域 
  ) 
 } 
</script> 
 <body> 
  <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe> 
  <br /><br /> 
  <input type="text" name="message" id="message" value="" /> 
  <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" /> 
 </body> 
</html>

 窗口所引用页面other.html代码如下:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
<script type="text/javascript"> 
 window.addEventListener("message",function(event){//通过onmessage监听 
  //将从父窗口传来的数据展现出来 
  document.getElementById("content").innerHTML+=event.data+"<br>"; 
 },false); 
</script> 
 </head> 
 <body> 
  信息来自于另外一个域 
  <div id="content"> 
    
  </div> 
 </body> 
</html>

试验结果如下:

常见的javascript跨域通信方法

可以看到在81端口服务器中的index.html和8020端口的服务器中的other.html进行的通信。
完整代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
<script type="text/javascript">
 function sendIt(){
 document.getElementById("otherPage").contentWindow
 .postMessage(//向子窗口发出请求
 document.getElementById("message").value,//值
 "http://127.0.0.1:8020"//目标域
 )
 }
</script>
 <body>
 <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
 <br /><br />
 <input type="text" name="message" id="message" value="" />
 <input type="button" name="" id="" value="发送跨域消息" onclick="sendIt();" />
 </body>
</html>

CrossDocumentMessaging_index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
<script type="text/javascript">
 window.addEventListener("message",function(event){//通过onmessage监听
 //将从父窗口传来的数据展现出来
 document.getElementById("content").innerHTML+=event.data+"<br>";
 },false);
</script>
 </head>
 <body>
 信息来自于另外一个域
 <div id="content">
 
 </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
javascript实现input file上传图片预览效果
Dec 31 #Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 #Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 #Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 #Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php微信开发接入
2016/08/27 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python批量更改文件名的实现方法
2017/10/29 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python中return如何写
2020/06/18 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
简历自荐信
2013/12/02 职场文书
上班睡觉检讨书
2014/01/09 职场文书
留学推荐信范文
2014/05/10 职场文书
审美与表现自我评价
2015/03/09 职场文书
李强优秀员工观后感
2015/06/16 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js