用于Web应用的跨域交互的方法和系统编程频道|福州电脑网

2024年6月13日发(作者：)

(19)中华人民共和国国家知识产权局

(12)发明专利说明书

(21)申请号 CN2.5

(22)申请日 2008.06.25

(71)申请人国际商业机器公司

地址美国纽约

(72)发明人毛新生张柯易立

(74)专利代理机构北京市中咨律师事务所

代理人于静

(51)

G06F17/30

权利要求说明书说明书幅图

(10)申请公布号 CN 101615179 A

(43)申请公布日 2009.12.30

(54)发明名称

系统

(57)摘要

提供了一种用于Web应用的跨域交

用于Web应用的跨域交互的方法和

互的方法和系统，其中属于第一域的Web

应用需要与属于第二域的服务进行交互。

所述方法包括由所述Web应用：在网页中

创建一个iFrame，其中所述iFrame属于所

述第一域；在所述iFrame中创建表单；将

所述表单提交给提供所述属于第二域的服

务的Web服务器并从所述Web服务器接

收响应；以及通过接收所述Web服务器的

响应而刷新所述iFrame，将所述iFrame所

属的域改变为所述第二域，并通过所述表

单中包含的信息来与所述属于第二域的服

务进行跨域交互。

法律状态

法律状态公告日

2021-05-21

2011-08-17

2010-02-24

2009-12-30

法律状态信息

专利权的转移

授权

实质审查的生效

公开

法律状态

专利权的转移

授权

实质审查的生效

公开

权利要求说明书

1.一种用于Web应用的跨域交互的方法，其中属于第一域的Web应用需要与属于

第二域的服务进行交互，所述方法包括由所述Web应用：

在网页中创建一个iFrame，其中所述iFrame属于所述第一域；

在所述iFrame中创建表单；

将所述表单提交给提供所述属于第二域的服务的Web服务器；以及

通过接收所述Web服务器的响应而刷新所述iFrame，将所述iFrame所属的域改变

为所述第二域，并通过所述表单中包含的信息来与所述属于第二域的服务进行跨域

交互。

2.根据权利要求1所述的方法，其中所述方法进一步包括：

基于与所述服务进行交互的结果在所述iFrame中创建结果表单；

将所述结果表单提交到提供属于第一域的服务的Web服务器；

通过接收所述提供属于第一域的服务的Web服务器的响应而刷新所述iFrame，将

所述iFrame所属的域改变为所述第一域；以及

处理所述结果表单中的结果。

3.根据权利要求1所述的方法，其中所述提交表单的步骤进一步包括：

根据所述表单中的数据量的大小，确定通过GET方法还是POST方法来提交所述

表单，其中当所述表单中的数据量较小时，使用GET方法，当所述表单中的数据

量较大时，使用POST方法。

4.根据权利要求2所述的方法，其中所述提交结果表单的步骤进一步包括：

根据所述结果表单中的数据量的大小，确定通过GET方法还是POST方法来提交

所述结果表单，其中当所述结果表单中的数据量较小时，使用GET方法，当所述

结果表单中的数据量较大时，使用POST方法。

5.根据权利要求1所述的方法，其中所述Web应用是富Web应用。

6.根据权利要求1所述的方法，其中所述iFrame在网页中不可见。

7.根据权利要求1所述的方法，进一步包括：

将所述提供属于第一域的服务的Web服务器中针对所述第一域的用户凭证保留在

本地。

8.根据权利要求1所述的方法，进一步包括：

如果所述提供属于第二域的服务的Web服务器需要认证，则由所述Web应用动态

地弹出认证窗口，用于用户在其中输入针对所述第二域的用户凭证。

9.一种用于Web应用的跨域交互的系统，其中属于第一域的Web应用需要与属于

第二域的服务进行交互，所述系统包括：

用于在网页中创建一个iFrame的装置，其中所述iFrame属于所述第一域；

用于在所述iFrame中创建表单的装置；

用于将所述表单提交给提供所述属于第二域的服务的Web服务器的装置；以及

用于通过接收所述Web服务器的响应而刷新所述iFrame，将所述iFrame所属的域

改变为所述第二域，并通过所述表单中包含的信息来与所述属于第二域的服务进行

跨域交互的装置。

10.根据权利要求9所述的系统，其中所述系统进一步包括：

用于基于与所述服务进行交互的结果在所述iFrame中创建结果表单的装置；

用于将所述结果表单提交到提供属于第一域的服务的Web服务器的装置；

用于通过接收所述提供属于第一域的服务的Web服务器的响应而刷新所述iFrame，

