jQuery在AJAX技术框架中页面加载的应用分析

ISSN1009-3044

Computer

Knowledge

Knowledge

and

and

Technology

Technology

电脑知识

电脑知识

与技术

Computer

与技术

Vol.16,No.36，

December.

2020

E-mail：*************.cn

第16卷第36期(2020年12月)

http：//

Tel：+86-551-6569

jQuery在AJAX技术框架中页面加载的应用分析

王艳梅

（无锡汽车工程高等职业技术学校，江苏无锡214153）

摘要:随着互联网技术向各行各业不断延伸，互联网应用的数量也与日俱增。根据专业机构的统计，页面加载直接影响着

用户的体验和服务质量，因此如何提高页面加载速度已经成为当下计算机领域发展的重要问题。本文主要论述jQuery在

AJAX技术框架中页面加载的应用分析，综合利用jQuery，明确页面加载的各项指标，持续进行检测分析和优化，建立一个

高效易扩展的AJAX技术框架，确保各个应用模块数据的准确性和稳定性。

关键词:jQuery；AJAX技术框架；页面加载；应用分析

中图分类号：TP311文献标识码：A

开放科学（资源服务）标识码（OSID）：

文章编号：1009-3044(2020)36-0210-03

引言

随着互联网行业快速发展，各行各业已经步入了信息化时

代，用户对互联网应用的使用体验要求不断提高，传统的Web

应用模型响应能力不足，在长期作业过程中，需要处理大量的

基础信息，在每次进行请求时都需要客户端手动更新，浪费大

量时间进行数据调取，客户体验不佳。利用AJAX技术可以充

分挖掘Web浏览器的潜能，为用户提供交互式的体验，有效提

高浏览器和服务端的信息传递效率；结合jQuery提供的简便的

JavaScript设计模式、短小清晰的多功能接口、高效灵活的CSS

选择器、便捷的插件扩展机制、良好的浏览器版本兼容性，可以

高效地开发出安全、用户体验良好的Web应用。通过AJAX技

术框架对传统基于Web应用模型的互联网应用进行改造是提

升网站响应速度，提高用户体验的有效途径。

1jQuery与AJAX技术框架的概述

AJAX是AsynchronousJavaScriptandXML的简称，是一种

用于创建交互性更强的应用程序的技术，同时它能够独立于

Web服务器，给用户带来更加极致的浏览速度。广义上看

AJAX技术可以看作服务器和客户端之间的一个过滤层(参见

图1中的AJAXEngine)，通过对用户操作进行分析，对服务器进

行异步化处理，有效减少网页对于服务器重复信息的请求，达

到快速响应的目的。AJAX技术通过异步方式完成客户端和服

务器之间的数据交换，实现Web服务的有效性和独立性，在不

重复加载整个页面的情况下，增强页面局部响应功能，有效提

高页面加载速度，实现信息收集处理，为用户提供最佳的在线

体验。

AJAX技术框架是开放式的，它基于如下几种开放式的

标准：

1）浏览器端的展现使用了HTML和CSS（CascadingStyle

Sheets）；

2）数据采用XML格式存储并从服务端获取；

3）浏览器端的数据请求通过XMLHttpRequest对象封装。

图1传统Web应用模型和AJAX技术的Web应用模型对比

jQuery本质来讲是一个JavaScript库，它可以同时兼容各种

市场上主流的浏览器，维持用户的html处于独立状态。使用

jQuery可以更加方便地处理documentaries和events，在操作过

程中兼容性较强，表达较为详细。此外，JavaScript库内含有大

量的成熟插件，可以直接调用，设计人员在设计分析过程中，不

需要在网页中再次插入，只需通过定义id，就可以实现客户端

的快速响应，有效提高数据流转速度。jQuery强大的选择器、

可靠的事件处理机制、完善的AJAX交互接口、丰富的插件支持

使其广泛应用于Web客户端的开发。它不与单一的浏览器进

行固定绑定，因此其兼容性较强。将jQuery和AJAX两种方法

相结合能够快速调取函数，使得原来复杂的函数处理工作简单

化，同时也可以明确选择函数中的不同要素，创建注册表，对于

用户输入的数据进行代码分析，完成后续函数处理的一系列

步骤。

2使用Ajax技术开发的Web应用存在的问题

2.1加载速度较慢

页面加载核心是响应速度，它直接影响着用户体验，用户

的耐性会在缓慢地加载过程中消耗殆尽，从而导致用户的流

收稿日期：2020-06-18

作者简介：王艳梅（1981—），女，江苏徐州人，硕士，讲师，研究方向为计算机应用。

210

多媒体技术及其应用

本栏目责任编辑：唐一东

第16卷第36期(2020年12月)

失。根据相关调查机构的数据，大部分用户在等待页面响应过

程中会浪费三秒时间，在此过程中就会流失20%的用户，如果

延迟达到10秒，大约40%的用户会放弃浏览。

