常见的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 相关文章推荐
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
理解javascript中的with关键字
Feb 15 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php强制下载文件函数
2016/08/24 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
限制复选框的最大可选数
2006/07/01 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python实现搜索算法的实例代码
2020/01/02 Python
浅析Python 责任链设计模式
2020/09/11 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
自我鉴定四大框架
2014/01/17 职场文书
生产部岗位职责范文
2014/02/07 职场文书
中班幼儿评语大全
2014/04/30 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书