CN104778211A - 一种局部刷新页面模块的方法、客户端、服务器及系统 - Google Patents

Abstract

本发明提供一种局部刷新页面模块的方法、客户端、服务器及系统，首选，应用于客户端的方法，包括：当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；通过消息通道接收服务器端反馈的部分页面模块的渲染结果；利用部分页面模块的渲染结果更新浏览器上对应的部分页面模块。其次，另一种应用于服务器端的方法包括：接收客户端发送的页面刷新请求；解析页面刷新请求获取需要刷新的部分页面模块标识；根据需要刷新的部分页面模块标识，渲染对应的部分页面模块，获取渲染结果；通过消息通道反馈部分页面模块的渲染结果。本发明在不需要额外增加研发成本的前提下实现页面模块的局部刷新。

Description

一种局部刷新页面模块的方法、客户端、服务器及系统

技术领域

本发明涉及互联网技术领域，尤其涉及一种局部刷新页面模块的方法、客户端、服务器及系统。

背景技术

页面刷新技术是互联网时代广泛被使用的一种技术，页面状态或者数据会实时发生变化，想要获取最新的状态或者数据，需要通过不断的刷新页面或者页面模块来获取最新数据或者状态。

页面刷新一般有两种情况：一种情况为刷新页面URL地址不会发生变化，该情况下，页面状态保持不变，只是当前页面数据可能发生了变化；另外一种情况则为页面URL(Uniform Resource Locator,统一资源定位符)会发生变化，该情况下，页面的数据和状态均会发生变化。

页面模块刷新属于页面刷新的一部分，即当只有页面中的部分模块数据需要更新时的一种刷新行为。

对于页面模块刷新目前有两种解决方案：第一种方案是当页面个别模块需要更新时，浏览器向Web服务器发出访问请求，服务端对当前页面的所有模块进行计算并返回给浏览器端，这种方案是互联网诞生至今，最为传统的一种解决方案，也是过去经常使用的一种方案；另一种方案则为当只需要对页面中的个别模块进行刷新时，会为刷新的模块开发出相应的AJAX(Asynchronous Javascript And XML，异步JavaScript(脚本语言)和XML(Extensible Markup Language,可扩展标记语言))接口，然后前端脚本触发刷新时，会向服务器请求相关接口，接口重新计算并渲染完相关模块数据后返回给浏览器，并展示给用户，这种方案由于不需要对所有模块进行重新计算，大大提升了用户体验以及减少了服务器运算时间，在近几年也是被使用最多的一种方案。

现有的两种方案都有各自的优缺点：方案一每次都重新计算页面所有模块，返回给浏览器并展示给用户，该方案的优点就是简单，不需要为刷新工作再额外增加研发成本，但该方案的缺点也比较明显，当用户只希望刷新页面中的部分模块时，不能只针对用户需要查看的模块进行单独运算处理，而是将其它不需要刷新的模块也一起重新进行了计算，从而增加了服务端的运算成本；方案二的优点则为，当用户只需要刷新页面中的部分模块时，通过AJAX请求的方式，明确告诉服务端只运算并渲染指定的模块，页面中其它模块不进行运算，大大减少了服务端的运算开销，从用户的角度讲，只刷新了部分模块，刷新响应时间变短，浏览体验得到了提升，缺点是为了只刷新部分模块，需要为前端AJAX的刷新行为单独开发相关模块的渲染接口，会增加大量的研发成本。

发明内容

本发明实施例提供一种局部刷新页面模块的方法、客户端、服务器及系统，以在不需要额外增加研发成本的前提下实现页面模块的局部刷新。

一方面，本发明实施例提供了一种局部刷新页面模块的方法，应用于客户端，所述方法包括：

当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

另一方面，本发明实施例提供了一种局部刷新页面模块的客户端，所述客户端包括：

页面模块标识发送单元，用于当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

渲染结果接收单元，用于通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

部分页面模块更新单元，用于利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

又一方面，本发明实施例提供了一种局部刷新页面模块的方法，应用于服务器端，所述方法包括：

接收客户端发送的页面刷新请求；