图2页面加载速度和用户流失率之间的关系

2.2网站框架冗杂

在中国，信息化的普及稍晚，AJAX技术框架模式不够完

善；同时网络环境并不安全，内部存在着许多漏洞，网络系统运

行状态不稳。根据对网站结构的调查分析，发现一般的网站都

是由多层页面进行组合式连接，大体差异只是数据显示内容和

超链接生成格式不同，由于设计内容较为复杂，客户端的响应

速度存在一定的延迟，给后期的代码维护带来了一定的挑战。

2.3技术集成复杂

大部分的网站是基于B/S的模式，不同网站的信息承载量

不同，浏览器种类繁多，在页面加载过程中实现原理也不同，存

在着较大的区别，技术人员难以构建统一的AJAX技术框架。

此外，构建平台要同时满足多个用户的不同需要，数据之间融

合困难。

2.4基于AJAX应用的Debug、测试和维护成本增加

目前基于AJAX的Web应用缺乏行之有效的设计模式和

最佳实践设计指引，导致在多个互联网应用设计过程中无法有

效地继承之前沉淀的经验和代码框架。同时，普遍存在模块化

程度低的问题。上述问题导致了基于AJAX应用的Debug、测

试和维护成本不断增加。

3jQuery在AJAX技术框架中页面加载的应用分析

3.1强化需求导向分析

页面加载是指用户通过浏览器发出页面请求，后台根据用

户请求进行数据的查询、分析、处理后组装响应报文，浏览器解

析响应报文、渲染并完整地展现新页面的过程。设计人员在设

计AJAX技术框架时，要明确域名查找、请求连接、文档接收、文

档渲染等一系列步骤，并且引入高效的数据监测工具，对页面

加载速度、页面稳定性等指标进行有效监控，提高用户操作的

便利性。AJAX技术框架通过信息存储和查看模块设计，强化

插件响应，以组框的方式完成信息网格分割，提高信息传递效

率，强化对网页信息的调度管理。

要利用jQuery脚本语言，提高AJAX技术框架的故障导向

性，根据系统显示出来的特征进行前期的分类治理，形成不同

维度的故障标签，制定有效的自动化策略来应对故障治理目

标。充分利用

AJAX

AJAX技术框架特点，增强故障预测能力，整合

减少AJAX

技术框架内的信息，

技术框架的成本投入。

避免重复性的AJAX技术框架建设，

本栏目责任编辑：唐一东

ComputerKnowledgeandTechnology

电脑知识

与技术

3.2提高AJAX技术框架的数据耦合性

在开发脚本信息时，应该有效减少网站中的冗杂子目录，

通过指定的动态指引对网站进行节点控制，实现数据和内容的

有效分离。综合压缩手段和格式转换，提高网站自身的承载能

力，为后续的开发利用提供模板支持。以拓扑式的连接模式，

持续整合AJAX技术框架的优势，提高信息的耦合性，形成更加

高效的信息处理体系。利用数据传输限制访问权限，保证用户

数据的可靠性。利用信息特定传达方式，保证AJAX技术框架

数据虚拟化后依然能够稳定工作。

例如，设计人员具体设计主页和详细页时，需要充分体现

网站的多样化，保证AJAX技术框架网站具有一定的稳定性，减

少后续维护开发的投入，降低开发成本，为后期开发网站提供

相应的模板，提高应用框架的复用性和可移植性。在网页设计

过程中，采取创建动画、处理事件等命令性语言，使得AJAX技

术框架变得更加简洁，在框架底层创建插件，实现交互调用的

效果。在更新网站主页节点时，要充分考虑到网络流量，通过

合理控制目录加载的过程提升用户体验。在页面加载时首先

要显示出主目录，对其进行快速调用；其次加载相应的子目录

信息，并合理控制目录大小，避免加载时间过长。在设计时需

要考虑保证AJAX技术框架能够同时兼容DOC、PPT和Excel等

综合类型的文件，也可以将mp4等视频格式换算成FLV快速压

缩文件，降低对客户端网络宽带的要求，增加网络系统的承

载量。

总而言之，在网络应用设计过程中，需要充分考虑用户体

验，通过优化网页加载过程，利用数据压缩技术和数据兼容技

术，实现用户体验的最优化。

3.3提高页面安全性

框架设计过程中也应该综合利用多种加密手段，

jQuery开发过程中具有一定的开放性，因此在

提高网站内部

AJAX技术

的安全性。在登陆、密码管理、个人信息管理、支付等关键环

节，需要综合利用多种身份认证方法，实现对于来访人员的信

息扫描和安全验证，确保用户本人在可信环境安全操作。

例如，在提高页面加载速度的同时，也应该强化AES的加

密流程，保证用户的个人信息；可以综合利用字节替代、行列混

合等行之有效的技术,实现AES的加密解密流程。在解密过程

中，综合应用逆字节替代，逆行位移等多种方法，实现AES的动