将所述iFrame所属的域改变为所述第一域的装置；以及

用于处理所述结果表单中的结果的装置。

11.根据权利要求9所述的系统，其中所述用于提交表单的装置进一步包括：

用于根据所述表单中的数据量的大小，确定通过GET方法还是POST方法来提交

所述表单的装置，其中当所述表单中的数据量较小时，使用GET方法，当所述表

单中的数据量较大时，使用POST方法。

12.根据权利要求10所述的系统，其中所述用于提交结果表单的装置进一步包括：

用于根据所述结果表单中的数据量的大小，确定通过GET方法还是POST方法来

提交所述结果表单的装置，其中当所述结果表单中的数据量较小时，使用GET方

法，当所述结果表单中的数据量较大时，使用POST方法。

13.根据权利要求9所述的系统，其中所述Web应用是富Web应用。

14.根据权利要求9所述的系统，其中所述iFrame在网页中不可见。

15.根据权利要求9所述的系统，进一步包括：

用于将所述提供属于第一域的服务的Web服务器中针对所述第一域的用户凭证保

留在本地的装置。

16.根据权利要求9所述的系统，进一步包括：

用于如果所述提供属于第二域的服务的Web服务器需要认证，则由所述Web应用

动态地弹出认证窗口的装置，所述认证窗口用于用户在其中输入针对所述第二域的

用户凭证。

说明书

技术领域

本发明一般地涉及Web应用，并且具体而言涉及一种用于Web应用的跨域交互的

方法和系统。

背景技术

Web应用是一种基于Web的应用，指的是用户界面驻留在Web浏览器中的任何应

用程序，它是一些Web网页和用来完成某些任务的其它资源的集合。Web应用是

典型的客户机/服务器体系结构的产物，其能够通过网络使得客户机和服务器进行

通信。常见的留言版、聊天室和论坛(BBS)等，都是Web应用。不过这些应用相对

比较简单，而Web应用的真正核心主要是对数据进行处理。

参见图1A，示出了传统的Web应用的模型。在典型的Web应用中，客户机100

的浏览器中的用户界面(UI)中的用户动作可以触发一个请求，并将此请求发送到

Web服务器150。服务器150在接收到该请求后进行某种处理，诸如检索数据、处

理数据、与各种传统系统交互等等。然后服务器150向客户机100返回页面作为响

应。客户机100在接收到响应后，可以继续执行下一个用户动作，从而重复与服务

器150的交互过程。此过程被称为是同步的，也就是说，服务器150强制用户进入

提交-等待-重新显示的过程，使得用户的动作总是与服务器150的处理时间同步。

从时间轴上看，上述交互过程是顺序的，且始终与时间轴同步。在图1A中，向服

务器150发送请求和服务器150返回响应的过程被统称为数据传输。

参见图1B，示出了使用AJAX的富Web应用(Rich Web Application)的模型。客户

机100上运行的富Web应用通过使用AJAX技术与服务器150进行异步通信，从

而无需重新刷新整个页面。术语AJAX是“Asynchronous(异步)JavaScript+XML”的

简写，其由几种新的技术以新的方式组合而成。AJAX包含：

·基于XHTML和CSS标准的表示；

·使用Document Object Model进行动态显示和交互；

·使用XmlHttpRequest与服务器进行异步通信；

·使用JavaScript绑定一切。

使用AJAX可以构建动态的和响应灵敏的Web应用，从而使浏览器可以为用户提

供更为自然的浏览体验。AJAX提供与服务器150异步通信的能力，从而使用户从

传统的请求/响应的循环中解脱出来。借助于AJAX，客户机100可以在浏览器的

用户界面(UI)110中发生用户动作(例如提交请求、输入)时，通过AJAX引擎120

进行客户机端的处理，并在客户机端的处理结束后立即更新并显示浏览器的UI。

同时AJAX引擎120还向服务器150发出异步请求，以便执行服务器端的处理。当

与该请求相应的响应从服务器150返回时，客户机100就可以通过AJAX引擎120

来相应地更新UI 110，而不用刷新整个页面。最重要的是，用户甚至不知道客户

机100上的浏览器正在与服务器150通信，使得Web站点看起来是即时响应的。

因而，Web应用不必完全依赖于从服务器重新载入页面来向用户呈现更改。在图

1B中，向服务器150发送请求和服务器返回响应的过程被统称为数据传输。

传统上，由于客户机的浏览器要刷新整个页面，需要传送大量的数据，因为必须重

新发送整个页面。而如果使用AJAX，服务器可以返回一个包含了某些特定信息的

较短的消息，而不是整个页面，并且只需要刷新浏览器页面上相关的一部分，而不

