CN101075240A - 跨域获取数据的方法和系统 - Google Patents

Abstract

本发明公开了一种跨域获取数据的方法，该方法包括：在第一页面中嵌入与第一页面所属域的后缀相同且与第一页面所需获取数据的所属域相同的代理页面，所述第一页面通过所述代理页面获取数据。本发明还同时公开了一种跨域获取数据的系统，该系统包括：欲获取与自身所属域后缀相同的数据的第一页面，以及与数据所属域相同且嵌入第一页面中的代理页面，该代理页面用于根据第一页面的请求获取数据并将数据发送给第一页面。本发明提供的方案可以低成本地实现跨域获取数据，并且方案简单，实现容易。

Description

跨域获取数据的方法和系统

技术领域

本发明涉及网页间获取数据的技术，尤其涉及跨域获取数据的方法和系统。

背景技术

目前，网络上的数据内容和结构大多采用可扩展标识语言(XML)加以描述并保存在网络(web)服务器中，用XML描述的数据内容和结构通过web服务器的页面处理逻辑以网页的形式通过客户端浏览器呈现出来。

对于数据的加载和页面的呈现，传统的web应用允许用户向web服务器发送请求，web服务器接受并处理请求，应用页面处理逻辑返回新的网页。参见图1，图1是传统web模式下数据加载和页面呈现的结构示意图。如图1所示，客户端用户打开浏览器浏览网页，欲浏览新的网页时，向web服务器端发送超文本传输协议(Http)请求，web服务器收到Http请求后，调用所存储的数据并对数据进行页面呈现的逻辑处理，然后将经过处理得到的超文本链接标示语言(HTML)代码和页面呈现的相关需要在同一个响应中发送给客户端，客户端浏览器根据web服务器发送的响应显示新的页面。

然而，由于前后两个页面中的大部分HTML代码是相同的，发送这些没有改变的信息将占用带宽；另外，web服务器处理数据的时候，用户处于等待状态，处理完后返回新的页面时，用户仍然需要等待，所以这种数据加载和页面呈现的方式响应时间长，速度慢，浪费带宽资源。

于是，业界提出一种采用异步Java脚本(JavaScript)和XML(AJAX)的方式来实现web应用。AJAX是一种创建交互式网页应用的网页开发技术，使用XMLHttpRequest对象进行异步数据查询、检索，通过XMLHttpRequest对象直接向web服务器发送请求并取回所需要的数据，并在客户端采用JavaScript处理来自web服务器的响应。其中，XMLHttpRequest对象是目前大多数浏览器都支持并提供的用来直接发送Http请求并接受远程服务器响应数据的对象，是AJAX获取远程数据的核心。

参见图2，图2是AJAX模式下数据加载和页面呈现的结构示意图。如图2所示，在客户端浏览器中增加了AJAX引擎，由它实现页面呈现的任务，使得web服务器可以专注于处理数据。客户端用户利用XMLHttpRequest对象发起Http请求，web服务器收到Http请求后只返回所请求的XML数据，客户端界面调用JavaScript处理web服务器所返回的XML数据，呈现新的网页。可见，web服务器更为迅速地响应用户的请求，并避免了在网络上发送那些没有改变的信息。

以上描述了同域情况下数据加载和页面呈现的过程，同域是指数据都保存在同一web服务器上，例如前后页面所使用的数据都保存在163.com服务器上，而对于一些集成的web应用来说，往往有很多个域，例如bbs.163.com，mail.163.com等，对于这些不同域的数据常常需要进行统一的处理和呈现，于是就出现数据跨域应用的问题。目前，通常采用web服务器代理的解决方案解决跨域应用的问题。

