CN102637201A

CN102637201A - 基于异步数据传输的网页加载方法

Info

Publication number: CN102637201A
Application number: CN2012100655818A
Authority: CN
Inventors: 梁超; 沈旦
Original assignee: NANJING XINYULI CULTURE SPREAD CO Ltd
Current assignee: NANJING XINYULI CULTURE SPREAD CO Ltd
Priority date: 2012-03-14
Filing date: 2012-03-14
Publication date: 2012-08-15

Abstract

本发明公开了一种基于异步数据传输的网页加载方法，包括如下步骤：a)初始化页面时，装载多个预定页面的记录，设置记录的开始位置和结束位置，根据装载的记录数计算滚动条的粒度并设置滚动条的当前位置；b)当滚动条向上滚动超出开始位置时，往前装载多个预定页面的记录；c)当滚动条向下滚动超出结束位置时，往后装载多个预定页面的记录；每次加载页面后更新开始位置、结束位置和滚动条的当前位置。本发明提供的基于异步数据传输的网页加载方法，每次装载多个预定页面的记录，只要显示区域底部不超过结束位置和开始位置，不发送任何列表搜索请求，从而避免多次请求后叠加数据变大引起的页面加载缓慢甚至没有响应的情况。

Description

基于异步数据传输的网页加载方法

技术领域

本发明涉及一种网页加载方法，尤其涉及一种基于异步数据传输的网页加载方法。

背景技术

目前技术实现页面加载过多数据时一般都采用分页技术，即每页都只展示部分数据。如果单页展示过多数据就会造成页面加载缓慢甚至没有响应的情况。AJAX，即“Asynchronous JavaScript and XML”(异步JavaScript和XML)，由Jesse JamesGaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术，通过AJAX，JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信，从而可在不重载页面的情况与Web服务器交换数据。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求)，这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX可使因特网应用程序更小、更快，更友好。虽然AJAX能部分解决单页数据量一次加载过大的问题，但无法解决多次请求后，叠加数据变大的问题。因此有必要提供基于异步数据传输的网页加载方法。

发明内容

本发明所要解决的技术问题是提供一种基于异步数据传输的网页加载方法，有效避免多次请求后叠加数据变大引起的页面加载缓慢甚至没有响应的情况。

本发明为解决上述技术问题而采用的技术方案是提供一种基于异步数据传输的网页加载方法，包括如下步骤：a)初始化页面时，装载多个预定页面的记录，设置记录的开始位置和结束位置，根据装载的记录数计算滚动条的粒度并设置滚动条的当前位置；b)当滚动条向上滚动且当前位置超出开始位置时，从当前位置指向的记录开始，往前装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置；c)当滚动条向下滚动且当前位置超出结束位置时，从当前位置指向的记录开始，往后装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置。

上述的基于异步数据传输的网页加载方法，其中，所述步骤a)中，如果有当前显示列表中的记录被更新，则将该记录位置与记录列表的第一个记录的位置相交换；如果有非当前列表中的记录被更新或创建，则将新记录创建至列表的开头，并删除最后一个记录。

上述的基于异步数据传输的网页加载方法，其中，所述预定页面的个数为3。

本发明对比现有技术有如下的有益效果：本发明提供的基于异步数据传输的网页加载方法，每次装载多个预定页面的记录，只要显示区域底部不超过结束位置和开始位置，不发送任何列表搜索请求，从而避免多次请求后叠加数据变大引起的页面加载缓慢甚至没有响应的情况。

附图说明

图1为本发明基于异步数据传输的网页加载方法流程示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的描述。

图1为本发明基于异步数据传输的网页加载方法流程示意图。

请参见图1，下面详细说明本发明基于异步数据传输的网页加载实施过程：

步骤S101：初始化页面时，装载多个预定页面的记录，设置记录的开始位置和结束位置，根据装载的记录数计算滚动条的粒度并设置滚动条的当前位置。如果有当前显示列表中的记录被更新，则将该记录位置与记录列表的第一个记录的位置相交换；如果有非当前列表中的记录被更新或创建，则将新记录创建至列表的开头，并删除最后一个记录。

步骤S102：当滚动条向上滚动且当前位置超出开始位置时，从当前位置指向的记录开始，往前装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置。

步骤S103：从当前位置指向的记录开始，往后装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置。

例如，以3个预定页面(pageSize)，每个页面显示5条记录为例，开始位置startPos＝1，滚动条的当前位置currentPos＝1，结束位置endPos＝15，

在初始状态下，无论滚动条如何滚动，只要显示区域底部不超过结束位置和开始位置，则列表不发送任何搜索请求。startPos＝1，currentPos＝滚动条位置，endPos＝15。滚动条如果在顶部则无法再被拖动。因为默认的情况下，所有创建/更新都会及时更新，不会存在最新的没有显示的情况。

当可视区域到达初始化列表的底部，此时，如果点击向下的箭头，前端向后端发送offset＝currentPos-PageSize，length＝pageSize*3的请求，此时得到从7到21共15个wave。前端接受到15个新wave后，将当前wave列表中的wave清空，将新的15个wave加入此列表中。并且设置currentPos＝currentPos+1，endPos＝endPos+1，startPos＝currentPos-pageSize。前端获取后端返回的总共记录的数量，重新计算滚动条粒度。此时更新记录时，同样的，后台将更新信息传给前端，但前端仅仅更新相应的记录，并不创建记录或者跳转记录的位置。如果有新的记录创建的信息也暂不提示。

当用户点击向下的滚动条非滚动按钮区域或者拖动滚动条时，如果currentPos+pageSize＞endPos，那么需要向后台发起获取数据的请求，此时，offset＝currentPos-pageSize，length＝pageSize*3。当滚动条向上滚动时，机制一样。当currentPos＜＝pageSize时，此时向上滚动startPos＝1，页面回复初始化状态的页面，所有更新需要进行跳转。

综上所述，本发明提供的基于异步数据传输的网页加载方法，每次装载多个预定页面的记录，只要显示区域底部不超过结束位置和开始位置，不发送任何列表搜索请求，从而避免多次请求后叠加数据变大引起的页面加载缓慢甚至没有响应的情况。

虽然本发明已以较佳实施例揭示如上，然其并非用以限定本发明，任何本领域技术人员，在不脱离本发明的精神和范围内，当可作些许的修改和完善，因此本发明的保护范围当以权利要求书所界定的为准。

Claims

1.一种基于异步数据传输的网页加载方法，其特征在于，包括如下步骤：

a)初始化页面时，装载多个预定页面的记录，设置记录的开始位置和结束位置，根据装载的记录数计算滚动条的粒度并设置滚动条的当前位置；

b)当滚动条向上滚动且当前位置超出开始位置时，从当前位置指向的记录开始，往前装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置；

c)当滚动条向下滚动且当前位置超出结束位置时，从当前位置指向的记录开始，往后装载多个预定页面的记录，更新记录的开始位置和结束位置，根据装载的记录数重新计算滚动条的粒度并更新滚动条的当前位置。

2.如权利要求1所述的基于异步数据传输的网页加载方法，其特征在于，所述步骤a)中，如果有当前显示列表中的记录被更新，则将该记录位置与记录列表的第一个记录的位置相交换；如果有非当前列表中的记录被更新或创建，则将新记录创建至列表的开头，并删除最后一个记录。

3.如权利要求1或2所述的基于异步数据传输的网页加载方法，其特征在于，所述预定页面的个数为3。