CN103345393A - 一种控制网页的方法和装置 - Google Patents

Abstract

本发明提供一种控制网页的方法和装置，有助于在对网页中具有关联关系的网页元素进行更新时占用较少的带宽并且提高更新速度。在该方法中，网页使用AJAX技术，其中有多个网页组件具有关联关系，该方法包括：终端设备向服务器发送用于修改第一网页组件的内容的第一修改请求，并且对预设的标识信息做出修改；并在检测到标识信息发生改变的情况下根据标识信息生成第二修改请求然后发送给服务器；服务器在收到第一修改请求后，对第一网页组件的参数值做出修改，并且根据该修改和关联关系以及第二修改请求，对上述一个或多个网页组件的参数值做出修改后发送给终端设备以供终端设备对上述一个或多个网页组件进行刷新。

Description

一种控制网页的方法和装置

技术领域

本发明涉及一种控制网页的方法和装置。

背景技术

在使用AJAX（Asynchronous JavaScript and XML）技术的网页中，当网页中的网页组件需要更新时，一般是采用FORM表单提交的方式对网页进行更新，并控制具有关联关系的网页组件同步更新。图1是根据现有技术中的一种包含多个具有关联关系的网页组件的网页的示意图。这里的关联关系例如网页10（图中示出的是网页的一部分）中的目录树列表11、包屑导航栏12、以及文件列表13之间需要保持逻辑上的一致关系，即文件列表13中的文件和文件夹应当是目录树列表11中的展开的目录下的内容，目录树列表11展开的当前目录的路径应与包屑导航栏12的内容一致。当然关联关系不限于此，还包括其他类型的网页组件之间的内容上的关联关系。

根据现有技术中的做法，在网页中有多个网页组件具有关联关系的情况下，在更新其中一个网页组件时对整个网页都进行更新，包括不具有关联关系的网页组件，这种方式占用比较多的网络带宽，并且影响了更新速度。

发明内容

有鉴于此，本发明提供一种控制网页的方法和装置，有助于在对网页中具有关联关系的网页元素进行更新时占用较少的带宽并且提高更新速度。

为实现上述目的，根据本发明的一个方面，提供了一种控制网页的方法。

在本发明的控制网页的方法中，网页使用AJAX技术，其中有多个网页组件具有关联关系，该方法包括：终端设备向服务器发送用于修改第一网页组件的内容的第一修改请求，并且对预设的标识信息做出修改，修改后的所述标识信息中包含用于确定与所述第一网页组件作同步修改的一个或多个网页组件；终端设备在检测到所述标识信息发生改变的情况下，根据所述标识信息生成第二修改请求然后发送给服务器，所述第二修改请求用于获取在所述第一网页组件的内容被修改的情况下所述一个或多个网页组件的相应修改后的参数值；所述服务器在收到所述第一修改请求后，对所述第一网页组件的参数值做出修改，并且根据该修改和所述关联关系以及第二修改请求，对所述一个或多个网页组件的参数值做出修改后发送给所述终端设备；所述终端设备根据收到的所述参数值对所述一个或多个网页组件进行刷新。

可选地，所述预设的标识信息为浏览器地址栏中的统一资源定位符（URL）；对预设的标识信息做出修改的步骤包括：使用JavaScript的锚点属性修改所述URL，使该URL中包含与所述第一网页组件相关联的网页组件的参数名称；根据所述标识信息生成第二修改请求的步骤包括：从修改后的所述URL中获取所述参数名称，按照获取的参数名称生成第二修改请求。

可选地，所述多个具有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表。

可选地，所述预设的标识信息为浏览器地址栏中的统一资源定位符（URL）；对预设的标识信息做出修改的步骤包括：使用JavaScript的锚点属性修改所述URL，使该URL中包含文件标识；根据所述标识信息生成第二修改请求的步骤包括：从修改后的所述URL中获取文件标识，按照获取的文件标识生成第二修改请求；对所述一个或多个网页组件的参数值做出修改的步骤包括：对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

根据本发明的另一方面，提供了一种控制网页的装置。