参见图3，图3是现有技术跨域获取数据的示意图。如图3所示，客户端用户正在利用浏览器浏览的页面A为http://a1.b.com/a.html，其属于a1.b.com域，数据B为http://a2.b.com/b.xml，属于a2.b.com域，保存在a2.b.com的web服务器上，正在浏览页面A的用户希望获取数据B，并在本域上以页面A所需的页面呈现逻辑将数据B呈现出来，于是用户向页面A所属域的web服务器上发送一个Http请求，即向a1.b.com的web服务器发送Http请求，a1.b.com的web服务器收到Http请求后，向a2.b.com的web服务器索取数据B，并发给客户端，客户端界面调用JavaScript处理web服务器所返回的数据B，并呈现出来。

这种跨域获取数据的方法具有以下缺点：第一，页面A与自身web服务器需要有一定的约定，以便在浏览页面A的用户发送请求时，web服务器可以了解页面A所请求的数据在哪个域上，对于该约定需要严格遵守和维护，成本高；第二，页面A所属域的web服务器上需要配置数据B所属域的web服务器相关内容，以实现web服务器之间的跨域访问，这无疑也增加了配置维护成本；第三，对于数据B实际上传输了两次，即从a2.b.com的web服务器到a1.b.com的web服务器，又从a1.b.com的web服务器到呈现页面A的浏览器，所以浪费了带宽，并且由于两次传输中的任何一次出错都会导致该数据的获取失败，所以出错的可能性也增大。

发明内容

有鉴于此，本发明提出一种跨域获取数据的方法，可以低成本地解决跨域获取数据的问题，具体地，该方法包括：

在第一页面中嵌入与第一页面所属域的后缀相同且与第一页面所需获取的数据的所属域相同的代理页面，所述第一页面通过所述代理页面获取所需数据。

优选地，在所述嵌入代理页面之前，该方法进一步包括：判断第一页面中是否嵌入了代理页面，如果是，则直接通过代理页面获取数据；否则，执行所述嵌入步骤。在所述判断之前，该方法进一步包括：向第一页面所需获取数据所属的网络服务器发送获取数据的请求。

优选地，所述通过代理页面获取数据具体包括：第一页面和代理页面分别将自身所属的域设置成域的后缀，第一页面调用代理页面的数据请求对象获取数据。

优选地，所述在第一页面中嵌入代理页面具体包括：动态创建内嵌式页面，将内嵌式页面的地址指向代理页面的地址，拉取代理页面嵌入当前页面中。

优选地，所述在第一页面中嵌入代理页面与通过代理页面获取数据之间，该方法进一步包括：创建回调队列，将在代理页面嵌入第一页面过程中第一页面获取与数据同域的其它数据的请求以及获取数据后需要进行的逻辑处理存放到回调队列中。在所述获取数据之后，该方法进一步包括：依次处理所述回调队列中的逻辑处理和请求。

另外，本发明还提出一种跨域获取数据的系统，包括：欲获取与自身所属域后缀相同的数据的第一页面，该系统进一步包括：与数据所属域相同且嵌入第一页面中的代理页面，所述代理页面用于根据第一页面的请求获取数据并将数据发送给第一页面。

优选地，该系统进一步包括回调队列，用于保存第一页面发送的同域数据请求和逻辑处理。

优选地，所述数据为一个以上保存在后缀与第一页面所属域相同的服务器上的数据，且每个代理页面与具有相同所属域的一个或一个以上的数据相对应。

从以上技术方案可以看到，本发明提供的跨域获取数据的方法和系统具有以下有益效果：

相比于通过web服务器作为代理进行数据获取的方法，由于本发明提供的方案直接在欲获取数据的页面中嵌入与数据同域且与页面所属域后缀相同的代理页面，利用代理页面获取数据，所以成本低、实现容易且简单，只需要在被获取数据的web服务器上配置一个代理页面即可，不需要额外的约定和维护，因此配置和维护的成本也较低。

附图说明

图1是传统web模式下数据加载和页面呈现的结构示意图；

图2是AJAX模式下数据加载和页面呈现的结构示意图；

图3是现有技术跨域获取数据的示意图；

图4是本发明实施例跨域获取数据的流程图。