解析所述页面刷新请求获取需要刷新的部分页面模块标识；

根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

通过消息通道向客户端发送所述部分页面模块的渲染结果。

又一方面，本发明实施例提供了一种局部刷新页面模块的服务器，所述服务器包括：

接收单元，用于接收客户端发送的页面刷新请求；

解析单元，用于解析所述页面刷新请求获取需要刷新的部分页面模块标识；

渲染单元，用于根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

发送单元，用于通过消息通道向客户端发送所述部分页面模块的渲染结果。

再一方面，本发明实施例提供了一种局部刷新页面模块的系统，所述系统包括上述局部刷新页面模块的客户端和上述局部刷新页面模块的服务器。

上述技术方案具有如下有益效果：1.实现局部页面模块刷新，由于不需要额外渲染其它页面模块，能大大提升刷新的响应时间，以节省服务器端的运算开销。2.由于页面模块的刷新与整个页面的页面地址进行了统一，大大减少了前后端的开发成本，提升了研发效率。3.刷新功能实现更加简单，前后端都做到了标准统一，在增加新的刷新功能时，只需要在刷新的页面地址上指明需要刷新的页面模块名称，即可完成相应的功能开发。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例一种局部刷新页面模块的方法流程图；

图2为本发明实施例一种局部刷新页面模块的客户端结构示意图；

图3为本发明实施例一种局部刷新页面模块的方法流程图；

图4为本发明实施例一种局部刷新页面模块的服务器结构示意图；

图5为本发明应用实例整体交互式意图；

图6为本发明应用实例消息通道原理示意图；

图7为本发明应用实例将页面按功能划分成不同的页面模块示意图；

图8为本发明应用实例服务器端处理流程示意图；

图9为本发明应用实例客户端与服务器端整体交互流程示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，为本发明实施例一种局部刷新页面模块的方法流程图，应用于客户端，所述方法包括：

101、当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

102、通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

103、利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

优选的，当浏览器需要刷新部分页面模块之前，所述方法还包括：将浏览器上的页面按照功能划分为不同的页面模块。

优选的，所述当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端，包括：当浏览器需要刷新部分页面模块时，通过基于超文本标记语言HTML标签iframe的消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端。

对应于上述方法实施例，如图2所示，为本发明实施例一种局部刷新页面模块的客户端结构示意图，所述客户端包括：

页面模块标识发送单元21，用于当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

渲染结果接收单元22，用于通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

部分页面模块更新单元23，用于利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

优选的，所述客户端还包括：页面模块划分单元24，用于将浏览器上的页面按照功能划分为不同的页面模块；所述页面模块标识发送单元21，具体用于当浏览器需要刷新部分页面模块时，通过基于HTML标签iframe的消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端。

如图3所示，为本发明实施例一种局部刷新页面模块的方法流程图，应用于服务器端，所述方法包括：

301、接收客户端发送的页面刷新请求；

302、解析所述页面刷新请求获取需要刷新的部分页面模块标识；

303、根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

304、通过消息通道向客户端发送所述部分页面模块的渲染结果。

优选的，所述接收客户端发送的页面刷新请求后，所述方法还包括：判断所述页面刷新请求的类型：如果页面刷新请求的类型是页面刷新类型，渲染整个页面内的所有页面模块，将渲染结果合并至页面框架中，并将渲染结果按页面的方式返回给客户端；如果页面刷新请求的类型是页面模块刷新类型，解析所述页面刷新请求获取需要刷新的部分页面模块标识。

对应于上述方法实施例，如图4所示，为本发明实施例一种局部刷新页面模块的服务器结构示意图，所述服务器包括：

接收单元41，用于接收客户端发送的页面刷新请求；

解析单元42，用于解析所述页面刷新请求获取需要刷新的部分页面模块标识；

渲染单元43，用于根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

发送单元44，用于通过消息通道向客户端发送所述部分页面模块的渲染结果。

