HTML5项目笔记8：使用HTML5 的跨域通信机制进行数据同步

离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互。 

所以离线应用系统最终会做成类似C/S架构的客户端应用程序。这边基于Chrome或者 Safari浏览器的 Web Application（Web 应用程序插件）无疑是最好的选择。 

这边以Chrome 的 Web Application 为例，离线系统做成Web 应用程序之后，与服务端的交互就变成最麻烦的一件事了，因为离线Web应用程序是安装在各个用户的浏览器上面，而最终的Server，只是一个由终端服务方提供的固定地址。那么从本地浏览器对Server发起请求，就存在这跨域通信的情况。 

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。因为同源策略的限制，域名www.xx1.com下的js无法访问和操作www.xx2.com域名下的对象。

下面是一个关于跨域访问的说明清单，摘自博客园的一篇文章：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许 （cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

 

HTML5提供了跨文档消息机制（Cross Document Messaging），它具备了跨越frame、tabs或windows通信的能力。

PostMessage API

window.postMessage是安全启用跨域通信的方法。通常情况下，不同的页面上的脚本只允许相互访问和执行他们的网页，window.postMessage提供了一个控制机制，以规避此限制的方式是安全的。 

浏览器支持情况：

浏览器类型	版本号
Chrome	2.0版本及以上
FireFox	3.0版本及以上
Internet Explorer	8.0版本及以上
Opera	9.6版本及以上
Safari	4.0版本及以上

 

 

数据发送方：otherWindow.postMessage(message, targetOrigin);

otherWindow

对另一个窗口的引用，这边可以使用的contentWindow属性的iframe元素，或通过window.open返回的对象，或通过frames命名window.frames。

message

发送到其它窗口的数据。

targetOrigin

数据发送的目标地址。

 

数据接收方：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)

{  if (event.origin !== "http://XXXX")    return;

  // ... }

event.data

获取从其他窗口传输过来的数据对象。

event.origin

postMessage的发送消息时的窗口的起源。这个字符串是该协议的串联和“:/ /”，主机名（如果有的话），和“：”如果一个端口，并从给定的协议的默认端口不同的端口号。   

event.source

一个窗口之间建立双向沟通两个不同来源的窗户，代表了你目前的接收方的窗口，你可以使用这个对象发送消息。 

我们离线系统中的Information.htm页面保存的是当前登录用户的相关信息，假设现在的网络是在线情况下，那我们的保存功能就需要同步保存到服务端。所以我们的Information.htm页面除了保存之外，还多了跨域通讯相关实现代码。

 

同样的，我们也需要一个跨域访问的服务端，那我们就做个服务端，设计数据库如下：

这个表的设计是相对于我们客户端的数据表，用来保存或者修改客户端提交上来的数据。然后我们在服务端写好与之相关的操作就行了。服务端这边也要建立一个页面:crossDomain.htm,作为跨域访问的源（附件源码中有关于服务端这块的代码）。在crossDomain.htm页面里面我们写好程序处理客户端传递过来的值。

代码如下：

  //这边添加了一个监听事件，监听客户端传递过来的值，并进行处理    
        window.addEventListener("message", receiveMessage, false);
        function receiveMessage(event) {
            SaveUserInfo(event.data, event.source, event.origin);
        }
        
        //这边是处理程序
        //我们在这边做了个Web服务，把Json化的页面表单拿进去保存
        //还有一步就是将执行的结果进行反馈,event.source指的是发送方的ContentWindow，
        //event.origin指的是发送方的URL地址。这样就实现了我们向发送源反馈信息结果的目的。
        //这种方式叫做跨域通信的对话机制
        function SaveUserInfo(UserInfoStr,source,origin) {
            $.ajax({
                type: "POST",
                contentType: "application/json;utf-8",
                url: "WebService.asmx/PostInformation",
                data: "{UserInfoStr:'" + UserInfoStr + "'}",
                dataType: 'json',
                anysc: false,
                success: function (data) {
                    if (data.d=="1") {
                           source.postMessage("保存成功！",origin);
                    }
                    else {
                        source.postMessage("保存失败！", origin);
                    }
                }
            });
        }

 

现在我们来看一下发起跨域请求的页面是怎么写的，写在我们的Information.htm页面里。

首先，我们加一个iframe元素，用来链接我们跨域交互的那个页面,然后我们获取那个iframe的contentWindow，并以它为源来发送信息。

"http://192.168.21.22:86/CRXServer/crossDomain.htm"：假设这个地址则是我们服务端页面的所在地址，这样子，我们就把表单的数据发送过去了。

代码如下：

function crossDomain() {
          var UserInfoJson = UserInfo_Serialy();
          var ifrCrossDomain = document.getElementsByTagName("iframe")[0].contentWindow;
          ifrCrossDomain.postMessage(UserInfoJson,       
          "http://192.168.21.22:86/CRXServer/crossDomain.htm");
    }
    

服务端接收到表单数据之后，进行了数据处理，处理完成之后反馈信息到发送端（也就是我们发起请求的客户端），我们的发送端接收到信息，并进行处理，所以发送端这边还需要加一个监听事件：

window.addEventListener("message", receiveMessage, false);
        function receiveMessage(event) {
            alert(event.data);
  }

一旦监听到服务端向我们返回数据，我们就输出数据。 

这样，流程环节就出来了:

提交保存之后，我们会弹出一个对话框，显示“保存成功！”，那显示的是服务端返回的数据，同时，数据库中也保存进了数据。

 

关于XMLHttpRequest Level 2

HTML5中定义了XMLHttpRequest Level 2，它有两方面的增强：跨域通信，通信进度通知(progress events),有兴趣的可以了解下：

http://www.html5rocks.com/en/tutorials/file/xhr2/

 

关于Chrome Web Application（chrome Web 应用程序插件）中的跨域：

{

  "name": "My extension",

  ...

  "permissions": [

    "http://192.168.21.22/"

  ],

  ...

}

这样就可以直接在插件里面的脚本中访问服务端的数据，当然安全性方面需要设置，这些我们会在后面的Chrome Web Application章节里详细了解。

 

源码参考：CrossCommunication