CN102325191B - 一种全自动的页面无刷新处理方法及框架 - Google Patents

Abstract

本发明采用ajax技术，提供了一种全自动页面无刷新的处理方法和框架：通过编写统一、规范的页面刷新框架JavaScript基础文件，客户端访问Web页面时加载此JavaScript基础文件，自动获取Web页面的所有请求，转换为ajax方式，并自动智能处理请求后的数据，接管页面处理逻辑，全自动的完成将一个web页面从传统访问方式转换到页面无刷新的方式。开发团队只需专注于业务开发，无需考虑页面刷新的相关问题，既实现了页面的无刷新转换，降低了页面刷新的次数，提高了信息显示的实时性，从而提高了整个电子商务平台的处理效率，又有利于提升开发人员的开发效率，减小了重复开发工作，降低了开发成本和代码维护成本。

Description

一种全自动的页面无刷新处理方法及框架

技术领域

本发明涉及Web互联网领域，特别是涉及一种全自动页面无刷新处理方法及框架。

背景技术

在互联网行业快速发展的今天，web网站已经从过去信息共享、信息传递等简单应用，发展到如今丰富多彩的web应用，给人们的工作、生活带来便捷，成为人们工作、生活中不可或缺的一部分。Web网站也开始越来越重视优秀的用户体验，以及友好与用户交互的方式，富因特网应用的概念随之产生。

富因特网应用（Rich Internet Applications，RIA）是指在web网页中利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。

传统的web网页访问过程：浏览器发送一个http请求，服务器接收该请求并进行相应处理，处理完成后将处理结果返回给浏览器，浏览器再接收服务器的数据进行整个页面的渲染，完成一次网页的访问。这种做法很多情况下会浪费服务器性能和网络带宽资源，因为大多时候web请求只是完成少量的工作，无须对整个页面重新生成；例如在中国制造网的会员资料页面里，用户需要更新关注自己的用户数，服务器端接收到这个请求后，只需提供给一个用户数给浏览器即可；但传统的web网页访问必须重新生成渲染整个页面，包括会员资料页面的用户头像，交易记录等等，而不仅仅是更新一个用户数；这样做首先导致服务器的重复计算，浏览器的重复渲染，另外web应用的响应时间依赖于服务器的响应时间及客户端与服务端的网络传输时间，直接影响了用户界面的响应速度。

如今Web应用也越来越复杂，很多曾经只能通过本地应用程序才能完成的任务，现在都可以通过web应用完成。例如在线地图搜索导航、很多web应用已经提供功能类似word的强大在线编辑系统、更生动的web报表分析系统等等；这种web应用的发展，给web应用复杂性及交互性提出了更高的要求，人们怀恋本地应用程序上提供的丰富交互体验，而不是每点击鼠标一次都是一次页面的闪烁刷新。这正是富因特网应用的一个目标：让web应用的操作体验像本地应用那样丰富多彩而又高效、安全。

目前，为了实现web网页的无刷新体验，通常采用的技术是ajax技术。

ajax是JavaScript与xml技术结合产生一种异步处理请求技术，通过异步的方式在浏览器上发送一个请求到服务器去获取所需要的数据，然后在浏览器上局部更新数据，整个过程由于是异步的方式去执行，页面不会整体重复渲染，因此也就没有闪烁刷新的问题。例如google地图应用中通过鼠标拖拽在地图上游走时，就是通过这种ajax技术进行实时的获取需要的地图进行局部更新展现，而不会对整个地图重新渲染，用户体验上更不会每一次鼠标拖拽都刷新一次页面。因此，ajax在如今的web应用中得到了广泛的运用。

但是在大型电子商务平台的开发中，仅仅采用这种方法还是有很大不足；因为利用这种方法对一个web页面实现无刷新更新渲染时，通常都需要对web页面内的每个请求进行单独处理，而对于电子商务平台来说，很多交互性要求高的页面不会仅仅只有数个请求，而是有10多个甚至更多的请求需要处理，那么对于整个电子商务平台来说，这个开发工作量是相当大的，而且使开发工作极其繁琐，由此造成出现缺陷的概率也随之增加，开发成本及维护成本非常高。因此，亟需一种更有效率的方法来解决这些问题。

发明内容

本发明提供了一种全自动页面无刷新的处理方法和框架，正是解决这些问题的一个快捷高效的体系，将传统的web网页访问过程进行便捷的自动转换处理，实现页面指定区域更新渲染的可能，避免服务器的重复计算和浏览器没必要的重复渲染，同时让web应用的用户没有页面闪烁刷新的感官感受，带来的类似本地应用的友好用户体验。

