CN103309861A - 跨域数据获取的方法与装置 - Google Patents

Abstract

本申请涉及一种跨域数据获取的方法与装置。该方法包括：浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

Description

跨域数据获取的方法与装置

技术领域

本申请涉及互联网数据加载领域，尤其涉及一种跨域数据获取的方法与装置。

背景技术

目前，基于同源策略，在浏览器端，位于服务器1上的页面无法与跨域的服务器进行数据之间的交换，但超文本标记语言(HyperText MarkupLanguage，HTML)的<script>元素(脚本标签元素)是一个例外。通过利用HTML中的<script>元素，服务器1上的页面可以获取其他服务器上动态产生的JSON数据，这种数据跨域交换模式就是JSONP模式，所述同源策略为浏览器与服务器的域名，协议和端口均相同时，才可以相互访问。

JSONP(JavaScript Object Notation with Padding)是数据格式JSON的一种“使用模式”。在浏览器端，位于服务器1上的页面在需要获取其他服务器上的数据时，会发起一个JSONP请求，每发起一个JSONP请求，都需要一个script元素。因此，浏览器必须为每一个JSONP请求创建一个新的包含src属性值的<script>元素到HTML DOM里，或者说是“注入”这个元素。浏览器会解析该<script>元素中的src属性，下载src属性指明的URL，并执行返回的JSONP脚本代码。因此，JSONP被称作是一种“让使用者利用<script>元素注入的方式来绕开同源策略”的方法。

在现有技术中，例如服务器1上的页面http://www.server1.com，想要获取服务器2上的数据内容，假设获取服务器2上数据内容的URL为http://server2.com/RetrieveUser？UserID＝xxx；如果UserID的值为1823，则URL为http://server2.com/RetrieveUser？UserID＝1823，服务器1上的页面会通过浏览器请求上面这个URL来获取服务器2上的数据内容，在服务器1上的页面中会创建一个新的包含src属性值的<script>元素到HTML DOM里，假设<script>元素为：<script

src＝“http://server2.com/RetrieveUserID＝1823&jsonp＝parseResponse”>

</script>

则服务器1上的页面通过<script>元素获取的数据内容为parseResponse({“Name”：“Cheeso”，“ID”：1823，“Rank”：7})。

上面描述的方案，需要借助HTML的<script>元素获取URL中的数据内容，获取成功后再将数据内容传给全局回调函数。回调函数是全局的，这会污染JavaScript代码的全局命名空间，当项目很复杂时，有可能会导致命名冲突，增加开发成本。

此外，开发和测试方在工作时需要依赖事先约定的全局回调函数名，存在文档书写和协作沟通成本，会降低工作效率。

再者，由于要将回调函数名写在请求的URL中，如果代码处理不当，会存在JavaScript注入漏洞，影响网站安全。

另外，服务器输出的JSONP脚本代码中的回调函数名是动态的，这意味着不利于固定数据的静态缓存，容易对网站的性能造成不利影响。

上述状况使得JSONP方案存在不少弊端。如何找出既能方便快捷地跨域，又能简化调用方式、保障网站安全、以及有利于性能优化的数据交换方式是跨域获取数据内容的关键。

发明内容

本申请的目的是提供一种跨域数据获取的方法与装置，通过精确获取跨域的数据内容，以简化调用方式、保障网站安全、并提高跨域获取数据的效率。

为实现上述目的，本申请提供了一种跨域数据获取的方法，该方法包括：

浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；

向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

相应地，本申请提供了一种跨域数据获取的装置，该装置包括：

载入单元，用于浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；

第一发送单元，用于向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

加载单元，用于接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

因此，本申请实现了在不同域服务器之间获取数据，通过载入模块加载器和加载数据模块，实现精确获取跨域的数据内容，以简化调用方式、保障网站安全、并提高跨域获取数据的效率。

附图说明

图1为现有技术JSONP实现跨域获取数据流程图；

图2为本申请跨域数据获取方法的应用系统架构；

图3为本申请跨域数据获取的方法流程图；

图4为本申请跨域数据获取的装置结构图。

具体实施方式

下面通过附图和实施例，对本申请实施例的技术方案做进一步的详细描述。

本申请跨域数据获取的方法，在服务器1中的页面上载入模块加载器，在服务器2中将服务器1中页面需要的数据定义为数据模块，通过服务器1中页面上载入模块加载器，来加载服务器2中的数据模块，从而实现数据的跨域获取，且所需要的数据内容均可按统一的书写格式定义，使其具有更好的通用性能；通过使用模块加载器来加载数据模块，可保证及时准确地获取到数据加载状态；各数据模块之间彼此独立，不会造成污染和干扰。

下面首先介绍本申请跨域数据获取方法的应用系统架构，如图2所示，该系统包括浏览器、服务器1和服务器2。在浏览器端，首先向服务器1发送访问请求，请求访问由服务器1提供的页面A，服务器1回应浏览器的访问请求，即允许浏览器访问页面A；浏览器在当前访问的服务器1的页面A中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；在页面A中，存在一段JavaScript代码，浏览器在运行页面A中的这段JavaScript代码时，需要获取位于其他域中的服务器2上的数据内容才能继续运行这段代码，此时，浏览器向服务器2发送请求信息，希望获取服务器2上的数据内容，服务器2上的数据内容在浏览器发送请求信息前已经将数据内容打包，定义为数据模块的形式或者服务器2根据浏览器发送的请求信息将浏览器需要的数据内容打包，定义为数据模块的形式，上述服务器2将数据内容打包定义的两种方式均可通过URL链接，将数据模块回传至浏览器访问的页面A上，浏览器通过载入的模块加载器，来加载回传的数据模块，以此，实现数据的跨域获取。

图3为本申请实施例跨域数据获取的方法流程图；如图3所示，并结合图2，在浏览器端，首先向服务器1发送访问请求，请求访问由服务器1提供的页面A，服务器1回应浏览器的访问请求，即允许浏览器访问页面A；浏览器开始访问页面A，首先在页面A中载入模块加载器，浏览器在访问页面A的过程中，在页面A中，存在一段JavaScript代码，浏览器在解析页面A中的这段JavaScript代码时，需要获取位于其他域中的服务器2上的数据内容才能继续运行这段代码，此时，浏览器向服务器2发送请求信息，希望获取服务器2上的数据内容，服务器2上的数据内容在浏览器发送请求信息前已经将数据内容打包，定义为数据模块的形式或者服务器2根据浏览器发送的请求信息将浏览器需要的数据内容打包，定义为数据模块的形式，上述服务器2将数据内容打包定义的两种方式均通过URL链接，将数据模块回传至浏览器访问的页面A上，浏览器通过载入的模块加载器，来加载回传的数据模块，本申请实施例跨域数据获取的方法具体包括以下步骤：

步骤310、浏览器发送访问请求，请求访问服务器1上的页面；

具体地，在本申请实施例中，假设服务器1上的页面A的具体链接为http://www.server1.com/path/to/page-a.html；在浏览器端，首先向服务器1发送访问请求，请求访问由服务器1提供的页面A，服务器1回应浏览器的访问请求，即允许浏览器访问页面A。

步骤320、浏览器接收允许访问第一服务器上的页面的响应信息，在页面中载入模块加载器；

在此不限定模块加载器载入的时间，模块加载器可以在浏览器接收到运行访问页面的响应时，刚开始访问页面同时开始载入；或者可以在浏览器访问页面的过程中进行载入，或者可以在浏览器解析页面的数据内容出现问题时，才载入模块加载器，因此，本实施例中载入模块加载器的步骤不是限制本申请。

具体地，浏览器接收到由服务器1发送的响应信息后，开始访问服务器1上的页面A；浏览器在当前访问的服务器1的页面A中载入模块加载器，所述模块加载器是用来进行不同域服务器之间的数据调用，在页面A中，存在一段JavaScript代码，当浏览器在解析页面A中的这段JavaScript代码时，需要获取位于其他域中服务器2上的数据内容才能继续运行这段代码时，通过使用模块加载器来解析从服务器2回传的数据内容，以调用该数据内容；

具体地，在本申请中，通过SeaJS来实现模块加载器的功能，所述SeaJS代码是JavaScript模块加载框架，例如，使用模块加载器的代码为：

在此处，加载完模块加载器后，通过seajs.use方法，使用data参数就可以访问到其他域中data.js中定义的数据内容，即在调用模块加载器的使用方法(使用函数)seajs.use中指明了当前页面所需要的数据内容所在的URL链接，并向其他域中服务器上的data.js获取所需数据内容。即，所述模块加载器的调用函数seajs.use中包括指向所述第二服务器的URL链接地址，以使浏览器通过该URL链接地址向所述第二服务器发送请求。所述seajs.use方法为现有技术，在此不再赘述。

因此，当服务器1上的页面需要其他域服务器上的数据内容时，通过在模块加载器的使用函数中设定的路径‘path/to/data.js’，可以获得其他域服务器上的数据内容，也即向哪个域服务器获取数据内容，可以通过模块加载器的使用函数中的URL地址指向明确。

步骤330、向所述第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