态管理。在当前的互联网生态环境中，黑客猖獗，网络攻击、用

户数据泄露等恶性安全事件层出不穷，我们需要充分认识到数

据安全和身份认证的重要性，利用AJAX技术框架提升页面的

安全性。

3.4统筹AJAX技术框架多个层级

在AJAX技术框架构建页面过程中，应该从四个方面进行

开展，下面将主要论述用户管理层、数据采集层、网页管理层、

数据分析层。

1

用户管理，

）用户管理

顾名思义是对用户在互联网应用中完整的生命

周期的服务和管理，它面向的主体是用户，包含了个人信息管

理、密码设置和找回、信息编辑、登录注册、注销等功能。用户

管理层是实现Web页面，加载监控平台的基本组件，它集角色、

权限、管理为一体，能够为用户提供多面性的数据服务。

多媒体技术及其应用

211

ComputerKnowledgeandTechnology

电脑知识

与技术

2

数据采集作为整个构架中的支撑层，

）数据采集

它包含了采集脚本、

数据传输、数据储存、数据验证等一系列功能，是页面加载的数

据来源。在数据采集过程中要首先对于数据进行功能性获取，

快速排除无效信息，将采集的脚本信息传回监控平台，并对于

采集的信息进行分类和持续性管理。

3）网页管理

jQuery

网页管理是页面加载过程中的中心环节，

网页管理高于用户管理，

语言对页面内容进行添加、

网页管理可以通过改写底层语言，

删改、修改、列表、

它主要利用

查询等。

满

足用户的多重加载需要。设计人员在网页管理过程中，可以对

管理流程进行定义，匹配相应的管理方案，达到业务流程重组

的目的。

4

数据分析功能主要是对

）数据分析

AJAX技术框架中的数据进行多维

度分析和参数计算，并通过迭代管理实现数据分析的机制。设

计人员可以通过前期jQuery脚本运行，明确网页内部的统计区

间、统计量和统计间隔，实现对AJAX技术框架数据的多维度分

析，清晰反映页面加载性能。通过数据分析层，强调对页面历

史数据的获取，快速查询用户的真实请求，使用户更加直观地

了解到页面加载的趋势，准确把握网页结构设计中存在的问

题，保证数据分析结果更加科学，更具有实际价值。

3.5通过jQuery和AJAX初始化加载页面数据

jQuery

$.ajax({

发送AJAX请求的语法格式如下：

url:"

type:"

请求地址

请求方式

",

",

dataType:"

data:"请求参数",

success:"

error:

服务器处理正常后对应的回调函数

服务器返回数据类型",

",

});

“服务器出错对应的回调函数”

以用户注册页面为例，通过jQuery和AJAX初始化加载页

面数据过程如下：

//加载初始化数据

function

//

initData(){

$.ajax({

创建一个AJAX对象

type:'GET',

dataType:

url:"../user/center",

"json",

/*data:{

email:$("#email").val(),

password:$("#password").val()

//AJAX

},*/

事件成功处理函数

212

多媒体技术及其应用

第16卷第36期(2020年12月)

success:function(res){

alert("

if(=="0"){

加载数据");

(res);

alert();

var

$("#name").attr("value",

info=;

$("#email").attr("value",

);

$("#password").attr("value",

);

$("#phone").attr("value",

rd);

$("#address").attr("value",

);

$("#birthday").attr("value",

s);

}else{

$("#picture").attr("src",);

ay);

alert("

},

}

用户信息不合法，或邮箱已被占用");

//AJAX事件出错处理函数

//$("#test").html("

error:function(){

alert("发生错误

发生错误

");

:"+);

});

}

经过注册功能页面加载速度数据比较，

}

在同等网络带宽状

况下，Web基础上jQuery和AJAX技术结合的页面加载速度比

传统Web技术的页面加载速度提升25%-30%。

4总结

综上所述，本文以jQuery在AJAX技术框架中页面加载的

分析为例，

jQuery

式，提高网页页面的加载速度，

和AJAX

分析了

技术相结合，

jQuery和AJAX

既能简化

技术相结合的具体应用。将

保证程序的简单性和可读性；

AJAX技术的开发程序模

还

能使用户能更方便的处理HTML，方便为网站提供AJAX交互，

改变了传统Web应用和开发模式，提供了全新的用户上网

体验。

参考文献：

[1]梅元昭.基于Jquery课程网站的设计[J].无线互联科技

[2]

(10):39-41.

,2019

刘汀.基于jQuery的Web

[3]

科技

彭胜

,2017(21):106-107.

前端组件的应用研究[J].无线互联

.基于JQuery

[4]

属加工

框架的报表系统数据交互应用[J].有色金

孙仕云

,2018,47(3):55-56,66.

267-268.

.WEB系统前端开发技术分析[J].通讯世界,2017(12):

【通联编辑：闻翔军】

本栏目责任编辑：唐一东