本发明的技术方案如下：一种全自动页面无刷新处理框架，包括客户端和服务器端。

所述客户端用于向所述服务器端发送页面请求，经过服务器端响应后，所述客户端接收所述服务器端的处理结果，并重新渲染页面信息。

所述服务器端用于接收所述客户端发送的页面请求，根据请求进行相应的处理，例如在服务器端进行计算、进行程序的执行、对其他应用服务的调用、对数据库进行查询从而获取符合要求的数据等，并把处理结果发送给客户端。

所述客户端包括客户端发送单元、客户端接收单元、客户端获取请求单元、客户端转换单元、客户端页面渲染单元。

所述客户端发送单元，在客户端浏览器中进入到一个Web页面时，客户端自动获取此页面中所有请求后，向所述服务器端发送。

所述客户端接收单元，用于客户端接收所述服务器端的处理结果，并把最新的结果在客户端浏览器的指定区域渲染显示。

所述客户端获取请求单元，用于客户端自动获取Web页面中的所有请求。

所述客户端转换单元，用于对页面所有的请求进行自动转换，把客户端获取的各类请求转换为ajax请求。

所述客户端页面渲染单元，用于客户端接收到服务器端的处理结果后，对Web页面的指定区域进行更新，无刷新地显示最新的信息。

所述服务器端包括服务器端接收单元、服务器端处理单元以及服务器端发送单元。

所述服务器端接收单元，用于服务器端接收来自所述客户端发送的ajax请求。

所述服务器端处理单元，用于服务器端根据接收的所述客户端ajax请求，进行相应的处理，例如在服务器端进行计算、进行程序的执行、调用其他的应用服务、对数据库进行查询从而获取符合要求的数据等。

所述服务器端发送单元，用于所述服务器端响应所述客户端的ajax请求，把处理结果发送给所述客户端。

一种全自动页面无刷新的处理方法，包括：

在电子商务平台中，用户根据需要，进入到需要页面无刷新体验的Web页面，例如在保险B2B电子商务平台中，用户进入到“订单管理”页面。客户端浏览器将自动加载页面无刷新框架的JavaScript基础文件。

客户端浏览器加载此框架JavaScript基础文件后，将会自动获取本Web页面的所有请求，然后进行判断。

如果判断为普通请求，则直接转换为ajax方式，然后向服务器端发送。

如果判断为复杂请求，那么通过事件追加的方式，对web页面各种复杂情况下的请求进行深入转换；无论正常情况下的超链接式的GET请求，还是表单提交式的POST请求均会自动识别转换，转换成ajax方式，然后向服务器端发送。

服务器端接收到客户端发送的请求，进行相应的处理，包括在服务器端进行计算、进行程序的执行、调用其他应用服务、对数据库进行查询从而获取符合要求的数据等。

服务器端把处理好的结果发送给所述客户端。

客户端接收到处理好的结果，在指定区域进行信息更新。

如果客户端的请求不仅是Web页面数据的更新，而且涉及到Web页面的转换，那么服务器响应请求，并把客户端请求的新Web页面的信息发给客户端时，客户端会自动采用页面无刷新模式，把新的的Web页面信息在当前的页面内的指定区域进行更新，同时，客户端把的页面无刷新处理框架会自动将这个新Web页面内部的所有请求，转换为无刷新模式，保证了电子商务平台展示中页面无刷新的持续性、一致性。

综合上述，本发明能够对一个web页面进行全自动处理，在一个web页面中，引入本发明的《无刷新处理框架》后，就会自动获取Web页面中请求，并把这些请求转换为ajax方式，并能够自动智能处理请求后的数据，接管页面处理逻辑，全自动完成将一个web页面从传统访问方式到页面无刷新方式的转换。

本发明有益效果如下：

（1）本发明通过编写统一的页面无刷新框架JavaScript基础文件，客户端浏览器访问特定的Web页面时，将加载此JavaScript基础文件，客户端将会自动获取Web页面的所有请求，并转换为ajax方式，完成页面请求的统一处理，避免了传统开发中需要对web页面内的每个请求进行单独处理的方法，使开发人员更加专注于业务开发，提高了代码的质量和开发团队的效率，降低了开发成本和代码维护成本。

（2）通过事件追加的方式，对web页面各种情况下的请求进行深入转换。加载本发明中的页面无刷新框架JavaScript基础文件后，无论正常情况下的超链接式的GET请求，还是表单提交式的POST请求均会自动识别转换。特别是对于一些复杂的事件，例如点击某个超链接的时候触发一些交互行为，在这些交互行为中往往既包含一些本地浏览器上执行的行为，也包含需要请求服务器交互的行为。本发明方法会自动识别类似的绑定事件，通过事件追加的方式，保证一个元素上多个事件本来的执行顺序，同时自动对需要服务器的交互行为进行ajax转换。通过事件追加的方式，保证本发明能够精确获取复杂事件中的请求。

