CN101271460A

CN101271460A - 用于混搭Web应用的方法和装置

Info

Publication number: CN101271460A
Application number: CNA2007100883917A
Authority: CN
Inventors: 惠轶; 张阔; 康乐; 孙伟
Original assignee: International Business Machines Corp
Current assignee: International Business Machines Corp
Priority date: 2007-03-19
Filing date: 2007-03-19
Publication date: 2008-09-24
Also published as: US20080235656A1; US9122484B2

Abstract

本发明公开了用于混搭Web应用的方法和装置。在该方法中，包括步骤：获取分别与至少两个Web应用相对应的至少两个文档对象模型；组合所述至少两个文档对象模型的节点，以得到一个新文档对象模型；在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及从连接后的所述新文档对象模型，得到一个新Web应用。在本发明中，混搭Web应用能够在没有API支持的基础上进行。这必将极大地增加混搭的灵活性以及适应性，因为Web应用的DOM很容易获得。

Description

用于混搭Web应用的方法和装置

技术领域

本发明涉及信息技术领域，更具体地，本发明涉及基于Web的应用程序集成技术。

背景技术

随着互联网的高速发展，越来越多的服务正在通过Web应用向用户提供。因此，以一种简单、高效的方式对不同的Web应用进行混搭(mashing up)，以组成新的Web应用的需求变得越来越紧迫。

当前，Web应用混搭主要通过应用编程接口(API)而进行。更具体地说，为了使Web应用能够被其他用户混搭，该Web应用的所有者需要公开有关的API。

例如，利用Google地图这个Web应用提供的API，一个用户可以在Google地图之上集成定制化的数据，例如在Google地图之上集成天气预报。

然而，由于例如成本和对现有应用***改造难度等原因，很多Web应用的所有者并不显性的定义和公开有关的API。

因此，上述利用Web应用的API进行新Web应用的混搭的方案具有局限性，即，如果一个Web应用的所有者没有公开有关的API，那么用户就不能使用该Web应用来进行Web应用的混搭。

综上所述，需要提出一种不需要依赖于Web应用的API的Web应用混搭方案，以便增加Web应用混搭的灵活性和适应性。

发明内容

本发明的一个目的是提供一种用于混搭Web应用的方法和装置，其无需依赖于任何一个Web应用的API，实现至少两个Web应用的混搭。

为此，本发明提出了一种用于混搭Web应用的方法，包括步骤：获取分别与至少两个Web应用相对应的至少两个文档对象模型(DOM)；组合所述至少两个文档对象模型的节点，以得到一个新文档对象模型；在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及从连接后的所述新文档对象模型，得到一个新Web应用。

本发明还提出了一种用于混搭Web应用的装置，包括：解析器，用于获取分别与至少两个Web应用相对应的至少两个文档对象模型；组合器，用于组合所述至少两个文档对象模型的节点，以得到一个新文档对象模型；连接器，用于在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及创建器，用于从连接后的所述新文档对象模型，得到一个新Web应用。

本发明还提供一种包含存储在计算机可读介质的、执行上述方法的程序指令的计算机程序产品。

与现有的Web应用混搭方案相比较，在本发明中，利用Web应用的DOM进行混搭，而不是直接地调用Web应用的API。换而言之，在本发明中，混搭Web应用能够在没有API支持的基础上进行。这极大地增加了混搭的灵活性以及适应性，因为Web应用的DOM很容易获得。

附图说明

通过以下结合附图的说明，并且随着对本发明的更全面了解，本发明的其他目的和效果将变得更加清楚和易于理解，其中：

图1示出了本发明可以在其中实现的***100；

图2A示出了在浏览器上显示的一个用来混搭的Web应用的页面；

图2B示出了在浏览器上显示的一个从用来混搭的Web应用得到的页面；

图2C示出了在浏览器上显示的一个从Web应用得到的页面，该Web应用是通过混搭得到的；

图3示出了根据本发明的一个实施方式的用于混搭Web应用的方法的流程图；

图4A示意性地示出了一个DOM；

图4B示意性地示出了另一个DOM；

