CN102938776B - 基于ajax技术的动态页面处理系统 - Google Patents
基于ajax技术的动态页面处理系统 Download PDFInfo
- Publication number
- CN102938776B CN102938776B CN201210371683.2A CN201210371683A CN102938776B CN 102938776 B CN102938776 B CN 102938776B CN 201210371683 A CN201210371683 A CN 201210371683A CN 102938776 B CN102938776 B CN 102938776B
- Authority
- CN
- China
- Prior art keywords
- page
- server
- browser
- static
- request
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000012545 processing Methods 0.000 title claims abstract description 19
- 238000005516 engineering process Methods 0.000 title claims abstract description 18
- 230000003068 static effect Effects 0.000 claims abstract description 55
- 238000000034 method Methods 0.000 claims abstract description 22
- 238000004891 communication Methods 0.000 claims abstract description 4
- 238000013515 script Methods 0.000 claims description 8
- 238000003672 processing method Methods 0.000 claims description 7
- 230000005540 biological transmission Effects 0.000 claims description 3
- 230000008878 coupling Effects 0.000 claims 1
- 238000010168 coupling process Methods 0.000 claims 1
- 238000005859 coupling reaction Methods 0.000 claims 1
- 230000008901 benefit Effects 0.000 abstract description 5
- 230000008569 process Effects 0.000 description 13
- 230000004044 response Effects 0.000 description 8
- 230000006870 function Effects 0.000 description 5
- 230000026676 system process Effects 0.000 description 2
- 230000009897 systematic effect Effects 0.000 description 2
- 235000006719 Cassia obtusifolia Nutrition 0.000 description 1
- 235000014552 Cassia tora Nutrition 0.000 description 1
- 244000201986 Cassia tora Species 0.000 description 1
- 230000005856 abnormality Effects 0.000 description 1
- 230000007423 decrease Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 229940004975 interceptor Drugs 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000000844 transformation Methods 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种基于ajax技术的动态页面处理系统，包括客户端、http服务器、应用服务器，所述客户端浏览器通过路由服务器分别与http服务器、应用服务器通信，其特征在于所述http服务器负责接收静态页面请求，并将静态页面连同页面的上应用的静态资源一起返回给客户端浏览器，并在浏览器上展现页面主体；所述应用服务器负责接收非静态页面请求，客户端浏览器的页面通过ajax请求访问应用服务器，应用服务器向浏览器返回动态数据，浏览器更新数据并更新页面显示。该方法充分发挥了http服务器处理静态资源的优势，提升了系统的整体性能，同时也方便后续集群的扩展。
Description
技术领域
本发明属于页面开发技术领域，具体涉及一种基于ajax技术的动态页面处理系统。
背景技术
现代B/S架构的管理系统大多是基于动态页面，并部署在支持各自的应用服务器，如tomcat，iis等。此类部署架构在面对超大并发访问时，服务器端对于页面的性能消耗和响应速度会是一个需要考虑的问题。
具体来说，包括：1、动态页面本身的处理要比静态页面复杂，对服务器消耗高，响应时间长。2、系统中也有很多图片，脚本，html页面等静态资源，但一般应用服务器的处理效率都远低于纯http服务器（如apache）。这样最终使得系统处理性能下降，用户在界面上要等待的时间变长，长时间“白屏”。
对于系统处理性能，目前的解决方案有将纯http服务器和应用服务器结合部署，由纯http服务器处理静态内容，如js，html等；应用服务器处理服务器端脚本，如jsp，php等。虽然系统整体提高了静态页面的处理能力，解决了对于静态内容处理的问题，但还是要等待应用服务器处理完毕才返回整个页面的内容。
另外还有将动态页面静态化，即将动态页面的返回结果直接保存为静态html页面。举例来说，以jsp为例，某系统里有一个产品信息的表单访问路径是这样的：ProductInfo.jsp?pid=123，客户端在访问这个页面时会在服务器端产生以下的消耗：1、初次访问jsp页面编译的时间；2、根据pid=123进行数据库查询，得到相应数据的时间；3、将结果通过servlet的out对象输出的时间。其中，第二、第三个消耗时间在每次访问时都需要执行。因此采取页面静态化处理，会将上面步骤3的返回结果在服务器端之间保存为例如ProductInfo_123.html这样的页面。后面再有用户请求就直接指向这个html页面。这样就省略了上述步骤1和2，可以大大提高页面响应速度。这种方案在各类内容管理平台中很常用，因为一般此类系统的数据更新频率不高，适合进行静态化处理。但是如果数据变动频繁，如各类信息管理系统，用户每时每刻都会通过表单与数据库进行交互，静态化处理本身就会带来很多系统消耗，这种方案就不再适合了。本发明因此而来。
发明内容
本发明目的在于提供一种基于ajax技术的动态页面处理系统，解决了现有技术中动态页面开发时系统消耗太大、用户在界面上要等待的时间过长、系统性能低下等问题。
为了解决现有技术中的这些问题，本发明提供的技术方案是：
一种基于ajax技术的动态页面处理系统，包括客户端、http服务器、应用服务器，所述客户端浏览器通过路由服务器分别与http服务器、应用服务器通信，其特征在于所述http服务器负责接收静态页面请求，并将静态页面连同页面的上应用的静态资源一起返回给客户端浏览器，并在浏览器上展现页面主体；所述应用服务器负责接收非静态页面请求，客户端浏览器的页面通过ajax请求访问应用服务器，应用服务器向浏览器返回动态数据，浏览器更新数据并更新页面显示。
本发明的另一目的在于提供一种基于ajax技术的动态页面处理方法，其特征在于所述方法包括以下步骤：
（1）浏览器向http服务器请求动态页面中的页面主体；
（2）http服务器将静态页面连同页面的上应用的静态资源一起返回给浏览器，浏览器展现页面主体；
（3）浏览器的页面通过ajax请求访问应用服务器的服务器端脚本；
（4）应用服务器将返回的数据返回给浏览器，浏览器再次更新页面。
本发明技术方案中提出了全新的系统部署方法，结合特定的页面框架，有效的利用应用服务器和纯http服务器各自的优点，提高系统的整体响应能力和用户体验。
采用静态页面框架，抛弃服务器端脚本，如jsp，php，全部改用html页面和ajax的处理方法。此法可以使得系统不需要等待逻辑的全部处理完毕，而在第一时间响应用户的页面请求，加载出系统页面。上述方法配合http服务器与应用服务器一起部署的整体部署结构。此法充分发挥了http服务器处理静态资源的优势，提升了系统的整体性能，同时也方便后续集群的扩展。
相对于现有技术中的方案，本发明的优点是：
本发明技术方案结合了现有技术各自的优点，并对缺陷进行了回避，与页面静态化相比，不去将原来的内容直接生成静态页面，而是将静态内容先加载，再读取数据，提升性能的同时，更能适应数据变动频繁的信息系统的要求。与直接用http服务器与应用服务器混合部署的方式相比，利用快速返回的静态页面，给用户第一时间的响应，避免了原来需要等待所有服务器请求响应完毕的过程。
附图说明
下面结合附图及实施例对本发明作进一步描述：
图1为基于ajax技术的动态页面处理系统的静态页面框架访问过程图；
图2为基于ajax技术的动态页面处理系统的网络部署结构图；
图3为基于ajax技术的动态页面处理系统的系统访问流程图。
具体实施方式
以下结合具体实施例对上述方案做进一步说明。应理解，这些实施例是用于说明本发明而不限于限制本发明的范围。实施例中采用的实施条件可以根据具体厂家的条件做进一步调整，未注明的实施条件通常为常规实验中的条件。
实施例
本实施例得到的基于ajax技术的动态页面处理系统，包括客户端、http服务器、应用服务器，所述客户端浏览器通过路由服务器分别与http服务器、应用服务器通信，所述http服务器负责接收静态页面请求，并将静态页面连同页面的上应用的静态资源一起返回给客户端浏览器，并在浏览器上展现页面主体；所述应用服务器负责接收非静态页面请求，客户端浏览器的页面通过ajax请求访问应用服务器，应用服务器向浏览器返回动态数据，浏览器更新数据并更新页面显示。
本实施例的系统主要包括2个部分：
一、静态页面框架。
本实施例舍弃jsp等服务器端脚本，换成html页面，通过ajax请求与服务器端交互，并通过JSON格式进行参数的传递。ajax是“AsynchronousJavaScriptAndXML“（异步JavaScript和XML)，可以以非阻塞的方式请求服务器端资源。JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成
用户所有请求的都是html页面，这样可以第一时间加载出主体页面内容，再通过ajax技术进行服务器端功能的请求，最后利用回调函数获取返回数据进行页面内容的更新。
框架本身包括以Javascript引擎和服务器端处理接口：
1.Javascript引擎：
a)url参数处理器：获取url参数，并封装成JSON格式，方便后
续数据处理。
b)ajax请求对象：可以发送ajax请求，拥有回调函数接口和异常
处理接口
一个典型的用jquery实现的引擎示例可以这样的：
2.服务器端处理接口：
a)请求拦截器：能够拦截到ajax请求，并处理好参数。
b)访问权限的控制器。
c)业务逻辑调用器
d)处理结果封装器：将业务逻辑的处理结果进行数据封装再返回到客户端
e)相关的异常处理接口
一个典型的用java的servlet实现的处理接口可以是这样的：
举例说明，当访问地址为ProductInfo.html?pid=123的页面时，如图1所示：
步骤一：解析url参数，形成params={pid:123}
步骤二：发送ajax请求
步骤三：服务器响应ajax请求，调用业务逻辑，获取到Product的具体信息并返回。
步骤四：通过ajax的回调函数，获取到数据，将Product的信息展现到页面上或进行异常处理。
二、系统整体部署方式
以tomcat和apache为例，系统部署时将全部的静态文件放到http服务器（如apache）里面，将所有的非静态资源，如servlet，javabean等部署的应用服务器(如tomcat)里面。
配置http服务器的转发规则，根据url匹配，将静态资源的请求转发给http服务器，非静态资源转发给应用服务器，两者各自将处理结果返回给浏览器。
将框架和部署结构结合起来，即为系统的整个访问结构：对于大并发下的B/S架构管理系统，从系统性能提升和用户访问感受的角度上来讲，此法比其他已知方案效果都好，通用性都强。服务器端可以是jsp，asp，php等各种语言；客户端只要能支持javascript和ajax，例如pc，智能手机，平板电脑等。
上述实例只为说明本发明的技术构思及特点，其目的在于让熟悉此项技术的人是能够了解本发明的内容并据以实施，并不能以此限制本发明的保护范围。凡根据本发明精神实质所做的等效变换或修饰，都应涵盖在本发明的保护范围之内。
Claims (10)
1.一种基于ajax技术的动态页面处理系统，包括客户端、http服务器、应用服务器，所述客户端浏览器通过路由服务器分别与http服务器、应用服务器通信，其特征在于所述http服务器负责接收静态页面请求，并将静态页面连同页面上应用的静态资源一起返回给客户端浏览器，并在浏览器上展现页面主体；所述应用服务器负责在http服务器将静态页面连同页面上应用的静态资源一起返回给客户端浏览器，并在浏览器上展现页面主体之后再接收非静态页面请求，客户端浏览器的页面通过ajax请求访问应用服务器，应用服务器向浏览器返回动态数据，浏览器更新数据并更新页面显示；所述静态页面请求/非静态页面请求通过静态页面框架丢弃服务器端脚本转换成html页面，通过ajax请求与服务器端交互。
2.根据权利要求1所述的动态页面处理系统，其特征在于所述客户端和应用服务器之间通过JSON格式进行参数的传递。
3.根据权利要求1所述的动态页面处理系统，其特征在于所述系统将全部的静态文件部署到http服务器里，将所有的非静态资源部署到应用服务器里。
4.根据权利要求1所述的动态页面处理系统，其特征在于所述客户端的所有请求通过html页面先加载出主体页面内容，然后通过ajax技术进行服务器端的请求，最后利用回调函数获取返回数据反馈给客户端进行页面内容的更新。
5.根据权利要求4所述的动态页面处理系统，其特征在于所述系统中客户端根据资源的类型向不同的服务器发送请求，将静态资源的请求转发给http服务器，非静态资源的请求转发给应用服务器。
6.一种基于ajax技术的动态页面处理方法，其特征在于所述方法包括以下步骤：
（1）浏览器向http服务器请求动态页面中的页面主体；所述页面请求通过静态页面框架丢弃服务器端脚本转换成html页面，通过ajax请求与服务器端交互;
（2）http服务器先将静态页面连同页面上应用的静态资源一起返回给浏览器，浏览器展现页面主体；
（3）然后浏览器的页面通过ajax请求访问应用服务器的服务器端脚本；
（4）应用服务器将返回的数据返回给浏览器，浏览器再次更新页面。
7.根据权利要求6所述的动态页面处理方法，其特征在于所述浏览器和应用服务器之间通过JSON格式进行参数的传递。
8.根据权利要求6所述的动态页面处理方法，其特征在于所述浏览器配置http服务器的转发规则是根据url匹配，将静态资源的请求转发给http服务器，非静态资源的请求转发给应用服务器，两者各自将处理结果返回给浏览器。
9.根据权利要求6所述的动态页面处理方法，其特征在于所述浏览器的所有请求通过html页面先加载出主体页面内容，然后通过ajax技术进行服务器端的请求，最后利用回调函数获取返回数据反馈给客户端进行页面内容的更新。
10.根据权利要求6所述的动态页面处理方法，其特征在于所述方法中客户端进行html页面加载时，静态资源先进行加载，非静态资源通过回调函数获取返回数据给客户端进行页面内容的更新加载。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210371683.2A CN102938776B (zh) | 2012-09-28 | 2012-09-28 | 基于ajax技术的动态页面处理系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210371683.2A CN102938776B (zh) | 2012-09-28 | 2012-09-28 | 基于ajax技术的动态页面处理系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102938776A CN102938776A (zh) | 2013-02-20 |
| CN102938776B true CN102938776B (zh) | 2016-06-29 |
Family
ID=47697644
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210371683.2A Active CN102938776B (zh) | 2012-09-28 | 2012-09-28 | 基于ajax技术的动态页面处理系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102938776B (zh) |
Families Citing this family (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103701910B (zh) * | 2013-12-30 | 2017-06-16 | 北京邮电大学 | 支持内容中心网络的资源请求处理方法及Web浏览器 |
| CN104320458A (zh) * | 2014-10-24 | 2015-01-28 | 国家电网公司 | 基于Domino和Nginx服务器实现的信息化系统 |
| CN104391868B (zh) * | 2014-10-28 | 2018-12-18 | 用友优普信息技术有限公司 | 动态页面静态化的装置和方法 |
| CN104468740B (zh) * | 2014-11-21 | 2019-03-08 | 网宿科技股份有限公司 | 一种网页传输智能处理系统及其方法 |
| CN105677688B (zh) * | 2014-11-21 | 2019-07-16 | 博雅网络游戏开发（深圳）有限公司 | 页面数据加载方法和系统 |
| CN105007309A (zh) * | 2015-06-29 | 2015-10-28 | 上海瀚之友信息技术服务有限公司 | 一种动态数据与静态界面的分离控制系统及方法 |
| CN105069132A (zh) * | 2015-08-17 | 2015-11-18 | 中国海洋大学 | 一种基于静态外壳的网页实现方法 |
| CN105630992B (zh) * | 2015-12-25 | 2019-12-03 | 网易（杭州）网络有限公司 | 静态页面中的场景显示方法及装置 |
| CN106101225A (zh) * | 2016-06-14 | 2016-11-09 | 苏州嗨嗨网络科技有限公司 | 一种站点资源分发方法及系统 |
| TWI610183B (zh) * | 2016-06-14 | 2018-01-01 | 健行學校財團法人健行科技大學 | 植基於ajax技術於控管網頁共通部分之運作系統 |
| CN106227742A (zh) * | 2016-07-12 | 2016-12-14 | 乐视控股（北京）有限公司 | 基于b/s模式的动态网页生成方法、服务器和系统 |
| CN106339414A (zh) * | 2016-08-12 | 2017-01-18 | 合网络技术（北京）有限公司 | 网页渲染方法及装置 |
| CN106294777A (zh) * | 2016-08-12 | 2017-01-04 | 福建天晴数码有限公司 | 浏览器脚本的缓存方法及系统 |
| CN106339264A (zh) * | 2016-08-29 | 2017-01-18 | 九次方财富资讯（北京）有限责任公司 | 基于Ajax异步调用技术实现的双公示数据web页面展示方法和系统 |
| CN107800552B (zh) * | 2016-09-02 | 2020-11-27 | 杭州海康威视数字技术股份有限公司 | 一种数据交互方法及装置 |
| CN107920042B (zh) * | 2016-10-08 | 2020-11-06 | 北京小唱科技有限公司 | 一种直播间页面的优化传输方法和服务器 |
| CN108123970A (zh) * | 2016-11-28 | 2018-06-05 | 北京神州泰岳软件股份有限公司 | 数据展示方法及相关装置 |
| CN108153663B (zh) * | 2016-12-02 | 2022-02-18 | 阿里巴巴集团控股有限公司 | 页面数据处理方法及装置 |
| CN109218270B (zh) * | 2017-07-06 | 2021-08-10 | 北京京东尚科信息技术有限公司 | 一种处理被劫持请求的方法和装置 |
| CN107391664A (zh) * | 2017-07-19 | 2017-11-24 | 广州华多网络科技有限公司 | 基于web的页面数据处理方法和系统 |
| CN109871404A (zh) * | 2018-12-29 | 2019-06-11 | 江苏金智科技股份有限公司 | 一种采用二进制数据流传输的实时海量数据可视化方法 |
| CN110032493A (zh) * | 2019-03-13 | 2019-07-19 | 平安城市建设科技(深圳)有限公司 | 页面的监控方法、装置、终端及可读存储介质 |
| CN110737853B (zh) * | 2019-09-06 | 2023-04-18 | 中山市八喜电脑网络有限公司 | 一种多平台展示静态页面数据同步方法及b2b系统 |
| CN112487323A (zh) * | 2019-09-11 | 2021-03-12 | 北京沃东天骏信息技术有限公司 | 网页实验方法及服务器 |
| CN110866197B (zh) * | 2019-11-19 | 2022-08-19 | 中国民航信息网络股份有限公司 | 一种基于web应用程序的离港前端客户端访问方法及装置 |
| CN111159517A (zh) * | 2019-12-12 | 2020-05-15 | 深信服科技股份有限公司 | 一种信息处理方法、设备、系统和计算机存储介质 |
| CN111324545B (zh) * | 2020-03-13 | 2023-09-22 | 中国工商银行股份有限公司 | 应用服务器中间件性能测试方法、测试终端、应用服务器 |
| CN111831947B (zh) * | 2020-07-27 | 2023-08-15 | 中国工商银行股份有限公司 | 应用系统、数据处理方法、计算机系统和存储介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1801817A (zh) * | 2005-12-21 | 2006-07-12 | 阿里巴巴公司 | 日志文件的生成方法和系统 |
| CN101551882A (zh) * | 2008-12-31 | 2009-10-07 | 东莞市天新企业管理咨询有限公司 | 一种工程管理监控系统和方法 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060047780A1 (en) * | 2005-11-08 | 2006-03-02 | Gregory Patnude | Method and apparatus for web-based, schema-driven application-server and client-interface package using a generalized, data-object format and asynchronous communication methods without the use of a markup language. |
| US20100131866A1 (en) * | 2008-09-11 | 2010-05-27 | Rob Nielsen | Method and system for web-based teleconferencing |
-
2012
- 2012-09-28 CN CN201210371683.2A patent/CN102938776B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1801817A (zh) * | 2005-12-21 | 2006-07-12 | 阿里巴巴公司 | 日志文件的生成方法和系统 |
| CN101551882A (zh) * | 2008-12-31 | 2009-10-07 | 东莞市天新企业管理咨询有限公司 | 一种工程管理监控系统和方法 |
Non-Patent Citations (2)
| Title |
|---|
| 基于静、动态内容分离的Web应用性能优化技术的研究;赵飏等;《计算机应用》;20050228;第25卷(第2期);第312-314页 * |
| 清华大学图书馆捐赠管理及服务系统的设计与实现;张蓓等;《现代图书情报技术》;20091231(第7期);第113-115页以及图5 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102938776A (zh) | 2013-02-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102938776B (zh) | 基于ajax技术的动态页面处理系统 | |
| US20070280206A1 (en) | Method for consuming heterogeneous services on heterogeneous devices using script plugins | |
| CN106569856B (zh) | 一种应用视图资源文件的加载方法和装置 | |
| CN103383687B (zh) | 一种页面处理方法和装置 | |
| CN107391664A (zh) | 基于web的页面数据处理方法和系统 | |
| CN102184266A (zh) | 一种页面与数据分离的动态wap网站自动生成方法 | |
| US9088462B2 (en) | Common web accessible data store for client side page processing | |
| CN107590145A (zh) | 一种页面静态资源的处理方法和装置 | |
| CN103269377B (zh) | 处理脚本文件的方法、服务器、客户端和系统 | |
| Pande et al. | Enhanced web application and browsing performance through service-worker infusion framework | |
| CN103401926B (zh) | 一种提高网络资源访问速度的方法及装置 | |
| CN104063407A (zh) | 基于云计算的浏览器架构与解析方法 | |
| CN102510410A (zh) | 在线广告投放方法、系统及广告控制设备 | |
| Gao et al. | CoWebDraw: a real-time collaborative graphical editing system supporting multi-clients based on HTML5 | |
| CN105205151B (zh) | 在移动端节约浏览器页面流量的方法及系统 | |
| CN101807204B (zh) | 一种遥感图像处理Web服务动态生成方法 | |
| CN105871961B (zh) | 一种灰度发布路由的方法及装置 | |
| CN105847319A (zh) | 一种移动终端网络请求方法及系统 | |
| CN103561113B (zh) | Web Service接口的生成方法及装置 | |
| Wang et al. | Mobile web browser optimizations in the cloud era: A survey | |
| CN112486672A (zh) | 一种服务内存缓存调用方法和装置 | |
| US10530709B2 (en) | Container contract for data dependencies | |
| Bian et al. | A Multi-way Access Portal Website Construction Scheme | |
| CN104184841A (zh) | 网站dns解析加速方法及客户端 | |
| CN110598146B (zh) | 基于Reactjs的SPA应用程序实现方法以及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |