CN102411585A - 一种网页分页数据预加载方法和系统 - Google Patents

Abstract

本发明公开了一种网页分页数据预加载的方法和系统，本发明方法主要包括：客户端模块请求访问第1页数据，服务端模块响应请求后查询本地数据库单元，返回第1页的分页内容；客户端模块接收返回的数据；客户端模块自动请求连接服务端模块，获取2-n+1页的分页数据；客户端模块接收第2～n+1页的分页数据；前访问页iPage小于或等于Pmax-1时，客户端模块访问本地数据存储单元中对应页码的数据；当前访问页iPage大于或等于Pmax时，客户端模块发送请求，加载包含第iPage页的n长度页码区间分页数据；所述页码区间的最后一页码减1后为n倍数。通过本发明方法，减少了客户端和服务器的交互，节约了网络资源。

Description

一种网页分页数据预加载方法和系统

技术领域

本发明涉及互联网传输技术领域，特别是涉及一种网页分页数据预加载方法和系统。

背景技术

随着互联网通信的发展，B/S(Browser/Server，浏览览器/服务器)结构相对于C/S(Cient/Server，客户端/服务器)结构的优越性越来越突出。基于B/S结构开发的业务越来越多，涉及应用范围也越来越广泛。

WEB应用是B/S结构的重要实现方式，通过WEB技术研发的应用系统存在着一个并发访问的问题。用户只要能连接网络，便可通过浏览器在任何地点都可以访问服务器，因此用户并发访问同一个服务器的数目有可能会很大，大量的用户并发访问会给服务器带来很大处理压力，经常会出现服务器资源不够用的情况，如CPU被占据100％、内存溢出、网络连接资源不够等。因此能在不影响客户端操作的情况下尽量减少与服务端模块的交互是目前web技术发展的一大趋势。

近年来，RIA(Rich Internet Application，互联网应用程序)开发模式的兴起使得互联网用户对网络交互感受提出了更高的要求，传统的技术已经无法满足RIA开发的需要，而AJAX(Asynchronous JavaScript ansd XML，异步JavaScript和XML，简称AJAX，是指一种穿件交互式网页应用的开发技术)开始成为主流的RIA开发模式。AJAX是一个结合了DHTML(Dynamic HTML，动态超文本标记语言)技术、XML(eXtensible Markup Language，可扩展标记语言)以及JavaScript的编程技术，是将几项技术按一定的方式组合在一起在共同的协作中发挥各自的作用。AJAX是使用客户端脚本与网页服务器交换数据的网页应用开发技术。这样，网页不用打断交互流程进行重新加载，就可以动态地更新。

在实际的开发中，由于用户要访问的数据记录较多，界面很难完全显示时，通常采用分页显示的方式将查询的结果分为多页进行显示，而对于某些处理型的网页而言，操作用户几乎要遍历所有的记录来进行操作，此时传统的网页分页形式将使得用户处理完一个分页数据时还需连接服务器获取下一个分页的内容，过多的交互将影响服务器的性能。

发明内容

本发明要解决的技术问题在于，针对现有网页分页技术交互效率低、用户感受差等不足，提供一种网页分页数据的预加载方法和系统。

本发明公开的一种网页分页数据预加载的方法，包括：

客户端模块请求访问服务端模块第1页数据，服务端模块响应请求后查询本地数据库单元，返回第1页的分页内容至客户端；

客户端模块接收服务端模块返回的数据，并在本地存储；

客户端模块自动请求连接服务端模块，获取2-n+1页的分页数据；所述n为大于1的自然数；

客户端模块接收第2～n+1页的分页数据，存于数据存储单元中；

当前访问页iPage小于或等于Pmax-1时，客户端模块访问本地数据存储单元中对应页码的数据，并于加以显示；

当前访问页iPage等于Pmax，客户端模块显示当前页的分页内容，并向服务端模块发送自动请求，获取Pmax后n页的分页内容；