优选的，所述服务器还包括：判断单元45，在所述接收单元41接收客户端发送的页面刷新请求后，用于判断所述页面刷新请求的类型：如果页面刷新请求的类型是页面刷新类型，则所述渲染单元43具体用于渲染整个页面内的所有页面模块，将渲染结果合并至页面框架中，最后所述发送单元44将渲染结果按页面的方式返回给客户端；如果页面刷新请求的类型是页面模块刷新类型，然后所述解析单元42才解析所述页面刷新请求获取需要刷新的部分页面模块标识。

上述技术方案具有如下有益效果：1.实现局部页面模块刷新，由于不需要额外渲染其它页面模块，能大大提升刷新的响应时间，以节省服务器端的运算开销。2.由于页面模块的刷新与整个页面的页面地址进行了统一，大大减少了前后端的开发成本，提升了研发效率。3.刷新功能实现更加简单，前后端都做到了标准统一，在增加新的刷新功能时，只需要在刷新的页面地址上指明需要刷新的页面模块名称，即可完成相应的功能开发。

以下结合应用实例对本发明实施例上述技术方案进行详细说明：本发明应用实例提供了一种局部刷新页面模块的系统，所述系统包括上述局部刷新页面模块的客户端和上述局部刷新页面模块的服务器。本发明应用实例的目的在实现页面模块局部刷新的同时并不额外增加研发成本，详细实现方案如下：

1.方案整体交互

如图5所示，为本发明应用实例整体交互式意图，为了实现页面上模块的局部页面模块刷新，当客户端浏览器需要刷新部分页面模块时，通过消息通道将需要刷新的部分页面模块标识发送至服务器端，服务器端接收到请求，将需要刷新的部分页面模块计算并渲染完成，再通过消息通道将渲染结果返回给客户端浏览器，最后将返回的渲染结果更新至对应的页面模块。

2.消息通道原理

如图6所示，为本发明应用实例消息通道原理示意图，消息通道主要是通过iframe(超文本标记语言HTML标签)的机制来实现，具体包括：

601、当页面需要与服务端进行通信时，即前端javascript(脚本语言)脚本通信的事件被触发时，会在页面中创建一个隐藏的iframe对象。然后改变该对象的src(此处src为iframe中的属性，即iframe中显示的文档的统一资源定位符URL)地址，该地址可以理解为服务端提供的一个web页面，用于前后端消息通信，iframe对象加载新地址。

602、iframe加载全新src，发送服务器端。

603、服务器端接收到iframe的加载请求后，执行相关运算逻辑。然后返回运算结果，结果返回时会以一种前端CALLBACK(回调)的调用方式返回，返回数据会放到CALLBACK函数的参数中，CALLBACK函数为前端页面中的javascript脚本函数。

604、一旦iframe加载完成，返回结果中的CALLBACK函数调用就会被触发。基于当前页面对象而言，iframe加载的页面对象只是一个子对象，需要更新父页面数据，这里的CALLBACK为父对象的数据更新方法。

3.页面结构

为了便于对页面指定模块进行局部刷新处理，需对页面结构进行调整，将页面按功能区域划分成不同的模块。

如图7所示，为本发明应用实例将页面按功能划分成不同的页面模块示意图，如：A、B、C、D、E、F共6个页面模块。每一个页面模块在前端页面都会有一个与之对应的唯一容器，需要更新一个页面模块的内容时，通过前端javascript脚本将服务器端返回的内容更新至与之对应的容器。

4.服务器端处理

为了让页面请求和通道请求共用一个地址，参数不一样，除了前端需要对页面按功能进行模块划分以外，服务器端也需要对相关业务逻辑按功能进行划分，划分方式与前端保持一致，这样就可以保证同一接口可以响应不同方式的请求。

如图8所示，为本发明应用实例服务器端处理流程示意图，包括：

801、接收客户端发送的页面刷新请求；

802、判断所述页面刷新请求的类型：如果页面刷新请求的类型是页面刷新类型，转803；如果页面刷新请求的类型是页面模块刷新类型，然后转804；

803、渲染整个页面内的所有页面模块，将渲染结果合并至页面框架中，并将渲染结果按页面的方式返回给客户端，流程结束。

804、解析所述页面刷新请求获取需要刷新的部分页面模块标识；

805、根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

806、通过消息通道向客户端发送所述部分页面模块的渲染结果，流程结束。