是刷新整个屏幕。

AJAX的核心是JavaScript对象XmlHttpRequest。它是一种支持异步请求的技术。

简而言之，XmlHttpRequest对象允许客户机端的JavaScript向服务器提出HTTP请

求(可以通过GET或POST方法，但不限于这两种方法，例如，Head/PUT/DELETE

等)并处理响应，而不用在浏览器中重新刷新页面，并且不会阻塞用户。对

XmlHttpRequest对象的详细定义与描述请参见W3C(万维网联盟)的规范

(/TR/XMLHttpRequest)。XmlHttpRequest对象还可以被进一步用

于请求或发送任意类型的数据，而不仅仅限于XML数据。

出于安全性的考虑，基于AJAX的富Web应用只能访问应用所在的当前域中的资

源，而不能实现跨域访问。例如，站点中的AJAX只能访问本站点内

的资源，而不能跨域访问站点中的资源。然而，属于某一域的Web

应用有时需要对属于另一域的服务器进行AJAX请求，以便调用该服务器中的服

务或资源。例如，Web应用想要使用外部的REST(表述性状态转移)服务，诸如

“Google推荐”、“Yahoo拼写检查”等；Web应用想要使用内联网上可用的某种远程

企业REST服务；Web应用想要包括来自外部服务器(诸如CNN)的新闻订阅源

(FEED)；以及Web应用想要创建Mashup(一种新颖的API集成的应用)。

上述的跨域访问受到现有的XmlHttpRequest实现的限制。在默认情况下，请求只

被允许提交给应用所在的当前域中的服务器。这样可以防止来自一个站点的恶意

AJAX代码将用户浏览器作为基础而攻击另一站点，也可以防止一个站点上的关键

信息(诸如用户名、口令等)的泄露。并且，这样符合作为JavaScript安全模型的一

部分的同源策略。

富Web应用常常要与来自其它域的服务进行交互，特别是在SOA或Mashup的环

境中，富Web应用常常需要与多个来自其他域的服务进行交互，跨域的服务交互

能力变得更加重要。但是根据上述的限制，不允许富Web应用与该应用所在的域

之外的其它域所提供的服务进行交互。

因此，为了使得Web应用、尤其是富Web应用能够动态地实现跨域交互，访问来

自其它域的服务器的数据和服务，同时兼顾数据传输的灵活性，对于本领域技术人

员来说，存在对于一种用于Web应用的跨域交互的方法和系统的需要。

发明内容

为了满足Web应用的跨域交互的需要，而提出了本发明。在本发明中，通过由

Web应用创建iFrame，并由iFrame通过表单使用GET或POST(但不限于这两种方

法，例如，Head/PUT/DELETE等)将服务调用上下文和/或数据访问上下文发送到

另一不同域。来自所述另一域的响应可以使得iFrame切换到该另一域，并且可以

调用该域的服务或访问该域的数据。接着iFrame通过表单使用GET或POST将服

务调用结果和/或数据访问结果发送到初始域。来自所述初始域的响应可以使得

iFrame切换回到该初始域，从而能够处理所述结果。

在本发明的第一方面中，提出了一种用于Web应用的跨域交互的方法，其中属于

第一域的Web应用需要与属于第二域的服务进行交互，所述方法包括由所述Web

应用：

在网页中创建一个iFrame，其中所述iFrame属于所述第一域；

在所述iFrame中创建表单；

将所述表单提交给提供所述属于第二域的服务的Web服务器并从所述Web服务器

接收响应；以及

通过接收所述Web服务器的响应而刷新所述iFrame，将所述iFrame所属的域改变

为所述第二域，并通过所述表单中包含的信息来与所述属于第二域的服务进行跨域

交互。

所述方法可以根据所述表单中的数据量的大小，确定通过GET方法还是POST方

法来提交所述表单，其中当所述表单中的数据量较小时，使用GET方法，当所述

表单中的数据量较大时，使用POST方法。

在本发明的第二方面中，提出了一种用于Web应用的跨域交互的系统，其中属于

第一域的Web应用需要与属于第二域的服务进行交互，所述系统包括：

用于在网页中创建一个iFrame的装置，其中所述iFrame属于所述第一域；

用于在所述iFrame中创建表单的装置；

用于将所述表单提交给提供所述属于第二域的服务的Web服务器并从所述Web服

务器接收响应的装置；以及

用于通过接收所述Web服务器的响应而刷新所述iFrame，将所述iFrame所属的域

改变为所述第二域，并通过所述表单中包含的信息来与所述属于第二域的服务进行

跨域交互的装置。

所述系统进一步包括：用于根据所述表单中的数据量的大小，确定通过GET方法

还是POST方法来提交所述表单的装置，其中当所述表单中的数据量较小时，使用

GET方法，当所述表单中的数据量较大时，使用POST方法。

附图说明

在附带的权利要求中阐明了被认为是本发明新颖特性的特征。然而，通过参考以下

结合附图的说明性实施例的详细描述，将最好地理解本发明本身以及其优选使用模

式、另外的目的和优点，在附图中：

图1A示出了传统的Web应用的模型；

图1B示出了使用AJAX的富Web应用的模型；

图2示出了根据本发明一个实施例的用于Web应用的跨域交互的系统及其工作流

程的示例性示意图；

图3示出了根据本发明一个实施例的用于Web应用的跨域交互的系统及其工作流

程的示例性示意图，其是对于图2的继续说明；

图4示出了根据本发明一个实施例的用于Web应用的跨域交互的系统及其工作流

程的示例性示意图，其是对于图3的继续说明；

图5示出了根据本发明一个实施例的用于Web应用的跨域交互的系统及其工作流

程的示例性示意图，其是对于图4的继续说明；

图6是用于实现根据本发明一个实施例的电子商务网站的典型的结账过程的示例性

环境；

图7示出了在浏览器上显示的页面中创建的表单的示例；

图8是根据本发明的一个实施例的用于Web应用的跨域交互的方法的示例性流程

图；以及

图9是示出了一种根据本发明一个实施例的用于Web应用的跨域交互的系统的示

意性框图。

需要注意，在全体附图中，相同或相似的标号指代的是相同或相似的单元或组件。

具体实施方式

在下文中将结合附图对本发明的示范性实施例进行描述。为了清楚和简明起见，在

说明书中并未描述实际实现方式的所有特征。然而，应该了解，在开发任何这种实

际实施例的过程中必须做出很多实现方式所特定的决定，以便实现开发人员的具体

目标，例如符合与系统及业务相关的那些限制条件，其中，这些限制条件会随着实

施方式的不同而改变。此外，还应该了解，虽然开发工作有可能是非常复杂和费时

的，但对得益于这个公开内容的本领域技术人员来说，这种开发工作仅仅是例行的

任务。

此外，还需要说明的一点是，为了避免因不必要的细节而混淆了本发明，在附图中

仅仅示出了与根据本发明的方案密切相关的装置结构和/或处理步骤，而省略了与

本发明关系不大的其它细节。

以下是对本发明及其实施例的详细介绍。首先参见图2，图2示出了根据本发明一

个实施例的用于Web应用的跨域交互的系统及其工作流程的示例性示意图。如图

2所示，所述系统包括服务器200以及服务器250，其中服务器200提供属于域A

的服务和/或数据，而服务器250提供属于域B中的服务和/或数据。服务器200具

有作为中介的代理A 205，用于将相关的应用服务请求或响应传递给服务器200。

服务器250具有作为中介的代理B 260，用于将相关的应用服务请求或响应传递给

服务器250。注意，代理A 205和代理B 260适用于更加通用的针对客户机/服务器

的体系结构。在本发明的可替换实施例中，上述代理也可以被忽略，而由服务器

200和服务器250直接处理来自外部的数据或请求。在本发明的此实施例中，服务

器200和服务器250既可以是物理上独立的两个实体，也可以是逻辑上独立的两个

Web服务器，二者分别提供属于不同域的服务/数据。

当用户想要访问域A时，属于域A的富Web应用210将被调用并运行于客户机的

浏览器上。该富Web应用210与服务器200可以相互通信，因为它们属于相同的

域。在本发明的一个实施例中，在某种情形中，富Web应用210想要跨域调用服

务器250上的属于域B的服务255。在步骤1，富Web应用210首先创建一个

iFrame对象，例如图2中所示的iFrame220。此时，该iFrame 220所在的域是域A。

iFrame对象也可以被称作嵌入式元素或者嵌入式框架，它可以把一个网页的框架

和内容嵌入在现有的HTML网页中，作为现有HTML网页的一个子窗口。iFrame

可以嵌入到HTML网页中的任意部分。它的一大特征是，iFrame所引用的HTML

文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文

件中。但是这两个HTML文件是相互独立的，二者都被看成是完整的文件，而不

是将其中一个看成另一个的一部分。另外，iFrame还可以多次在不同页面内显示

同一内容，而不必重写该内容。通过iFrame对象所在页面的对象模型，可以访问

iFrame对象的属性，但不能访问其内容，从而确保了安全性。根据本发明的实施