当前访问页iPage大于Pmax时，客户端模块向服务端模块发送请求，加载包含第iPage页的n长度页码区间分页数据；所述页码区间的最后一页码减1后为所述n的倍数。

优选地，所述分页数据的每一页的文本按UniCode格式进行编码。

优选地，所述客户端模块自动请求连接服务端模块时，采用Ajax页面无刷新机制的技术进行与服务端模块进行交互。

优选地，所述n可以在所述客户端模块预先设置。

本发明公开的一种网页分页数据预加载的系统，包括服务端模块和客户端模块；

所述服务端模块包括网络服务单元、数据库单元、分页设置响应单元、分页数据输出单元；

所述网络服务单元，与所述分页设置响应单元、分页数据输出单元和所述数据库单元相连，为在网络环境下运行的、面向服务的、基于分布式程序的软件模块，采用HTTP和XML等互联网通用标准，用于通过不同的终端设备访问WEB上的数据；

所述数据库单元，按照数据结构组织，用于存储和管理数据；

所述分页设置响应单元，与所述数据库单元相连，用于响应客户端模块的分页数据的请求，引导分页数据从所述分页数据输出单元输出；

所述分页数据输出单元，与分页设置响应单元相连，用户根据分页设置响应单元的分页指令，判断客户端模块请求连接数据库读取分页数据，并按照约定格式通过分页设置响应单元输出；

所述客户端模块包括分页设置单元、数据存储单元、数据加载单元、数据展示单元；其中：

所述分页设置单元，用于设置每次预加载的数据分页数；

所述数据存储单元，用于对所述客户端模块创建的动态数组进行分页数据的本地化存储；

所述数据加载单元，与数据存储单元相连，主要用于根据所述分页设置单元设置的页数，从所述服务端模块获取多个分页数据，存储于所述数据存储单元；并从所述数据存储单元加载数据，从数据展示单元进行展示；

所述数据展示单元，与所述数据加载单元相连，用于将分页数据显示在用户查看界面上。

本方案是通过客户端的后台算法控制，预先自动连接服务端模块，一次性加载多个分页数据，将分页数据的内容保存进数据存储单元，需要显示该分页数据时则读取数据存储单元中的内容，通过数据加载单元调用innerHTML方法将分页数据内容赋予数据展示单元进行显示，速度快、效率高。

附图说明

图1为本发明一种网页分页数据预加载的系统结构示意图。

图2为本发明一种网页分页数据预加载的方法流程图。

具体实施方式

如图1所示，本发明第一个实施例提供了一种网页分页数据预加载的系统。系统主要由两部分组成：服务端模块和客户端模块。

其中，服务端模块包括网络服务单元、数据库单元、分页设置响应单元、分页数据输出单元等四个单元。

网络服务单元，为在网络环境下运行的、面向服务的、基于分布式程序的软件模块，采用HTTP和XML等互联网通用标准，使得人们可以在不同的地方通过不同的终端设备访问WEB上的数据。

数据库单元，为按照数据结构来组织、存储和管理数据的仓库。可以为网络数据存储数据库，如sqlserver、mysql数据库等。

分页设置响应单元，响应客户端模块中的分页设置单元的分页设置和分页数据的请求，引导分页数据的输出。

分页数据输出单元，与分页设置响应单元相连，根据分页设置响应单元的分页指令，判断客户端模块请求连接数据库读取分页数据，并按照约定格式通过分页设置响应单元输出，在此分页数据将被按Unicode格式(Unicode为每个字符提供了唯一的特定数值，无论任何平台和任何语言)进行编码，以解决客户端接收分页数据时某些特殊字符可能会产生异常的问题。

客户端模块包括分页设置单元、数据存储单元、数据加载单元、数据展示单元等四个单元。其中：

分页设置单元，用于设置每次预加载的数据分页数。如可以根据服务器、数据库性能和网络状态进行设置，服务端模块会根据该单元设置的页数，输出分页数据。

数据存储单元，用于对客户端模块创建的动态数组进行分页数据的本地化存储(如：动态数组szPageData[n]表示储存第n页的分页内容)，对于纯文本格式的分页内容存储和读取。

数据加载单元，与数据存储单元相连，主要用于根据分页设置单元设置的页数，从服务端模块获取多个分页数据，存储于数据存储单元；并从数据存储单元加载数据，从数据展示单元进行展示。

数据加载单元与其他单元的主要工作过程为：第一步，数据加载单元连接服务端模块发送分页的请求；第二步，接收服务端模块返回的Unicode格式的分页数据内容，解码后将分页数据写进数据存储单元中；第三步，数据加载单元读取数据存储单元的分页数据，通过数据展示单元进行显示。

数据展示单元，将分页数据显示在用户查看界面上。显示的信息包括分页内容和页码的信息，用户可以浏览当前页数据也可以访问其他页数据。本单元可以通过DIV标签(DIV元素是用来为HTML文档内大块Block-Level的内容提供结构和背景的元素，其起始标签和结束标签之间的所有内容都是用来构成这个块的)来进行数据的展示。

另外，客户端模块和服务端模块可通过互联网通道相连，客户端端模块的各个功能可通过一般计算机终端的IE等多种浏览器软件运行实现。服务端模块一般运行于提供各种网络服务的服务器，其各模块的功能一般在服务器上运行实现。

在上述描述中，数据是指用户所要浏览的分页内容。

通过本实施例的描述，本发明方案，在现有技术框架的基础上增加了客户端的分页设置单元和数据存储单元，实现对用户关心的网页分页数据的预先加载和动态存储，使得网页的加载由后台自动实现，减少客户端与服务端的交互，同时增强用户的界面操作性。

本发明的另一个实施例公开了一种网页分页数据预加载的方法，如图2所示。主要包括如下步骤：

步骤1：客户端模块请求访问服务端模块第1页数据，服务端模块响应请求后查询本地数据库单元，返回第1页的分页内容至客户端。

本步骤中，客户端模块请求访问第1个页面数据，服务端网络服务单元响应请求后连接数据库单元，生成第1页的分页内容，将之按Unicode格式进行编码，通过分页数据输出单元返回至客户端。这里，首次请求时只生成第一页内容，以便提高反馈速度。

用户可以根据实际情况，在客户端模块预先设置每次请求加载的页数n。本发明预先加载的分页数据内容为文本格式，存储于JavaScript动态数组中，利用客户端的Div标签的innerHTML方法来显示分页的数据内容。JavaScript动态数组存储于客户端的内存之中，具有极快的存取效率。

为了更方便描述各个步骤，我们定义两个概念：Pmax，客户端当前缓存最大页数，表示当前客户端模块存储的页面的个数。iPage表示用户当前请求访问的页面序号。

步骤2：客户端模块接收服务端模块返回的数据，并在本地存储。

本步骤中，客户端数据加载单元接收服务端返回的第1页的数据内容，将之解码后保存进数据存储单元的动态数组szPageData中(szPageData[1]用来保存第一页的内容，szPageData[2]用来保存第二页的内容，以此类推)，并可进行数据展示，当前页码为Pmax＝1。

步骤3：客户端模块自动请求连接服务端模块，获取2-n+1页的分页数据。

本步骤中，客户端展示第1页的数据内容后，自动请求连接服务端网络服务单元，请求第2-n+1页的分页内容(此时分页设置单元每次连接预先加载的页数为n)，返回至客户端；n为大于1的自然数。

这里的n，为在分页设置单元设置的数字，可有客户端使用者根据需要自行设定。

步骤4：客户端模块接收第2～n+1页的分页数据，存于数据存储单元中。

本步骤中，客户端模块将服务端模块返回的第2-n+1页的分页数据内容解码后，存储于数据存储单元动态数组中；Pmax＝n+1。