具体实施方式

为了使本发明的特征和优点更加清楚明白，下面参照附图结合具体实施例对本发明作进一步的描述。

在AJAX模式下，根据同域原则，XMLHttpRequest对象要受到浏览器跨域的限制，也就是说，属于a1.b.com域的客户端浏览器不能利用XMLHttpRequest对象请求属于a2.b.com域上的数据，虽然数据不能跨域访问，但是对于页面A访问页面B，同域原则提供了一种特例：页面可以调用脚本将自己的域**.b.com设置成b.com，即调用脚本将自己的域设置成自己域的后缀，于是，对于页面A：http://a1.b.com/a.html和页面B：http://a2.b.com/b.html，可以分别调用脚本将域设置成b.com，这样页面A和页面B就可以互相访问，属于a1.b.com域的客户端浏览器也就可以通过调用属于a2.b.com域的XMLHttpRequest对象获取属于a2.b.com域的数据。

本发明利用同域原则的这一特例，在a2.b.com的web服务器上保存一个a2.b.com域下的代理页面，该代理页面的作用仅是获取a2.b.com域上的数据，并不对数据执行页面呈现的处理逻辑。当页面A需要获取a2.b.com域上的数据B时，首先根据同域原则的特例拉取代理页面，然后由代理页面获取同域下的数据B，页面A再通过访问代理页面获取数据B，从而实现页面A跨域获取数据。具体参见图4，图4是本发明实施例跨域获取数据的流程图。

首先，在数据B所属的a2.b.com的web服务器上预先保存代理页面C，代理页面C为http://a2.b.com/proxy.html，该代理页面可以获取到a2.b.com的web服务器上所保存的数据，但不对数据执行页面呈现的处理逻辑。

进一步地，页面A所需获取的数据可以为一个以上，所需获取数据的所属域与页面A的所属域的后缀相同。对应的代理页面也为一个以上，每个代理页面都可以与自身所属域相同的一个或一个以上的数据相对应，并且保存在对应数据所属域的web服务器上。接下来，跨域获取数据的步骤具体如下：

步骤401、用户在页面A上向数据B所属的web服务器发送获取数据B的请求；

在一些集成的web应用中，通常包含多个域，客户端在浏览其中一个域名下的页面时，可能还希望访问其它域名下的数据，但是不必要链接到其它域名下的页面上，也就是说，只需要获得其它域名下的数据即可，这时，客户端向数据所属的web服务器发送获取数据的请求。在本实施例中，客户端用户在浏览页面A：http://a1.b.com/a.html时，欲访问非本域名下的但域名后缀相同的数据B，则向数据B所属的web服务器即a2.b.com的web服务器发送获取请求。这里，页面A也可以称为第一页面。

步骤402、判断页面A中是否已经嵌入了代理页面C，如果是，执行步骤404-405；否则，执行步骤403；

步骤403、动态创建iframe，拉取代理页面C嵌入页面A中，并将页面A获取数据B后需要进行的逻辑处理以及所发起的获取数据B所在域下的其它数据的请求存放到一个预设的回调队列中；

iframe是一种内嵌式页面技术，可以在一个页面中嵌入另一个页面，这一步骤即是动态创建iframe，将iframe的地址指向代理页面C的地址，拉取a2.b.com的web服务器上保存的代理页面C，嵌入页面A中，代理页面拉取成功后，可以进一步通知页面A已经拉取完成，这时可以通过设置变量或者调用回调函数来通知页面A。在将代理页面C嵌入页面A的过程中，页面A可能发起对a2.b.com域下的其它数据的请求，而且页面A还将对所获取的数据B进行逻辑处理，这时可以将这些请求和逻辑处理一并放到一个预先设置的回调队列中，便于页面A在拉取代理页面C成功后，依次对回调队列中的内容进行处理。回调队列可以至少包括以下信息：所需要获取的数据、获取数据成功后需要进行的逻辑处理。