具体地，浏览器在载入模块加载器后，当执行页面中的脚本代码时，需要获取服务器2中的data.js上的数据内容，即当浏览器需要调用第二服务器上的数据内容时，浏览器通过URL链接向服务器2发送获取其数据内容的请求信息，在本申请实施例中，假设URL链接为http://www.server2.com/path/to/data.json；即浏览器通过该URL链接向服务器2发送请求获取数据内容信息。

步骤340、服务器2将数据内容打包为数据模块的形式，向浏览器发送包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容；

服务器2定义数据内容即数据模块，在本申请实施例中，服务器2在浏览器发送请求获取数据内容信息之前，服务器2将数据内容打包，定义为数据模块的形式，或者服务器2根据通过该URL链接发送的请求信息将浏览器需要的数据内容打包，定义为数据模块的形式。即对数据内容定义为数据模块可以是服务器2预先根据设定进行定义完成的，或者是在接收到服务器1发送的请求时，对该数据内容进行的数据模块定义。

在服务器2中，编写数据内容使用的编程语言为JavaScript，由于编程语言JavaScript为现有技术，在此不再赘述。例如：将姓名、年龄和所在城市等内容打包，定义为个人信息数据模块：

或者将各类水果名称内容打包，定义为水果信息数据模块：

define([“Apple”，“Orange”，“Banana”])；

或者将字符串内容打包，定义为字符串数据模块：

define(“a long long string”)；

在本申请实施例中，以个人信息数据模块为例进行说明，若浏览器需要获取服务器2上的数据内容为一些个人信息，则服务器2按照前述方法将这些个人信息等内容打包，定义为个人信息数据模块；并向浏览器提供获取该个人信息数据模块的URL链接，也即是URL链接中包括对所述所需的数据内容进行数据模块定义后获得的数据模块的信息。在此，用于获取该个人信息数据模块的URL链接为：http://server2.com/path/to/data.js；

通过定义数据模块，让服务器中所有的数据内容都遵守同意的书写格式，使定义后的数据模块更简洁，有效减少因书写而导致的错误，提高通用性。

步骤350、浏览器通过模块加载器，加载定义好的数据模块；

具体地，浏览器通过载入的模块加载器加载服务器2中的数据内容。在本申请实施例中，浏览器首先通过第一服务器HTML中的<script>元素将用于回传个人信息数据模块的URL链接中的个人信息数据信息下载下来，也就是浏览器解析由模块加载器在页面A中创建的<script>元素s rc的属性值：<script src＝″http://server2.com/path/to/data.js″></script>，得到src的属性值，src的属性值就是http://server2.com/path/to/data.js，浏览器向服务器2请求该URL中的个人信息数据内容，服务器2接收到请求后，给浏览器发送个人信息数据内容，浏览器接收到这些数据，下载个人信息数据信息；下载个人信息数据内容后，执行个人信息数据模块中的JavaScript代码中的define(data)语句；执行后，将data和用于回传数据内容的URL链接对应起来，并保存到一个映射表map中；

使用参数data或require调用方法加载定义函数define(data)中的数据时，通过URL链接查询映射表map，并得到保存的数据data，也就是得到服务器2中个人信息数据模块中的JSON格式的数据内容{“name”：“John”，“age”：“22”，“city”：“Hangzhou”}等；

将define(da ta)中的数据内容{“name”：“John”，“age”：“22”，“city”：“Hangzhou”}下载保存后，可以使用data.name、data.age或data.city等属性获取个人信息模块中数据的具体内容。