步骤5：客户端模块执行对当前展示页数据的操作。如：审批、复核、解答、反馈等的处理操作。

通过客户端模块访问页面，主要存在着如下三种情况：

第一种情况：当前访问页iPage小于或等于Pmax-1时，客户端模块访问本地数据存储单元中对应页码的数据，并于加以显示。

这种情况下，当客户端通过数据展示单元访问第iPage＝1-Pmax-1中任意一页，即iPage小于或等于Pmax-1，如第Pmax-2页时，访问数据存储单元动态数组中对应页码的分页数据内容，通过数据展示单元，显示该页码的分页数据内容，当前页码iPage＝Pmax-2；

第二种情况：当前访问页iPage等于Pmax，客户端模块显示当前页的分页内容，并向服务端模块发送自动请求，获取Pmax后n页的分页内容。

这种情况下，当客户端通过数据展示单元访问第Pmax页时，通过数据展示单元显示该页码的分页数据内容，并连接服务端模块发送自动请求，获取第Pmax+1-Pmax+n页的分页数据，返回至客户端保存于数据存储单元中，当前页码iPage＝Pmax；

第三种情况：当前访问页iPage大于Pmax时，客户端模块向服务端模块发送请求，加载包含第iPage页的n长度页码区间分页数据。这里，页码区间的最后一页码减1后为n倍数。

比如，当客户端通过数据展示单元访问大于第Pmax页的分页数据，时，如访问第Pmax+n-1页，假设此时n＞2。那么将连接服务端模块发送触发请求，加载第Pmax+1-Pmax+n页的分页数据，返回至客户端，当前页码iPage＝Pmax+n-1。比如，假设n为5，首页加载时只取页1，然后自动加载2、3、4、5、6，这个时候用户如果点击访问的是第8页时，那么加载的为第7、8、9、10、11页。

而当访问很大的页码，比如第30页时，客户端缓存的页数远远不够，自动加载页数5也远远不够时，则自动加载第30页所在的页码区间，因为第一页后，每次都只自动加载n＝5页，所以该页码区间的最后一页页码减去1，则为n＝5的倍数，该页码区间为【27，28，29，30，31】。在n＝5的情况下，每个页码区间分别为：【1】、【2，3，4，5，6】、【7，8，9，10，11】、【12，13，14，15，16】、【17，18，19，20，21】、【22，23，24，25，26】、【27，28，29，30，31】。

较佳的，所述的步骤3服务端模块查询数据库生成多页的分页数据时可以将每一页的文本按UniCode格式进行编码(也可采用UTF-8等编码格式)，以便客户端在解析过程中因为某些特殊的字符而产生异常；

较佳的，所述的步骤5可以采用Ajax页面无刷新机制的技术进行与服务端模块进行交互，这样既可以减轻对网络和服务器的负担，提高用户处理的效率，同时也无需打断用户处理数据的交互流程；

较佳的，所述的步骤3中，当客户端通过数据加载单元进行数据的分页请求时，页面将会创建一个XmlHttpRequest对象，向服务器发送参数，以及由该对象产生一个接收服务端传递过来的数据的XmlDoc对象，客户端数据加载单元通过Dom来解析XmlDoc对象并将结果存储进数据存储单元；

较佳的，当用户访问超过目前客户端数据存储单元中已经加载的页码时，客户端将连接服务端网络服务单元发送一个触发请求，此时数据展示单元可以显示诸如“正在加载数据，请等待...”等使得人机交互更加友好。

采用算法控制实现自动预先加载：当用户访问临界页时，自动加载后续多页数据，不影响用户在客户端执行浏览和处理其他分页数据，缩短用户等待数据连接服务器加载页面的时间，提高了用户处理的效率