对于本发明的控制网页的装置，所述网页使用AJAX技术，其中有多个网页组件具有关联关系，该装置包括：第一请求模块，用于向服务器发送用于修改第一网页组件的内容的第一修改请求；标识信息模块，用于对预设的标识信息做出修改，修改后的所述标识信息中包含用于确定与所述第一网页组件作同步修改的一个或多个网页组件；检测模块，用于检测所述标识信息是否发生改变；第二请求模块，用于在所述标识信息发生改变的情况下，根据所述标识信息生成第二修改请求然后发送给服务器，所述第二修改请求用于获取在所述第一网页组件的内容被修改的情况下所述一个或多个网页组件的相应修改后的参数值；刷新模块，用于根据收到的所述参数值对所述一个或多个网页组件进行刷新。

可选地，所述标识信息模块还用于使用JavaScript的锚点属性修改所述URL，使该URL中包含与所述第一网页组件相关联的网页组件的参数名称；所述第二请求模块还用于从修改后的所述URL中获取所述参数名称，按照获取的参数名称生成第二修改请求。

可选地，所述多个具有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表。

可选地，所述标识信息模块还用于使用JavaScript的锚点属性修改所述URL，使该URL中包含文件标识；所述第二请求模块还用于从修改后的所述URL中获取文件标识，按照获取的文件标识生成第二修改请求；所述刷新模块还用于对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

根据本发明的技术方案，对于使用AJAX技术并且有多个网页组件具有关联关系的网页，在其中一个网页组件被修改时，仅请求修改与该网页组件有关联关系的网页组件，对于其他网页组件则不作更新，这样尽可能地减少了从服务器下载的数据，有助于提高页面更新速度，并只需占用较少的网络带宽。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据现有技术中的一种包含多个具有关联关系的网页组件的网页的示意图；

图2是根据本发明实施例的控制网页的方法基本步骤的示意图；

图3是根据本发明实施例的控制网页的装置的基本结构的示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图2是根据本发明实施例的控制网页的方法基本步骤的示意图。该方法由服务器和终端设备交互完成，主要适用于使用AJAX技术的网页，并且该网页中有多个网页组件具有关联关系。如图2所示，该方法主要包括如下步骤：

步骤S21：终端设备向服务器发送用于修改第一网页组件的内容的第一修改请求。以图1为例，这里的修改请求例如刷新文件列表13、在目录树列表中添加或删除一个文件夹等。本步骤之后，服务器执行步骤S24。

步骤S22：终端设备对预设的标识信息做出修改。本步骤可以和步骤S21同时进行。本步骤中修改后的标识信息中包含用于确定与第一网页组件作同步修改的一个或多个网页组件。

终端设备执行的另一个线程是检测步骤S22的标识信息是否发生改变。在检测到该标识信息发生改变的情况下，进入步骤S23。

步骤S23：终端设备根据标识信息生成第二修改请求然后发送给服务器。该第二修改请求用于获取在上述的第一网页组件的内容被修改的情况下，上述的与第一网页组件作同步修改的一个或多个网页组件的相应修改后的参数值。

步骤S24：服务器接收第一修改请求，然后对第一网页组件的参数值做出修改。例如第一修改请求是删除了目录树列表中的一个文件夹，则服务器修改的参数是文件ID路径。文件ID路径包含从当前目录到文件根目录每一级文件名，用于展开目录树列表。本步骤之后服务器执行步骤S25。

步骤S25：服务器根据步骤S24中的修改、网页组件之间的关联关系、以及第二修改请求，对与第一网页组件有关联关系的网页组件的参数值做出修改。例如第一修改请求是删除了目录树列表中的一个文件夹，则服务器相应修改文件列表中的文件ID，使文件列表得以更新。

步骤S26：服务器将步骤S25中修改后的参数值发送给终端设备。本步骤之后进入终端设备执行的步骤S27。

步骤S27：终端设备根据步骤S26中服务器发送的参数值，对与第一网页组件有关联关系的网页组件进行刷新。例如服务器发送的是文件列表中的文件ID，则终端设备根据这些文件ID重新呈现文件列表。

对于使用AJAX技术的网页来说，浏览器的“前进”、“后退”按钮会失效，所以步骤S22中的预设的标识信息可以是浏览器地址栏中的URL，即步骤S22中对浏览器地址栏中的URL做出修改，具体可采用JavaScript的锚点属性（window.location.hash）修改该URL，使该URL中包含与上述第一网页组件相关联的网页组件的参数名称。例如第一网页组件是文件列表，用户点击文件列表中的文件时，页面JS会调用AJAX请求以刷新文件列表，同时更新页面上隐藏域中的有关联关系的网页组件的参数，具体是文件ID路径和文件名路径。其中文件名路径包含从当前目录到文件根目录每一级文件名，用于在页面上显示面包屑。在改变隐藏域的同时利用JavaScript的锚点属性改变浏览器地址栏的URL信息，该URL中包含了和隐藏域类似的信息，例如是如下格式类型的地址：