（3）本发明具有页面无刷新模式的“贪婪”状态的特点。一个web页面加载本发明的页面无刷新框架JavaScript基础文件后，Web页面中的所有请求都默认转变为无刷新模式，如果其中Web页面某个请求被点击，将要跳到的是另外一个Web页面时，这个请求被触发会把另外一个对应的Web页面的信息在当前的页面内的指定区域进行更新，而且同时，本发明的无刷新处理框架会自动将这个新Web页面内部的所有请求继续转换为无刷新模式，依次类推，这是一个无限递归的过程，实现了在一个web页面的多次操作后仍然处于页面无刷新模式，使Web页面进入无刷新状态时保持持续性、一致性、完整性，从而保证整个电子商务平台在访问时，降低了页面刷新的次数，提高了信息显示的实时性，从而提高了整个电子商务平台的处理效率。

（4）本发明重新实现浏览器的前进后退功能，实现了在ajax请求下仍能保持浏览器的前进后退功能。一般情况下，页面使用了ajax请求后，浏览器的后退按钮将不能按照期望位置进行跳转，因为浏览器的回退记录的一个完整的页面渲染。本发明通过针对各个主流浏览器制造hash锚点改变监听事件，然后对每次页面中的请求更改锚点值并进行记录，实现了浏览器前进后退按钮的重新定义，创造性的实现了在ajax请求流程中，也能像传统模式下正确的进行浏览器前进、后退功能，增强了web页面的交互性。

附图说明

图1 为本发明实施例中的网络体系结构图。

图2 为本发明实施例中的框架示意图。

图3 为本发明实施例流程图。

图4 为本发明实施例中事件追加流程图。

图5为本发明实施例中的页面无刷新模式“贪婪”状态示意图。

具体实施方式

以下结合附图和具体实施例对本发明作进一步详细阐述。

本发明采用ajax技术，提供了一种页面无刷新的处理方法和框架。在本发明实施例中，客户端加载页面无刷新框架的JavaScript基础文件，自动获取Web页面的所有请求，转换为ajax方式，并能够自动智能处理请求后的数据，接管页面处理逻辑，全自动的完成将一个web页面从传统访问方式转换到无刷新的方式。在web开发过程中，开发者甚至无需考虑无刷新的相关问题，正常开发后的代码引入《无刷新处理框架》后既完成了整个页面的无刷新转换，提高了开发人员的开发效率，减小了重复开发工作量，提高了代码质量，提升了电子商务平台的性能和稳定性。

    参阅图1所示，本发明实施例中的网络体系结构图包括客户端10，电子商务服务器11、数据库服务器12、其他应用服务器13。

客户端10，用于向电子商务服务器11发送Web页面请求，经过服务器端响应后，客户端接收服务器端的处理结果，并重新渲染页面信息。

电子商务服务器11，用于接收客户端10发送的页面请求，根据请求进行相应的处理，根据请求需要，向数据库服务器12请求获取满足条件的数据，或者是向其他应用服务器13调用所需要的服务，或者是在服务器端进行计算等处理操作，并把最后的处理结果发送给客户端10。

数据库服务器12，用于响应电子商务服务器11的请求，查询符合条件的数据，发送给电子商务服务器11。

其他应用服务器13，用于响应电子商务服务器11的请求，执行相应的应用服务，并把结果发送给电子商务服务器11。

参阅图2所示，本发明实施例中的框架包括客户端20和服务器端21，根据电子商务平台的规模，可以部署多个服务器端21。

客户端20，包括获取请求单元201、转换单元202、发送单元203、接收单元204、页面渲染单元205。

获取请求单元201，用于客户端自动获取Web页面中的所有请求。

转换单元202，用于对Web页面所有的请求进行转换，转换为ajax方式。其中对于普通请求，直接转换为ajax方式，如果为复杂请求，通过事件追加的方式，对web页面各种情况下的请求进行深入转换，保证一个元素上多个事件本来的执行顺序，同时自动对需要与服务器的交互行为进行ajax转换。

发送单元203，在客户端的浏览器中进入到一个Web页面时，客户端把此页面中所有请求转换为ajax方式后，向服务器端发送。

接收单元204，用于客户端接收所述服务器端的处理结果。

页面渲染单元205，用于客户端接收到服务器端的处理结果后，对Web页面的指定区域进行更新，无刷新地显示最新的信息。

服务器端21，包括接收单元211、处理单元212、发送单元213.

接收单元211，用于服务器端接收来自所述客户端发送单元203发送的Web页面中所有转换后的ajax请求。

处理单元212，用于服务器端根据接收单元211收到的客户端ajax请求，进行相应的处理，例如在服务器端进行计算、进行程序的执行、对其他应用服务进行调用、对数据库进行查询从而获取符合要求的数据等。

发送单元213，用于服务器端响应客户端请求后，把处理单元212最后的处理结果发送给客户端接收单元204。

参阅图3所示，本发明实施例的处理流程如下：

步骤300：客户端浏览器进入到某个Web页面，例如在保险B2B电子商务平台中，用户进入到“订单管理”页面。客户端浏览器将从服务器端加载自主开发的页面无刷新框架JavaScript基础文件；

在本发明的实施例中只需通过在web页面代码底部，利用script标签外链本发明框架的核心JavaScript文件，如：

<script type=”text/javascript” src=”script/noRefresh.js”charset=”UTF-8”></script>

步骤301：客户端自动获取Web页面的所有请求；

步骤302：客户端自动把获取的所有请求转化为ajax方式；

步骤303：客户端把转换为ajax方式的所有请求发送给服务器端；

步骤304：服务器端接收客户端发来的请求；

步骤305：服务器端根据请求的需要，进行相应的处理。例如在服务器端进行计算、调用其他应用服务器上特定的服务获取服务结果、进行服务器程序的执行、对数据库进行查询从而获取符合要求的数据等。

步骤306：服务器端把最后的处理结果发送给客户端；

步骤307：客户端接收服务器端发送的处理结果；

步骤308：客户端浏览器根据接收到的服务器端处理结果，更新Web页面的指定区域，达到页面无刷新效果。

 参阅图4所示，本发明实施例的事件追加流程如下：

步骤400：客户端获取Web页面的所有请求；

步骤401：判断所获取请求是否为复杂请求；所述获取的请求分为两种请求：普通请求、复杂请求。所谓普通请求，Web页面中通过常规的超链接或者表单提交的方式发送的服务器请求；所谓复杂请求，Web页面元素通过JavaScript绑定了事件行为，在这些事件内部进行了服务器请求的发送；

如果判断为普通请求，直接转到步骤403；如果判断为复杂请求，转到步骤402。

步骤402：进行事件追加，保证一个元素上多个事件本来的执行顺序，并获取多个函数执行后的与服务器端进行交互的请求；

步骤403：把获取的请求转化为ajax方式。

参阅图5所示，本发明实施例的的页面无刷新模式“贪婪”状态示意图：

状态500：客户端浏览器进入到特定的Web页面1，自动加载页面无刷新框架JavaScript基础文件，把Web页面1中所有的请求自动转变为无刷新模式；

状态501：在Web页面1中，点击其中的一个请求，将跳至Web页面2，客户端会自动获取Web页面2中的所有请求，转换成ajax方式，因此Web页面2也由传统访问模式自动变为页面无刷新模式；

状态502：在Web页面2中，点击其中的一个请求，将跳至Web页面3，客户端会自动获取Web页面3中的所有请求，转换成ajax方式，因此Web页面3也由传统模式自动变为页面无刷新模式；

状态503：在Web页面3中，点击其中的一个请求，将跳至Web页面4，客户端会自动获取Web页面4中的所有请求，转换成ajax方式，因此Web页面4也由传统模式自动变为页面无刷新模式；

依次类推，这是一个无限递归的过程，实现了在一个web页面的多次操作后仍然处于无刷新模式。

根据需要，如果要从在页面无刷新模式再回到传统请求访问模式上，可以通过服务端标示或客户端配置两种方式精确到具体的某一个请求上进行动态切换；页面无刷新处理框架的“贪婪”状态很好的保证了无刷新模式的延续性、一致性，特殊情况下，需要脱离页面无刷新模式，切换到传统的请求访问模式，本发明支持在服务端响应结果中的标示配置，或者通过客户端在请求发送时的简单配置，方便的实现状态切换。

模式切换方式示例：

方式一：服务端响应标示配置（携带redirect标示）

方式二：客户端配置name属性为“__kitty_out”。

 综上所述，采用本发明实施例提供的技术方案，通过编写统一、规范的页面刷新框架JavaScript基础文件，当客户端浏览器自动加载此基础文件后，那么浏览器的显示就由传统模式转变到页面无刷新模式上，在这种模式下，将无需刷新整个页面，就能实时显示最新的信息，大大降低了页面刷新的次数，提高了信息显示的实时性，提高了整个系统的下处理效率，而且由于是加载统一的页面刷新框架JavaScript基础文件，无需开发人员分别处理Web页面上的各个请求，提高了开发效率，降低了开发成本和维护成本。

 本领域的开发技术人员可以对本发明的实施例进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明实施例中的这些修改和变型属于本发明权利要求及其等同的范围之内，则本发明中的实施例也包含这些改动和变型在内。

Claims (4)

1.一种全自动页面无刷新的处理方法，其特征在于，包括：

在电子商务平台中，用户进入到特定的Web页面，客户端浏览器从服务器将自动加载页面无刷新框架的JavaScript基础文件；客户端浏览器加载页面无刷新框架的JavaScript基础文件后，将自动获取Web页面的所有请求，转换为ajax方式，然后向服务器端发送；

服务器端接收到客户端发送的请求，进行相应的处理，把处理好的结果发送给所述客户端；

客户端接收到服务器处理好的结果，在指定区域进行信息更新；

客户端的请求不仅是Web页面数据的更新，而且涉及到Web页面的转换时，客户端会自动采用页面无刷新模式，把新的Web页面信息在当前的页面内的指定区域进行更新，同时，客户端的页面无刷新处理框架自动将这个新Web页面内部的所有请求，转换为无刷新模式，保证了电子商务平台展示中页面无刷新的持续性、一致性；

针对各个主流浏览器制造hash锚点改变监听事件，对每次页面中的请求更改锚点值并进行记录，进行浏览器前进后退按钮的重新定义，实现使用ajax请求流程中，能正确进行浏览器前进、后退。

2.如权利要求1所述的处理方法，其特征在于：编写统一、规范的页面无刷新框架的JavaScript基础文件，只要客户端浏览器加载此基础文件，就自动从传统模式转变为页面无刷新模式，无需开发人员专门对每个请求进行专门处理。

3.如权利要求1所述的处理方法，其特征在于：对于获取商务Web页面请求，分为两种：普通请求、复杂请求；如果判断为普通请求，则直接转换为ajax方式，向服务器端发送；如果判断为复杂请求，那么通过事件追加的方式，对Web页面各种复杂情况下的请求进行深入转换，然后向服务器端发送。

4.一种全自动页面无刷新处理框架，包括客户端和服务器端，其特征在于：

所述客户端用于向所述服务器端发送页面请求，经过服务器端响应后，所述客户端接收所述服务器端的处理结果，并在指定区域更新信息；

所述服务器端用于接收所述客户端发送的页面请求，根据请求进行相应的处理，在服务器端进行计算、进行程序的执行、对其他应用服务的调用、对数据库进行查询从而获取符合要求的数据，并把处理结果发送给客户端；

所述客户端包括客户端发送单元、客户端接收单元、客户端获取请求单元、客户端转换单元、客户端页面渲染单元；

所述客户端发送单元，在客户端浏览器中进入到一个Web页面时，客户端自动获取此页面中所有请求后，向所述服务器端发送；

所述客户端接收单元，用于客户端接收所述服务器端的处理结果，并把最新的结果在客户端浏览器的指定区域渲染显示；

所述客户端获取请求单元，用于客户端自动获取Web页面中的所有请求；

所述客户端转换单元，用于对页面所有的请求进行自动转换，把客户端获取的各类请求转换为ajax请求；

所述客户端页面渲染单元，用于客户端接收到服务器端的处理结果后，对Web页面的指定区域进行更新，无刷新地显示最新的信息；

所述服务器端包括服务器端接收单元、服务器端处理单元以及服务器端发送单元；

所述服务器端接收单元，用于服务器端接收来自所述客户端发送的ajax请求；

所述服务器端处理单元，用于服务器端根据接收的所述客户端ajax请求，进行相应的处理，在服务器端进行计算、进行程序的执行、调用其他的应用服务、对数据库进行查询从而获取符合要求的数据；

所述服务器端发送单元，用于所述服务器端响应所述客户端的ajax请求，把处理结果发送给所述客户端；

所述客户端加载页面无刷新框架的JavaScript基础文件，由传统模式转换为页面无刷新模式，基础文件不限于JavaScript格式的文件，包括任何可被客户端加载的文件类型；

所述客户端获取请求单元自动获取Web页面的所有请求，为集中处理做好准备，比传统开发方式中对每个请求单独处理，效率提高很多；

所述客户端转换单元将Web页面中的所有请求进行转换，在此过程中，对获取的Web请求进行判断，分为普通请求和复杂请求，根据不同类型的请求，用不同的方式处理；对于普通请求，则直接转换为ajax方式；对于复杂请求，采取事件追加或接口调用的方式达到转换ajax请求的目的。

Images