图4C示意性地示出了由图4A和图4B中所示的两个DOM组合得到的DOM；

图5示出了根据本发明的一个实施方式的用于混搭Web应用的装置的框图。

在所有的上述附图中，相同的标号表示具有相同、相似或相应的特征或功能。

具体实施方式

本发明的基本思想是利用选定的至少两个Web应用的文档对象模型(DOM)进行这些Web应用的混搭，以方便地得到一个新Web应用。根据本发明的一个实施方式，首先，获取选定的至少两个Web应用的DOM。然后，将这些Web应用的DOM的节点组合在一起，得到一个新的DOM。接下来，在新的DOM上，连接分别属于这些Web应用的DOM的节点。最后，从连接后的新DOM得到一个新的Web应用。

以下，结合一个具体的实施方式来描述本发明。

图1示出了本发明可以在其中实现的***100。如图1所示，该***100包括一个服务器110、一个服务器120、一个服务器/客户端130、一个客户端140和一个网络150。服务器110、服务器120、服务器/客户端130、客户端140可以是膝上型计算机、小型机、或中型机等等。并且，服务器110经由链路112连接到网络150；服务器120经由链路122连接到网络150；服务器/客户端130经由链路132连接到网络150；客户端140经由链路142连接到网络150。链路112、122、132、142可以是有线链路，诸如同轴电缆、光纤等，也可以是无线链路，诸如卫星链路等。同样地，网络150可以是无线网、有线网、或它们的组合。另外，网络150可以是局域网、城域网、广域网、或它们的组合。例如，网络150是因特网。

当然，本领域的技术人员应该理解，在网络150上还可以连接有其他的客户端和/或服务器。并且，为了能够彼此识别，客户端和服务器可以具有可以唯一地识别它们的标识，例如IP地址、统一资源定位符(URL)等。

在本发明的该实施方式中，在服务器110上运行有一个用于工作申请的Web应用。当在服务器/客户端130或客户端140上用IE、Firefox等之类的浏览器访问在服务器110上的该用于工作申请的Web应用时，将在浏览器上显示如图2A所示的页面。如图2A所示，用户可以在该页面中进行工作申请，例如在关于姓名和地址的输入框中输入姓名、地址等信息，在关于工作技能的复选框中进行选择，以及在关于自我描述的输入框中填写自我描述等等。用户可以通过点击一个按钮(未示出)向服务器110提交他/她所完成的输入/选择。

而在服务器120上运行有一个用于搜索的Web应用(类似于Google搜索应用)。当在服务器/客户端130或客户端140上用IE、Firefox等之类的浏览器访问在服务器120上的用于搜索的Web应用时，将在浏览器上显示能产生如图2B所示的结果的页面。如图2B所示，用户在输入框中输入其想要进行搜索的内容“foo”，并点击一个按钮以提交内容进行搜索后，得到“None”的返回结果。用户可以通过点击一个按钮向服务器120提交他/她想要进行搜索的内容(图2B中示例性地示出了标示为“search the web for “foo””的按钮)。

服务器/客户端130在一些情况下充当客户端，而在另一些情况下充当服务器，如下面详细描述的。

在本发明的该实施方式中，在服务器/客户端130中对所选定的Web应用进行混搭。在进行Web应用的混搭时，服务器/客户端130充当客户端。

并且，混搭后得到的新Web应用运行在服务器/客户端130上，此时服务器/客户端130充当服务器。

并且，在本发明的该实施方式中，目的是得到这样的一个Web应用，当客户端140用IE、Firefox等之类的浏览器访问在服务器/客户端130上的该混搭后得到的Web应用时，将在浏览器上显示能产生如图2C所示的结果的页面。

如图2C所示，当用户在左边的关于姓名和地址的输入框中输入姓名、地址等信息(Eric)时，在右边显示上述输入的信息(Eric)的搜索结果。也就是说，该混搭后得到的Web应用，组合和连接了在服务器110上的Web应用和在服务器120上的Web应用。

图3示出了根据本发明的一个实施方式的对两个Web应用进行混搭的方法的流程图。