http://jbox.jcloud.com/home.html#path%3D%2F%E6%88%91%E7%9A%84%E5%9B%BE%E7%89%87%3B%2F21003

其中#号后面就是利用JavaScript锚点属性改变的值，里面包含的是已经转成URL编码的文件名路径和文件ID路径。这样在步骤S23中，从修改后的URL中获取隐藏域中的参数，然后根据该参数名称生成第二修改请求。

有些用户在使用浏览器时，会将地址栏内的URL复制出来然后粘贴到新的浏览器窗口的地址栏内。从上面的举例可以看出，如果将隐藏域中的参数记录在地址栏内的URL中，会使该URL变得很长。对于上述的具有有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表的情况，因为文件ID是唯一的，所以可以在上述的URL中只包含文件ID，这样服务器收到的第二修改请求中只包含文件ID，但服务器可以可采用基于键值对的HBase或者MongoDb等工具，事先根据文件ID记录每级文件目录的信息，这样在收到第二修改请求后，根据其中的文件ID就可以对：对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

从图2所示的步骤可以看出，在一个网页组件被修改时，仅请求修改与该网页组件有关联关系的网页组件，对于其他网页组件则不作更新，例如图1中，在目录树列表11被修改时，仅更新与其有关联关系的面包屑导航栏12和文件列表13，而不更新“我的清单”14。这样有助于减少从服务器下载的数据，从而占用较少的网络带宽。

以下对本发明实施例中的控制网页的装置做出说明。该装置可以设置在终端设备中。图3是根据本发明实施例的控制网页的装置的基本结构的示意图。如图3所示，控制网页的装置30主要包括第一请求模块31、标识信息模块32、检测模块33、第二请求模块34、以及刷新模块35。

第一请求模块31用于向服务器发送用于修改第一网页组件的内容的第一修改请求；标识信息模块32用于对预设的标识信息做出修改，修改后的所述标识信息中包含用于确定与所述第一网页组件作同步修改的一个或多个网页组件；检测模块33用于检测所述标识信息是否发生改变；第二请求模块34用于在所述标识信息发生改变的情况下，根据所述标识信息生成第二修改请求然后发送给服务器，所述第二修改请求用于获取在所述第一网页组件的内容被修改的情况下所述一个或多个网页组件的相应修改后的参数值；刷新模块35用于根据收到的所述参数值对所述一个或多个网页组件进行刷新。

标识信息模块32还可用于使用JavaScript的锚点属性修改浏览器地址栏中的URL，使该URL中包含与第一网页组件相关联的网页组件的参数名称；第二请求模块34还可用于从修改后的URL中获取参数名称，按照获取的参数名称生成第二修改请求。

对于多个具有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表的情况，标识信息模块32还可用于使用JavaScript的锚点属性修改浏览器地址栏中的URL，使该URL中包含文件标识；第二请求模块34还可用于从修改后的所述URL中获取文件标识，按照获取的文件标识生成第二修改请求；刷新模块35还可用于对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

根据本发明实施例的技术方案，对于使用AJAX技术并且有多个网页组件具有关联关系的网页，在其中一个网页组件被修改时，仅请求修改与该网页组件有关联关系的网页组件，对于其他网页组件则不作更新，这样尽可能地减少了从服务器下载的数据，有助于提高页面更新速度，并只需占用较少的网络带宽。

以上结合具体实施例描述了本发明的基本原理，但是，需要指出的是，对本领域的普通技术人员而言，能够理解本发明的方法和设备的全部或者任何步骤或者部件，可以在任何计算装置（包括处理器、存储介质等）或者计算装置的网络中，以硬件、固件、软件或者它们的组合加以实现，这是本领域普通技术人员在阅读了本发明的说明的情况下运用他们的基本编程技能就能实现的。