上文所述的加载数据内容的过程是在网络环境正常的情况下，但是，获取服务器2中数据内容时，有些时候网络环境存在问题，浏览器访问data.js时，会出现访问错误的情况，通过var data＝require(“http://server2.com/path/to/data.js”)加载define(data)中的数据时，将立即得到的是值为null的数据，此时，获取的数据为null时，说明模块加载器在加载数据时已经出错，即浏览器无法从服务器2中获取需要的数据内容，此时，可以选择重新获取服务器2中的数据或者放弃获取服务器2中的数据。

通过模块加载器加载数据模块，实现精确获取跨域的数据内容，以简化调用方式、保障网站安全、并提高跨域获取数据的效率。

需要说明的是，上述获取异地服务器的方法是以一个异地服务器2为例进行说明的，在实际应用中，也可按上述描述获取多个异地服务器中的数据内容。

相应地，如图4所示，本申请实施例还提供了一种跨域数据获取的装置，该装置包括：

载入单元410，用于浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；

第一发送单元420，用于向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

加载单元430，用于接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

所述装置还包括：第二发送单元440，用于浏览器向所述第一服务器发送访问请求，以请求访问由所述第一服务器提供的页面；接收所述第一服务器返回的允许访问的响应消息。

所述载入单元具体用于：所述载入模块加载器是通过在所述第一服务器的页面中运行SeaJS代码进行，所述SeaJS代码是JavaScript模块加载框架。

所述加载单元具体用于：根据所述第一服务器的页面中的超文本标记语言HTML内的<script>元素从所述URL链接中将所述页面需要获取的数据模块下载至所述页面中；

在所述页面中执行所述数据模块的define定义函数，将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接对应，并将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接保存在映射表map中；

使用所述映射表map查询所述数据模块，并执行require函数加载所述数据模块中的内容；

若所述require函数加载所述数据模块中的内容正常时，保存加载后的所述数据模块中的内容，供所述页面使用。

所述加载单元还具体用于：若所述require函数加载所述数据模块中的内容不正常时，选择重新获取所述第二服务器中的数据或者放弃获取所述第二服务器中的数据。

因此，本申请实施例的跨域数据获取的装置，实现了在不同域服务器之间获取数据，通过定义数据模块和加载数据模块，实现精确获取跨域的数据内容，以简化调用方式、保障网站安全、并提高跨域获取数据的效率。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

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

浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；

向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

2.根据权利要求1所述的跨域数据获取的方法，其特征在于，所述模块加载器的使用函数中包括指向所述第二服务器的URL链接地址，以使浏览器通过该URL链接地址向所述第二服务器发送请求。

3.根据权利要求1所述的跨域数据获取的方法，其特征在于，还包括：

浏览器向所述第一服务器发送访问请求，以请求访问由所述第一服务器提供的页面；

接收所述第一服务器返回的允许访问的响应消息。

4.根据权利要求1所述的跨域数据获取的方法，其特征在于，所述浏览器在当前访问的第一服务器的页面中载入模块加载器具体为：所述载入模块加载器是通过在所述第一服务器的页面中运行SeaJS代码进行，所述SeaJS代码是JavaScript模块加载框架。

5.根据权利要求2所述的跨域数据获取的方法，其特征在于，所述接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容具体为：

根据所述第一服务器的页面中的超文本标记语言HTML内的<script>元素从所述URL链接中将所述页面需要获取的数据模块下载至所述页面中；

在所述页面中执行所述数据模块的define定义函数，将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接对应，并将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接保存在映射表map中；

使用所述映射表map查询所述数据模块，并执行require函数加载所述数据模块中的内容；

若所述require函数加载所述数据模块中的内容正常时，保存加载后的所述数据模块中的内容，供所述页面使用。

6.根据权利要求5所述的跨域数据获取的方法，其特征在于，若所述require函数加载所述数据模块中的内容不正常时，选择重新获取所述第二服务器中的数据或者放弃获取所述第二服务器中的数据。

7.一种跨域数据获取的装置，其特征在于，所述装置包括：

载入单元，用于浏览器在当前访问的第一服务器的页面中载入模块加载器，所述模块加载器用于对不同域服务器之间的数据内容进行加载和调用；

第一发送单元，用于向第二服务器发送请求信息，以指示所述第二服务器发送所述页面所需的数据内容；

加载单元，用于接收所述第二服务器发送的、包括对所述所需的数据内容进行数据模块定义后获得的数据模块的内容，所述模块加载器根据所述数据模块的内容解析所述数据模块，以在所述当前访问的第一服务器的页面中调用所述第二服务器的数据内容。

8.根据权利要求7所述的跨域数据获取的装置，其特征在于，所述模块加载器的使用函数中包括指向所述第二服务器的URL链接地址，以使浏览器通过该URL链接地址向所述第二服务器发送请求。

9.根据权利要求7所述的跨域数据获取的装置，其特征在于，所述装置还包括：

第二发送单元，用于浏览器向所述第一服务器发送访问请求，以请求访问由所述第一服务器提供的页面；

接收所述第一服务器返回的允许访问的响应消息。

10.根据权利要求8所述的跨域数据获取的装置，其特征在于，所述加载单元具体用于：

根据所述第一服务器的页面中的超文本标记语言HTML内的<script>元素从所述URL链接中将所述页面需要获取的数据模块下载至所述页面中；

在所述页面中执行所述数据模块的define定义函数，将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接对应，并将所述数据模块中的数据内容与用于回传所述数据模块中的内容的所述URL链接保存在映射表map中；

使用所述映射表map查询所述数据模块，并执行require函数加载所述数据模块中的内容；

若所述require函数加载所述数据模块中的内容正常时，保存加载后的所述数据模块中的内容，供所述页面使用。

Images