首先，通过它们各自的URL，访问服务器110和服务器120中的用于工作申请的Web应用和用于搜索的Web应用，以得到相应的两个Web页面(步骤310)。

然后，将得到的上述两个Web页面解析成DOM(步骤320)。

例如，可利用如下的JavaScript代码来解析Web页面，得到相对应的DOM。

var widget＝document.createElement(″div″)；

dojo.io.bind({

url:URL，

mimetype:″text/plain″，

load:function(type，text，e){

widget.innerHTML＝text；

var parser＝new dojo.xml.Parse()；

var dom＝parser.parseElement(widget，null，true)；

}//load

})；//bind

}

又例如，可以采用在Firefox浏览器中的DOM Inspector工具来获得一个Web页面的DOM。

图4A示意性地示出了一个DOM。该DOM是与图2A中所示的Web页面相对应的DOM的简化版本。在图4A中，请特别注意该DOM的输入(Input)节点(对应于图2A中的关于姓名和地址的输入框)。由于图4A中所示的这些信息对于本领域的技术人员来说很容易理解，因此出于简洁的目的，这里不对图4A进行赘述。

图4B示意性地示出了另一个DOM。该DOM是与图2B中所示的Web页面相对应的DOM的简化版本。在图4B中，请特别注意该DOM的输入(Input)节点和按钮(Button)节点。同样，由于图4B中所示的这些信息对于本领域的技术人员来说很容易理解，因此出于简洁的目的，这里不对图4B进行赘述。

返回图3，在步骤330，通过搜索图4A和图4B中所示的DOM来找到所需要的相应节点。

在本发明的该实施方式中，例如，可以通过这样的一个JavaScript函数document.getElementsByTags(“input”)，来找到DOM的所有输入节点。

接下来，在步骤340，将通过搜索得到的所需要的各DOM的节点组合起来，形成一个新的DOM。

图4C示意性地示出了所形成的新DOM。该DOM是通过组合图4A和图4B中所示的DOM的一些节点而形成的。如图4C中所示，左边的两个输入节点来自图4A中所示的DOM，而右边的一个输入节点和一个按钮节点来自图4B中所示的DOM。

本领域的技术人员应当理解，可以以各种各样的方式来组合各DOM的节点，形成一个新的DOM，其结果只是与该新的DOM相对应的Web应用的页面在浏览器上的显示效果不同，而与功能无关。

当然，本领域的技术人员应当理解，上述步骤330是可选的。换句话说，可以不经过搜索，而是将在图4A和图4B中所示的DOM中的所有节点组合起来，形成一个新的DOM。

接下来，在步骤350，在该新DOM上对原属于不同DOM(如，图4A和图4B所示的两个DOM)的相应节点进行连接。通过连接，就可以在各个源Web应用的基础上实现新的功能。

常规的连接方法，主要为侵入式的方法，即修改原有的Web应用的代码，在某些触发点加入新的代码，从而实现不同Web应用的连接。

与传统的连接方法不同，在本发明的该实施方式中，连接是通过非侵入式的监听机制完成的。

在这种机制下，首先初始化一个全局的***。这个***不仅能够监听传统的用户事件，如DOM的节点(例如Button节点)被点击、鼠标移动等，而且能够监听任何一个函数的触发。因此，通过上述***，开发者可以在任意一个函数被触发之前或者之后，动态地加入自定义的额外函数，并且不需要修改源Web应用的代码。

开发者可以编写例如如下的连接代码：

Connector.connect(sourceApplication，sourceFunction，targetApplication，targetFunction)，此代码表示当sourceApplication的sourceFunction被触发时，同时触发targetApplication的targetFunction。

并且，通过参数的设定，开发者还可以设定targetFunction是在sourceFunction发生之前触发还是发生之后触发。在targetFunction是在sourceFunction发生之前触发的情况下，还可以通过一个额外的函数在sourceFounction发生之前改变其输入参数的值。

通过这样的机制，能够以一种灵活的方式将不同Web应用连接起来，从而实现快速、不依赖API的非侵入式混搭。