例，所创建的iFrame被用于使能Web网页的跨域交互。iFrame的大小是可以调整

的，在本发明的实施例中，iFrame可以是不可见的，以至于用户甚至不会在UI中

看到它。

返回图2，在步骤2，富Web应用210在iFrame 220中创建请求表单230。富Web

应用210将通过用于交互的请求数据来填充所创建的请求表单230。请求表单230

的输入(Input)可以包括：用于处理来自服务255的结果的功能名称；代理A 205的

URL；服务255的URL；用于调用服务255的HTTP动词(verb)；以及用于调用服

务255的数据。请求表单230的方法(Method)可以包括GET或POST。请求表单

230的动作(Action)可以包括：代理B 260的URL。注意，在本上下文中，所述的

请求表单以及将在下文中描述的结果表单中包含的内容仅是作为示例。本领域技术

人员可以理解，根据不同的具体实现方式以及用户需求，表单中的内容可以改变，

而不会脱离本发明的范围。例如，请求表单中可以包含与服务调用或者数据访问有

关的上下文，而结果表单中可以包含与服务调用或者数据访问有关的结果。

在此，将表单用作为数据的容器，被提交的请求或者服务的结果都可以被填入表单

并通过表单进行传输。使用表单的原因在于，通过表单可以传输不同大小的数据。

由于表单中可以包括方法GET或POST，此二者代表表单的不同提交方式，从而

既可以传输少量数据也可以传输大体积的数据。GET和POST的若干区别如下所

述。GET是把参数数据队列加到提交表单的Action属性所指向的URL中，值和表

单内各个字段一一对应，并且在URL中可以看到。POST是通过HTTP POST机制，

将表单内各个字段与其内容放置在HTML头部内一起传送到Action属性所指向的

URL地址，而用户看不到这个过程。GET方法将数据编码到URL里，所以传送的

数据量的大小受到URL长度的限制，适合传送较小的数据，而POST方法传送的

数据量不受限制。

如果要在浏览器中发送表单或数据给服务器端，使用GET方法方便直观，缺点是

访问该网站的用户也可以修改URL串后发送给服务器，如果处理得不够好很容易

出错。而且GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对

URL长度的限制。GET传递的字符串长度不能超过250个字符，如果超过这一长

度，浏览器可能会将URL自动截断，导致数据缺失。另外，GET方法不支持

ASCII字符之外的任何字符，如果包含有汉字或其他非ASCII字符时，需要使用额

外的编码操作。

使用POST方法发送数据时，对于用户来说是不透明的。按照HTTP协议，数据附

加于HTTP的头部信息中，用户不能随意修改。这对于Web应用而言，安全性要

好得多，而且使用POST可以发送大体积的数据给Web服务器。因此，在本发明

的实施例中，可以根据实际传输的数据的大小，由Web应用智能地选择GET或

POST方法来提交表单数据。

返回图2，当在iFrame 220中成功创建并填充请求表单230之后，在步骤3，

iFrame 220将请求表单230提交到服务器250中的代理B 260。

继续参考图3，图3示出了根据本发明一个实施例的用于Web应用的跨域交互的

系统及其工作流程的示例性示意图，其是对于图2的继续说明。如图3所示，所述

系统包括属于域A的服务器200以及属于域B的服务器250，其中服务器200和服

务器250中包括的组件与图2相同。属于域A的富Web应用210运行于客户机的

浏览器上。在步骤4，在服务器250的代理B 260接收到请求表单230之后，代理

B 260将使用请求表单230中包含的用于交互的请求数据，理解其中的上下文，生

成将返回iFrame 220的、针对请求表单230的响应，并通过所述响应来刷新

iFrame 220。此时，iFrame 220通过代理B 260的响应被刷新，并且iFrame 220所

属的域从初始的域A改变成为域B。在步骤5，基于所述用于交互的请求数据，通

过iFrame 220对服务255进行AJAX调用。由于此时iFrame 220与服务255属于相

同的域B，因此该调用可以被实施。注意，在本发明的可替换实施例中，

iFrame 220可以访问域B中的数据，而不是调用域B中的服务。二者的实现方式

基本相同，在此不进行重复的描述。

继续参考图4，图4示出了根据本发明一个实施例的用于Web应用的跨域交互的

系统及其工作流程的示例性示意图，其是对于图3的继续说明。如图4所示，所述

系统包括属于域A的服务器200以及属于域B的服务器250，其中服务器200和服

务器250中包括的组件与图2相同。属于域A的富Web应用210运行于客户机的

浏览器上。在步骤6，基于对服务255的调用所产生的结果，由代理B 260在