与现有技术比较本发明的有益效果在于，通过预先加载的网页分页数据，一次性预先加载多页数据内容保存至客户端，通过客户端的JavaScript和Ajax技术来实现分页内容的显示和分页数据的后台加载，不仅能大大减少了客户端与服务端模块的交互次数，减轻了数据在传输过程给网络和服务器带来的负担，并且不影响用户在客户端执行浏览和处理其他分页数据，缩短用户等待数据连接服务器加载的时间，提高了用户处理的效率。

使用本方法的系统，通过预先加载的多页的分页内容，不仅能大大减少了客户端与服务端模块的交互次数，减轻了数据在传输过程给网络和服务器带来的负担，并且不影响用户在客户端执行浏览和处理其他分页数据，缩短用户等待数据连接服务器加载的时间，提高了用户处理的效率。

上述实施例仅用来进一步说明本发明的一种网页分页数据预加载的方法及其装置，但本发明并不局限于实施例，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均落入本发明技术方案的保护范围内。

Claims (5)

1.一种网页分页数据预加载的方法，其特征在于，包括：

客户端模块请求访问服务端模块第1页数据，服务端模块响应请求后查询本地数据库单元，返回第1页的分页内容至客户端；

客户端模块接收服务端模块返回的数据，并在本地存储；

客户端模块自动请求连接服务端模块，获取2-n+1页的分页数据；所述n为大于1的自然数；

客户端模块接收第2～n+1页的分页数据，存于数据存储单元中；

当前访问页iPage小于或等于Pmax-1时，客户端模块访问本地数据存储单元中对应页码的数据，并于加以显示；

当前访问页iPage等于Pmax，客户端模块显示当前页的分页内容，并向服务端模块发送自动请求，获取Pmax后n页的分页内容；

当前访问页iPage大于Pmax时，客户端模块向服务端模块发送请求，加载包含第iPage页的n长度页码区间分页数据；所述页码区间的最后一页码减1后为所述n的倍数。

2.根据权利要求1所述的一种网页分页数据预加载的方法，其特征在于：

所述分页数据的每一页的文本按UniCode格式进行编码。

3.根据权利要求1所述的一种网页分页数据预加载的方法，其特征在于：

所述客户端模块自动请求连接服务端模块时，采用Ajax页面无刷新机制的技术进行与服务端模块进行交互。

4.根据权利要求1所述的一种网页分页数据预加载的方法，其特征在于：

所述n可以在所述客户端模块预先设置。

5.一种网页分页数据预加载的系统，其特征在于，包括服务端模块和客户端模块；

所述服务端模块包括网络服务单元、数据库单元、分页设置响应单元、分页数据输出单元；

所述网络服务单元，与所述分页设置响应单元、分页数据输出单元和所述数据库单元相连，为在网络环境下运行的、面向服务的、基于分布式程序的软件模块，采用HTTP和XML等互联网通用标准，用于通过不同的终端设备访问WEB上的数据；

所述数据库单元，按照数据结构组织，用于存储和管理数据；

所述分页设置响应单元，与所述数据库单元相连，用于响应客户端模块的分页数据的请求，引导分页数据从所述分页数据输出单元输出；

所述分页数据输出单元，与分页设置响应单元相连，用户根据分页设置响应单元的分页指令，判断客户端模块请求连接数据库读取分页数据，并按照约定格式通过分页设置响应单元输出；

所述客户端模块包括分页设置单元、数据存储单元、数据加载单元、数据展示单元；其中：

所述分页设置单元，用于设置每次预加载的数据分页数；

所述数据存储单元，用于对所述客户端模块创建的动态数组进行分页数据的本地化存储；

所述数据加载单元，与数据存储单元相连，主要用于根据所述分页设置单元设置的页数，从所述服务端模块获取多个分页数据，存储于所述数据存储单元；并从所述数据存储单元加载数据，从数据展示单元进行展示；

所述数据展示单元，与所述数据加载单元相连，用于将分页数据显示在用户查看界面上。

Images