采用如下的代码可以在图4C中所示的组合后的新DOM上实现属于各DOM的节点的连接：

Application.Connect(“JobApplication.NameInput”，onChange，“SearchForm.SearchSubmit”，onClick，passvalue)

其中passvalue是用户自定义的附加函数，passvalue会在SearchForm.SearchSubmit.onClick触发之前发生，其代码如下：

function passvalue(){

SearchForm.KeywordInput.value＝

JobApplication.NameInput.value；

}

并且其作用是将在JobApplication中姓名输入框输入的值传递给SearchForm的KeyWordInput。

更具体地说，监听到NameInput的OnChange事件发生时，将NameInput的值传递给KeywordInput，并触发Submit的Onclick事件。

这样，实现了上面所描述的当用户在左边的关于姓名和地址的输入框中输入姓名(Eric)时，在右边显示上述输入的姓名(Eric)的搜索结果。

再次返回到图3，在步骤360，从连接后的新DOM得到新的Web应用。在现有技术中，存在用各种语言编写的用于从DOM得到Web应用的代码，因此，这里不对其进行赘述。

图5示出了根据本发明的一个实施方式的用于混搭Web应用的装置500的框图。

该用于混搭Web应用的装置500可以是一个用JavaScript编写的基于浏览器的工具。

如图5所示，该用于混搭Web应用的装置500包括一个解析器510，用于获取分别与至少两个Web应用相对应的至少两个文档对象模型；一个组合器520，用于将至少两个文档对象模型的节点组合在一起，以得到一个新文档对象模型；一个连接器530，用于在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及一个创建器540，用于从连接后的新文档对象模型，得到一个新Web应用。

该用于混搭Web应用的装置500还可以包括一个搜索器550，用于搜索至少两个文档对象模型，以找到所需要的节点；以及所述组合器520组合所述至少两个文档对象模型的节点是通过将所找到的所需要的节点组合在一起实现的。

而所述连接器530可以基于如上所述的非侵入式的方式，连接分别属于所述至少两个文档对象模型的节点。

应当注意，为了使本发明更容易理解，上面的描述省略了对于本领域的技术人员来说是公知的、并且对于本发明的实现可能是必需的更具体的一些技术细节。

提供本发明的说明书的目的是为了说明和描述，而不是用来穷举或将本发明限制为所公开的形式。对本领域的普通技术人员而言，许多修改和变更都是显而易见的。

例如，本领域的技术人员应当理解，在上面描述的实施方式中，从其混搭成一个新Web应用的Web应用的数目不局限于两个，而是可以是三个或更多。

因此，选择并描述实施方式是为了更好地解释本发明的原理及其实际应用，并使本领域普通技术人员明白，在不脱离本发明实质的前提下，所有修改和变更均落入由权利要求所限定的本发明的保护范围之内。

Claims

1. 一种用于混搭Web应用的方法，包括步骤：

获取分别与至少两个Web应用相对应的至少两个文档对象模型；

组合所述至少两个文档对象模型的节点，以得到一个新文档对象模型；

在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及

从连接后的所述新文档对象模型，得到一个新Web应用。

2. 根据权利要求1所述的方法，其中在所述组合步骤之前还包括步骤：

搜索所述至少两个文档对象模型，以找到所述节点。

3. 根据权利要求1所述的方法，其中基于非侵入式的方式，连接分别属于所述至少两个文档对象模型的节点。

4. 一种用于混搭Web应用的装置，包括：

解析器，用于获取分别与至少两个Web应用相对应的至少两个文档对象模型；

组合器，用于组合所述至少两个文档对象模型的节点，以得到一个新文档对象模型；

连接器，用于在所述新文档对象模型上，连接分别属于所述至少两个文档对象模型的节点；以及

创建器，用于从连接后的所述新文档对象模型，得到一个新Web应用。

5. 根据权利要求4所述的装置，还包括：

搜索器，用于搜索所述至少两个文档对象模型，以找到所述节点。

6. 根据权利要求4所述的装置，其中所述连接器基于非侵入式的方式，连接分别属于所述至少两个文档对象模型的节点。