iFrame 220中创建结果表单240。代理B 260将通过用于交互的结果数据来填充所

创建的结果表单240。结果表单240的输入(Input)可以包括：用于处理来自服务

255的结果的功能名称以及服务255的响应。结果表单240的方法(Method)可以包

括GET或POST。结果表单240的动作(Action)可以包括：代理A 205的URL。当

在iFrame 220中成功创建并填充结果表单240之后，在步骤7，iFrame 220将结果

表单240提交到服务器200中的代理A 205。

继续参考图5，图5示出了根据本发明一个实施例的用于Web应用的跨域交互的

系统及其工作流程的示例性示意图，其是对于图4的继续说明。如图5所示，所述

系统包括属于域A的服务器200以及属于域B的服务器250，其中服务器200和服

务器250中包括的组件与图2相同。属于域A的富Web应用210运行于客户机的

浏览器上。在步骤8，在服务器200的代理A 205接收到结果表单240之后，代理

A 205将使用结果表单240中包含的用于交互的结果数据，理解其中的上下文，生

成将返回iFrame 220的、针对结果表单240的响应，并通过所述响应来刷新

iFrame 220。此时，iFrame 220通过代理A 205的响应被刷新，并且iFrame 220所

属的域从域B改变回初始的域A。在步骤9，通过iFrame 220中的页面，通过结果

表单240中包含的服务255的响应来调用用于处理来自服务255的结果的功能名称，

其中所述功能用于保存或处理返回的结果。iFrame 220可以将结果表单240中的数

据传递给富Web应用210。由于此时iFrame 220与代理A 205和富Web应用210

属于相同的域A，因此该调用和数据传递可以被实施。

以上是对于根据本发明一个实施例的用于Web应用的跨域交互的系统及其工作流

程的详细描述，下面将参照示例进行进一步说明，以便本领域技术人员可以充分认

识到本发明的目的、优势以及实现方式。在以下示例中，针对电子商务网站的典型

的结账过程来描述本发明的一个实施例。

首先参见图6，图6是用于实现根据本发明一个实施例的电子商务网站的典型的结

账过程的示例性环境。如图6所示，在客户机的浏览器610上正在显示购物网站

sample_的页面，该页面提供一组服务，例如库存查询、价格查询、

物品图片展示、购物车等等。当用户完成购物行为并打算结账时，用户选择使用

“结账服务”625，该服务在属于相同域的Web服务器620上运行，其需要以下参数：

支付金额、收款人的银行帐户、以及支付序列号。显而易见，所述结账服务625必

须通过用户选择的某个银行站点来完成支付。假定在Web服务器630上运行的银

行网站sample_可以向用户提供“转账服务”635，该服务需要接收以

下参数：支付金额、收款人的银行帐户、付款人的银行帐户、以及支付序列号，并

在接收到所述参数之后将特定数量的钱(等于支付金额)从付款人的银行帐户转账到

收款人的银行帐户。支付序列号被记录下来用于付款人和收款人进行检查。浏览器

610运行由sample_所托管的“购物应用”615，该应用想要使用来自

sample_的“结账服务”625以及来自sample_的“转账服

务”635，以便实现端对端的结账过程。

由上述示例可见，“购物应用”615需要与来自两个不同的域的服务进行交互。由于

“购物应用”615自身属于sample_，因此该应用可以使用

XmlHttpRequest对象来调用“结账服务”625。但是由于“转账服务”635由另一不同的

域sample_所托管，因此XmlHttpRequest对象被阻止调用“转账服

务”635。

根据本发明的一个实施例，可以通过在页面内创建的iFrame并基于表单提交来完

成Web应用的跨域交互。首先参见图7，图7示出了在浏览器上显示的页面中创

建的表单的示例。在属于域sample_的浏览器610上页面中创建一张

表单，该表单包括：收款人的银行帐户611、支付金额612、支付序列号613、以

及付款人的银行帐户614。其中收款人的银行帐户611、支付金额612、支付序列

号613中的值可以由来自域sample_中的“结账服务”625自动填充，

而付款人的银行帐户614可以由用户在页面上直接输入他/她的帐户号码来进行填

充。当确认上述值均正确之后，用户可以点击“支付”按钮616，于是“购物应

用”615开始调用域sample_中的“转账服务”635。

以下结合图8来描述对于在域sample_中调用“转账服务”635的详细

步骤以及实现所述步骤的示例性代码。图8是根据本发明的一个实施例的用于

Web应用的跨域交互的方法的示例性流程图。

首先参见用于处理对于“支付”按钮616的点击的如下代码：