可见，创建回调队列是为了避免在嵌入代理页面时遗漏了对该域其它数据的请求，这是一种较佳的实施方式，实际应用中也可以不用创建回调队列。

另外，采用iframe嵌入代理页面也仅是嵌入代理页面的一种方式，其它嵌入代理页面的方式同样适用于本发明。

步骤404、代理页面C和页面A调用脚本，分别将自己的域设置成域的后缀。

代理页面C为http://a2.b.com/proxy.html，页面A为http://a1.b.com/a.html它们调用脚本执行document.domain＝“b.com”后，代理页面C和页面A就将自己的域都设置成了b.com。经过这一步骤后，代理页面C和页面A就可以互相访问了。

步骤405、页面A调用代理页面C所属的a2.b.com域的XMLHttpRequest对象，获取数据B。

步骤406、依次处理回调队列中的逻辑处理和请求。

以上结合图4描述了页面A在请求获取数据B时动态创建iframe拉取代理页面并通过代理页面获取数据B的过程，事实上，如果页面A可以预先知道需要获取哪些域上的数据，那么还可以直接把这些域的代理页面嵌入页面A中，这样就不用在请求数据时才动态创建iframe拉取代理页面，也不用创建回调队列保存拉取代理页面过程中进行的处理。

从以上步骤可以看到，本发明实施例提供的方法是在数据B所属的web服务器上预先保存一个代理页面，页面A通过iframe将代理页面嵌入页面A中，然后利用同域原则的特例实现页面A与代理页面C的互相访问，通过代理页面C获取数据B。可见，本发明的方案实现简单、成本低。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (10)

1、一种跨域获取数据的方法，其特征在于，该方法包括：

在第一页面中嵌入与第一页面所属域的后缀相同且与第一页面所需获取的数据的所属域相同的代理页面，所述第一页面通过所述代理页面获取所需数据。

2、根据权利要求1所述的方法，其特征在于，在所述嵌入代理页面之前，该方法进一步包括：

判断第一页面中是否嵌入了代理页面，如果是，则直接通过代理页面获取数据；否则，执行所述嵌入步骤。

3、根据权利要求2所述的方法，其特征在于，在所述判断之前，该方法进一步包括：

向第一页面所需获取数据所属的网络服务器发送获取数据的请求。

4、根据权利要求1、2或3所述的方法，其特征在于，所述通过代理页面获取数据具体包括：

第一页面和代理页面分别将自身所属的域设置成域的后缀，第一页面调用代理页面的数据请求对象获取数据。

5、根据权利要求1所述的方法，其特征在于，所述在第一页面中嵌入代理页面具体包括：

动态创建内嵌式页面，将内嵌式页面的地址指向代理页面的地址，拉取代理页面嵌入当前页面中。

6、根据权利要求1、2或3所述的方法，其特征在于，所述在第一页面中嵌入代理页面与通过代理页面获取数据之间，该方法进一步包括：

创建回调队列，将在代理页面嵌入第一页面过程中第一页面获取与数据同域的其它数据的请求以及获取数据后需要进行的逻辑处理存放到回调队列中。

7、根据权利要求6所述的方法，其特征在于，在所述获取数据之后，该方法进一步包括：

依次处理所述回调队列中的逻辑处理和请求。

8、一种跨域获取数据的系统，其特征在于，包括欲获取与自身所属域后缀相同的数据的第一页面，该系统进一步包括：

与数据所属域相同且嵌入第一页面中的代理页面，所述代理页面用于根据第一页面的请求获取数据并将数据发送给第一页面。

9、根据权利要求8所述的系统，其特征在于，该系统进一步包括回调队列，用于保存第一页面发送的同域数据请求和逻辑处理。

10、根据权利要求8所述的系统，其特征在于，所述数据为一个以上保存在后缀与第一页面所属域相同的服务器上的数据，且每个代理页面与具有相同所属域的一个或一个以上的数据相对应。

Images