因此，本发明的目的还可以通过在任何计算装置上运行一个程序或者一组程序来实现。所述计算装置可以是公知的通用装置。因此，本发明的目的也可以仅仅通过提供包含实现所述方法或者装置的程序代码的程序产品来实现。也就是说，这样的程序产品也构成本发明，并且存储有这样的程序产品的存储介质也构成本发明。显然，所述存储介质可以是任何公知的存储介质或者将来开发出的任何存储介质。

还需要指出的是，在本发明的装置和方法中，显然，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本发明的等效方案。并且，执行上述系列处理的步骤可以自然地按照说明的顺序按时间顺序执行，但是并不需要一定按照时间顺序执行。某些步骤可以并行或彼此独立地执行。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (8)

1.一种控制网页的方法，所述网页使用AJAX技术，其中有多个网页组件具有关联关系，其特征在于，该方法包括：

终端设备向服务器发送用于修改第一网页组件的内容的第一修改请求，并且对预设的标识信息做出修改，修改后的所述标识信息中包含用于确定与所述第一网页组件作同步修改的一个或多个网页组件；

终端设备在检测到所述标识信息发生改变的情况下，根据所述标识信息生成第二修改请求然后发送给服务器，所述第二修改请求用于获取在所述第一网页组件的内容被修改的情况下所述一个或多个网页组件的相应修改后的参数值；

所述服务器在收到所述第一修改请求后，对所述第一网页组件的参数值做出修改，并且根据该修改和所述关联关系以及第二修改请求，对所述一个或多个网页组件的参数值做出修改后发送给所述终端设备；

所述终端设备根据收到的所述参数值对所述一个或多个网页组件进行刷新。

2.根据权利要求1所述的方法，其特征在于，所述预设的标识信息为浏览器地址栏中的统一资源定位符（URL）；

对预设的标识信息做出修改的步骤包括：使用JavaScript的锚点属性修改所述URL，使该URL中包含与所述第一网页组件相关联的网页组件的参数名称；

根据所述标识信息生成第二修改请求的步骤包括：从修改后的所述URL中获取所述参数名称，按照获取的参数名称生成第二修改请求。

3.根据权利要求1所述的方法，其特征在于，所述多个具有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表。

4.根据权利要求3所述的方法，其特征在于，所述预设的标识信息为浏览器地址栏中的统一资源定位符（URL）；

对预设的标识信息做出修改的步骤包括：使用JavaScript的锚点属性修改所述URL，使该URL中包含文件标识；

根据所述标识信息生成第二修改请求的步骤包括：从修改后的所述URL中获取文件标识，按照获取的文件标识生成第二修改请求；

对所述一个或多个网页组件的参数值做出修改的步骤包括：对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

5.一种控制网页的装置，所述网页使用AJAX技术，其中有多个网页组件具有关联关系，其特征在于，该装置包括：

第一请求模块，用于向服务器发送用于修改第一网页组件的内容的第一修改请求；

标识信息模块，用于对预设的标识信息做出修改，修改后的所述标识信息中包含用于确定与所述第一网页组件作同步修改的一个或多个网页组件；

检测模块，用于检测所述标识信息是否发生改变；

第二请求模块，用于在所述标识信息发生改变的情况下，根据所述标识信息生成第二修改请求然后发送给服务器，所述第二修改请求用于获取在所述第一网页组件的内容被修改的情况下所述一个或多个网页组件的相应修改后的参数值；

刷新模块，用于根据收到的所述参数值对所述一个或多个网页组件进行刷新。

6.根据权利要求5所述的装置，其特征在于，

所述标识信息模块还用于使用JavaScript的锚点属性修改所述URL，使该URL中包含与所述第一网页组件相关联的网页组件的参数名称；

所述第二请求模块还用于从修改后的所述URL中获取所述参数名称，按照获取的参数名称生成第二修改请求。

7.根据权利要求5所述的装置，其特征在于，所述多个具有关联关系的网页组件是目录树列表、面包屑导航栏、文件列表。

8.根据权利要求7所述的装置，其特征在于，

所述标识信息模块还用于使用JavaScript的锚点属性修改所述URL，使该URL中包含文件标识；

所述第二请求模块还用于从修改后的所述URL中获取文件标识，按照获取的文件标识生成第二修改请求；

所述刷新模块还用于对目录树列表、面包屑导航栏、和文件列表的参数值做出修改。

Images