<html>

function pay(){

var xhr＝new CrossDomainXMLHttpRequest(“sample_/proxy”)；

(″POST″，“sample_/transter_service”，true)；

ystatechange＝function(){

if(tate＝＝4){

if(＝＝200){

var response＝se Text；

....

}else if(＝＝404){

...

}

(mentById(“payeeAccount”)

+“；”+mentById(“payerAccount”)

+“；”+mentById(“amount”)

+“；”+mentById(“serialNumber”))；//请求数据是：

1111111；

2222222222222；$100.00；2

}

</script>

</html>

在运行时期间，当方法“”被调用时，CrossDomainXMLHttpRequest对象

将创建一个不可见的iFrame(图8的步骤810：创建iFrame)，该iFrame的当前域是

“sample_”。创建iFrame的代码如下所示：

</iframe>

接着，对象CrossDomainXMLHttpRequest在iFrame中创建请求表单，并将请求数

据和其它相关信息编码到该表单中(图8的步骤820：创建请求表单)。创建请求表

单的代码如下所示：

<form action＝”sample_/proxy” method＝”POST”> <！--

ormethod＝”GET”-->

<input name

＝”serviceToCall”>sample_/transfer_service</input>

<input name＝”callbackProxy”>sample_/proxy</input>

<input name

＝”requestData”>1111111； 2222222222222； $100.00；

2</input>

</form>

</iframe>

在所述请求表单被成功创建之后，CrossDomainXMLHttpRequest对象提交上述请求

表单(图8的步骤830：提交请求表单)。由于表单中具有属性action

＝”sample_/proxy”，因此该表单被提交到属于域

sample_的代理。代理将使用请求表单中包含的数据，生成响应，并

通过所述响应刷新该iFrame(图8的步骤840：生成响应并刷新iFrame)。此时

iFrame通过代理的响应被刷新，并且iFrame中显示的页面被转换成为域

sample_。接着通过iFrame对于当前所属的域sample_

的“转账服务”进行调用(图8的步骤850：调用服务/访问数据)。在本发明的可替换

实施例中，iFrame可以访问域sample_中的数据而不调用服务，或

者既调用服务又访问数据。

当成功地调用了“转账服务”之后，可以基于对于“转账服务”的调用结果，在相同的

iFrame中创建一个新的结果表单(图8的步骤860：创建结果表单)。相应的代码如

下所示：

var xhr＝new XMLHttpRequest()；

(″POST″，“sample_bank/transfer_service”，true)；

ystatechange＝function(){

if(tate＝＝4){

if(＝＝200){

var response＝seText；

//在iFrame中创建结果表单

}else if(＝＝404){

...

}

(“1111111；2222222222222；$100.00；2”)；

}

</script>

<input name＝”result”>you money transferred successfully</input>

</form>

</iframe>

在所述结果表单被成功创建之后，提交上述结果表单(图8的步骤870：提交结果

表单)。由于结果表单中具有属性target＝”sample_/proxy”，因此该表

单被提交到属于域sample_的代理。代理将使用结果表单中包含的

数据，生成针对结果表单的响应，并通过所述响应来刷新iFrame。此时，iFrame

通过代理的响应被刷新，并且iFrame中显示的页面被转换回初始的域

sample_(图8的步骤880：生成响应并刷新iFrame)。接着通知

iFrame的创建者(在此示例中是CrossDomainXMLHttpRequest对象)，并且步骤810

中的方法“onreadystatechange”被调用，以便处理结果表单中的结果(图8的步骤890：

调用用于处理结果的功能)。例如，iFrame可以将结果表单中的数据传递给“购物应

用”615。

注意，上述示例仅是用于示例性地说明本发明的实施例，而不应被解释成对本发明

的限制或穷举。在不同的上下文中，根据用户或者环境的需求，所述的步骤和代码

可以被改变，而不会脱离本发明的范围。

通过以上对于本发明实施例的详细描述并结合上述示例可以看出，本发明可以高效

地实现Web应用的跨域交互，从而增强了基于AJAX的富Web应用的性能。并且，

本发明可以智能地处理不同大小的数据。例如，本发明可以根据数据量的大小来自

动选择GET或POST。当表单中的请求/结果数据量较小时，例如小于URL的长度

限制，可以使用GET来提交表单，从而优化数据传输的性能。并且，浏览器还可

以使用高速缓存来进一步优化GET的操作性能。而当表单中的请求/结果数据量较

大时，例如大于URL的长度限制，则可以使用POST来提交表单，从而将数据作

为请求包来传输，而不会限制数据的大小。

此外，本发明的方案具备足够的安全性。一方面，用户使用的Web应用所在的域

的用户凭证(例如用户名和口令)被保留在本地，而不会被传递到提供属于目标域(即

需要调用的服务或访问的数据所在的域)的服务/数据的服务器端，从而确保本地关

键数据的安全性。另一方面，如果目标域需要认证，则浏览器会动态地弹出认证窗

口，用于用户在其中输入目标域所需的用户凭证(例如用户名和口令)，该信息不会

泄露给Web应用所在的本地域。

需要注意，尽管以上对于本发明的描述是基于富Web应用的，但是对于传统的

Web应用，也可以等同地应用本发明。同样需要注意，尽管本发明的实施例是针

对客户机/服务器的体系结构来描述的，但是本发明同样适用于属于不同的两个域

的任意两台机器或者仅逻辑上独立的两个Web服务器之间的Web应用交互、以及

本领域技术人员可以容易地想到的其它类似的实现方式。

在同一发明构思下，还参考图9提出了一种根据本发明一个实施例的用于Web应

用的跨域交互的系统900。在所述系统中，属于第一域的Web应用需要与属于第

二域的服务进行交互。如图9所示，所述系统900包括：iFrame创建装置910、表

单创建装置920、表单提交装置930以及交互装置940。所述iFrame创建装置910

用于在网页中创建一个iFrame 950，其中所述iFrame 950属于所述第一域。所述表

单创建装置920用于在所述iFrame 950中创建表单。所述表单提交装置930用于将

所创建的表单提交给提供所述属于第二域的服务的Web服务器960。所述交互装

置940进一步包括响应接收装置941、域改变装置942、认证装置943。所述响应

接收装置941用于通过接收所述Web服务器960的响应而刷新所述iFrame950。所

述域改变装置942用于将所述iFrame 950所属的域改变为所述第二域，并通过所述

表单中包含的信息来与所述属于第二域的服务进行跨域交互。所述认证装置943用

于将所述提供属于第一域的服务的Web服务器中针对所述第一域的用户凭证保留

在本地，从而不会泄露所述用户凭证。此外，所述Web应用可以是富Web应用，

并且所述iFrame 950在网页中可以是不可见的。

此外，所述系统900可以进一步包括：用于基于与所述服务进行交互的结果在所述

iFrame中创建结果表单的装置；用于将所述结果表单提交到提供属于第一域的服

务的Web服务器的装置；用于通过接收所述提供属于第一域的服务的Web服务器

的响应而刷新所述iFrame，将所述iFrame所属的域改变为所述第一域的装置；以

及用于处理所述结果表单中的结果的装置。

此外，所述表单提交装置930可以进一步包括：用于根据所述表单中的数据量的大

小，确定通过GET方法还是POST方法来提交所述表单的装置，其中当所述表单

中的数据量较小时，可以使用GET方法，当所述表单中的数据量较大时，可以使

用POST方法。

此外，所述用于提交结果表单的装置进一步包括：用于根据所述结果表单中的数据

量的大小，确定通过GET方法还是POST方法来提交所述结果表单的装置，其中

当所述结果表单中的数据量较小时，可以使用GET方法，当所述结果表单中的数

据量较大时，可以使用POST方法。

此外，所述系统进一步包括：用于如果所述提供属于第二域的服务的Web服务器

需要认证，则由所述Web应用动态地弹出认证窗口的装置，所述认证窗口用于用

户在其中输入针对所述第二域的用户凭证。

以上详细描述了根据本发明一个实施例的用于Web应用的跨域交互的方法和系统。

可以理解，方框图和/或流程图中的每个方框以及方框图和流程图中的一些方框的

组合可以用一些计算机程序指令实现。这些计算机程序指令可以提供给一通用计算

机、专用计算机或其它可编程数据处理设备的处理器以产生一机器，使得这些指令

通过计算机或其它可编程数据处理设备的处理器的执行创建用于实现在方框图和/

或流程图内或者方框内所指定的功能的装置。

尽管已经参考优选实施例具体地示出并描述了本发明，但其不是为了以公开的形式

穷举或限制本发明。对于本领域的普通技术人员，可以在形式上和细节上进行各种

改变而不会背离本发明的精神和范围。选择并描述了实施例是为了最好地解释本发

明的原理和实际的应用，以及为了使本领域的其它普通技术人员能够理解对于各种

实施例的本发明，所述实施例具有适合于预期的具体使用的各种修改。

用于Web应用的跨域交互的方法和系统

发布评论取消回复

最近发表

相关推荐

标签列表

用于Web应用的跨域交互的方法和系统

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复