如图9所示，为本发明应用实例客户端与服务器端整体交互流程示意图，包括：

901、用户通过前端页面刷新按钮点击刷新操作，触发页面模块刷新操作；

902、刷新事件通过消息通道将本次需要刷新的模块名称传递至服务器端；

903、服务器端接收至请求后，对指定的页面模块进行运算并渲染；

904、渲染完成后再通过消息通道将渲染结果返回给前端客户端浏览器；

905、消息通道加载完成后，前端页面将渲染后的模块内容更新至父页面与之对应的模块容器中。

现有技术目前需要实现页面状态或者数据的变更主要有两种方案，一种为整个页面都进行刷新，这种方案的优化是开发简单，缺点是刷新体验不好，服务器端运算开销大，别一种方案为采用AJAX的局部刷新方案，虽然该方案解决了刷新体验以及运算开销大的问题，但会为此额外增加研发成本，开发用于刷新的AJAX接口。本发明应用实例主要是提供一种全新的刷新解决方案，结合目前方案的优点，摒弃相应缺点，优点如下：1.实现局部页面模块刷新，由于不需要额外渲染其它页面模块，能大大提升刷新的响应时间，以节省服务器端的运算开销。2.由于页面模块的刷新与整个页面的页面地址进行了统一，大大减少了前后端的开发成本，提升了研发效率。3.刷新功能实现更加简单，前后端都做到了标准统一，在增加新的刷新功能时，只需要在刷新的页面地址上指明需要刷新的页面模块名称，即可完成相应的功能开发。

本领域技术人员还可以了解到本发明实施例列出的各种说明性逻辑块(illustrativelogical block)，单元，和步骤可以通过电子硬件、电脑软件，或两者的结合进行实现。为清楚展示硬件和软件的可替换性(interchangeability)，上述的各种说明性部件(illustrativecomponents)，单元和步骤已经通用地描述了它们的功能。这样的功能是通过硬件还是软件来实现取决于特定的应用和整个系统的设计要求。本领域技术人员可以对于每种特定的应用，可以使用各种方法实现所述的功能，但这种实现不应被理解为超出本发明实施例保护的范围。

本发明实施例中所描述的各种说明性的逻辑块，或单元都可以通过通用处理器，数字信号处理器，专用集成电路(ASIC)，现场可编程门阵列或其它可编程逻辑装置，离散门或晶体管逻辑，离散硬件部件，或上述任何组合的设计来实现或操作所描述的功能。通用处理器可以为微处理器，可选地，该通用处理器也可以为任何传统的处理器、控制器、微控制器或状态机。处理器也可以通过计算装置的组合来实现，例如数字信号处理器和微处理器，多个微处理器，一个或多个微处理器联合一个数字信号处理器核，或任何其它类似的配置来实现。

本发明实施例中所描述的方法或算法的步骤可以直接嵌入硬件、处理器执行的软件模块、或者这两者的结合。软件模块可以存储于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动磁盘、CD-ROM或本领域中其它任意形式的存储媒介中。示例性地，存储媒介可以与处理器连接，以使得处理器可以从存储媒介中读取信息，并可以向存储媒介存写信息。可选地，存储媒介还可以集成到处理器中。处理器和存储媒介可以设置于ASIC中，ASIC可以设置于用户终端中。可选地，处理器和存储媒介也可以设置于用户终端中的不同的部件中。

在一个或多个示例性的设计中，本发明实施例所描述的上述功能可以在硬件、软件、固件或这三者的任意组合来实现。如果在软件中实现，这些功能可以存储与电脑可读的媒介上，或以一个或多个指令或代码形式传输于电脑可读的媒介上。电脑可读媒介包括电脑存储媒介和便于使得让电脑程序从一个地方转移到其它地方的通信媒介。存储媒介可以是任何通用或特殊电脑可以接入访问的可用媒体。例如，这样的电脑可读媒体可以包括但不限于RAM、ROM、EEPROM、CD-ROM或其它光盘存储、磁盘存储或其它磁性存储装置，或其它任何可以用于承载或存储以指令或数据结构和其它可被通用或特殊电脑、或通用或特殊处理器读取形式的程序代码的媒介。此外，任何连接都可以被适当地定义为电脑可读媒介，例如，如果软件是从一个网站站点、服务器或其它远程资源通过一个同轴电缆、光纤电缆、双绞线、数字用户线(DSL)或以例如红外、无线和微波等无线方式传输的也被包含在所定义的电脑可读媒介中。所述的碟片(disk)和磁盘(disc)包括压缩磁盘、镭射盘、光盘、DVD、软盘和蓝光光盘，磁盘通常以磁性复制数据，而碟片通常以激光进行光学复制数据。上述的组合也可以包含在电脑可读媒介中。

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

Claims (10)

1.一种局部刷新页面模块的方法，其特征在于，应用于客户端，所述方法包括：

当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

2.如权利要求1所述局部刷新页面模块的方法，其特征在于，当浏览器需要刷新部分页面模块之前，所述方法还包括：

将浏览器上的页面按照功能划分为不同的页面模块。

3.如权利要求1所述局部刷新页面模块的方法，其特征在于，所述当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端，包括：

当浏览器需要刷新部分页面模块时，通过基于超文本标记语言HTML标签iframe的消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端。

4.一种局部刷新页面模块的客户端，其特征在于，所述客户端包括：

页面模块标识发送单元，用于当浏览器需要刷新部分页面模块时，通过消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端；

渲染结果接收单元，用于通过消息通道接收所述服务器端反馈的所述部分页面模块的渲染结果；

部分页面模块更新单元，用于利用所述部分页面模块的渲染结果更新所述浏览器上对应的所述部分页面模块。

5.如权利要求4所述局部刷新页面模块的客户端，其特征在于，所述客户端还包括：

页面模块划分单元，用于将浏览器上的页面按照功能划分为不同的页面模块；

所述页面模块标识发送单元，具体用于当浏览器需要刷新部分页面模块时，通过基于HTML标签iframe的消息通道利用页面刷新请求将需要刷新的部分页面模块标识发送至服务器端。

6.一种局部刷新页面模块的方法，其特征在于，应用于服务器端，所述方法包括：

接收客户端发送的页面刷新请求；

解析所述页面刷新请求获取需要刷新的部分页面模块标识；

根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

通过消息通道向客户端发送所述部分页面模块的渲染结果。

7.如权利要求6所述局部刷新页面模块的方法，其特征在于，所述接收客户端发送的页面刷新请求后，所述方法还包括：

判断所述页面刷新请求的类型：

如果页面刷新请求的类型是页面刷新类型，渲染整个页面内的所有页面模块，将渲染结果合并至页面框架中，并将渲染结果按页面的方式返回给客户端；

如果页面刷新请求的类型是页面模块刷新类型，解析所述页面刷新请求获取需要刷新的部分页面模块标识。

8.一种局部刷新页面模块的服务器，其特征在于，所述服务器包括：

接收单元，用于接收客户端发送的页面刷新请求；

解析单元，用于解析所述页面刷新请求获取需要刷新的部分页面模块标识；

渲染单元，用于根据需要刷新的部分页面模块标识，渲染对应的所述部分页面模块，获取渲染结果；

发送单元，用于通过消息通道向客户端发送所述部分页面模块的渲染结果。

9.如权利要求8所述局部刷新页面模块的服务器，其特征在于，所述服务器还包括：

判断单元，在所述接收单元接收客户端发送的页面刷新请求后，用于判断所述页面刷新请求的类型：

如果页面刷新请求的类型是页面刷新类型，则所述渲染单元具体用于渲染整个页面内的所有页面模块，将渲染结果合并至页面框架中，最后所述发送单元将渲染结果按页面的方式返回给客户端；

如果页面刷新请求的类型是页面模块刷新类型，然后所述解析单元才解析所述页面刷新请求获取需要刷新的部分页面模块标识。

10.一种局部刷新页面模块的系统，其特征在于，所述系统包括权利要求2-3中任一项所述局部刷新页面模块的客户端和权利要求8-9中任一项所述局部刷新页面模块的服务器。