admin 管理员组

文章数量: 1184232


2024年4月13日发(作者：ignorer)

计算机光盘软件与应用　

软件设计开发　

Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐｌｉｃａｔｉｏｎｓ　２０１０年第４期　

浅析ＡＪＡＸ在Ｗｅｂ中的应用　

丁明浩　

（天津工业大学，天津３０００００）　

摘要：传统的ｗｅｂ应用在用户交互性方面存在响应速度慢的缺点，导致用户体验较差。介绍了ＡＪＡＸ的概念和工作原理，　

通过ｗｅｂ实例对ＡＪＸＡ在Ｗｅｂ中的应用进行分析，证明了ＡＪＡＸ技术具有在客户端与服务器之间进行异步通信的能力，可以有　

效地减少客户端的响应时间，更友好地改善了用户的实时操作体验。　

关冀词：ＡＪＡＸ；异步；Ｗｅｂ；交互性　

中圉分类号：ＴＰ３１２　文献标识码：Ａ　文章鳊号：１００７－９５９９（２０１０）０４－０１２６－０２　

ＡＪＡＸ　Ａｐｐｌｉｃａｔｉｏｎ　ｉｎ　Ｗｅｂ　

Ｄｉｎｇ　Ｍｉｎｇｈａｏ　

（Ｔｉａｎｊｉｎ　Ｐｏｌｙｔｅｃｈｎｉｃ　Ｕｎｉｖｅｒｓｉｔｙ，Ｔｉａｎｊｉｎ　３０００００，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ：Ｔｈｅ　ｔｒａｄｉｔｉｏｎａｌ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ　ｉｎ　ｔｈｅ　ａｓｐｅｃｔｓ　Ｏｆ　ｕｓｅｒ　ｉｎｔｅｒａｃｔｉｏｎ　ｐｒｅｓｅｎｃｅ　ｓｈｏｒｔｃｏｍｉｎｇｓ　ｏｆ　ｓｌｏｗ　ｒｅｓｐｏｎｓｅ，ｒｅｓｕｌｉｔｎｇ　ｉｎ　ｐｏｏｒ　

ｕｓｅｒ　ｅｘｐｅｒｉｅｎｃｅ．Ｉｎｔｒｏｄｕｃｅｄ　ｔｈｅ　ｃｏｎｃｅｐｔ　ｏｆ　ＡＪＡＸ　ａｎｄ　ｉｔｓ　ｗｏｒｋｉｎｇ　ｐｒｉｎｃｉｐｌｅ，ａｎａｌｙｓｉｓ　ｔｈｒｏｕｇｈ　ｔｈｅ　Ｗｅｂ　ｅｘａｍｐｌｅｓ　ｕｓｉｎｇ　ＡＪＡＸ　ｉｎ　Ｗｅｂ　

ａｐｐｌｉｃａｔｉｏｎｓ，ｐｒｏｖｅｄ　ｔｈａｔ　ｔｈｅ　ＪＡＡＸ　ｔｅｃｈｎｏｌｏｇｙ　ｈａｓ　ｈｔｅ　ａｂｉｉｌｔｙ　ｂｅｔｗｅｅｎ　ｔｈｅ　ｃｌｉｅｎｔ　ｎａｄ　ｓｅｒｖｅｒ　ｆｏｒ　Ａｓｙｎｃｈｒｏｎｏｕｓ　ｃｏｍｍｕｎｉｃａｔｉｏｎ，ｒｅｄｕｃｅ　ｔｈｅ　

ｃｌｉｅｎｔ　ｒｅｓｐｏｎｓｅ　ｔｉｍｅ　ｅｆｆｅｃｔｉｖｅｌｙ，ｔｏ　ｉｍｐｒｏｖｅ　ｈｔｅ　ｕｓｅｒ　ｅｘｐｅｒｉｅｎｃｅ　ｏｆ　ｒｅａｌ—ｔｉｍｅ　ｏｐｅｒａｔｉｏｎ　ｍｏｒｅ　ｆｒｉｅｎｄｌｙ．　

Ｋｅｙｗｏｒｄｓ：ＡＪＡＸ；Ａｓｙｎｃｈｒｏｎｏｕｓ；Ｗｅｂ；Ｉｎｔｅｒａｃｆｉｏｎ　

一

、

引言　

客户浏览器赫　

在互联网时代，随着网络的高速发展，一些弊端也随之出现。　

用户界ｉＲｉ　

如：等待服务器响应或屏幕刷新的时间过长等等。如何使用户能获　

ｌ　ｔ　

得快速的响应，体验交互性带来的乐趣，成为目前Ｗｅｂ应用需要解　

一ｓ。却　求Ｈ

决的问题。　

｝Ｌ＋ｃｓｓ歉据　

ＡＪＡＸ（Ａｓｙｎｃｈｒｏｎｏｕｓ　ＪａｖａＳｅｒｉｐｔ　ａｎｄ　ＸＭＬ）技术的出现有效　

Ａｊａｘ引擎　

地缓解了这一问题，它不但能使用户得到更好的体验，而且能够减　

…　业

轻服务器的负担。　

卡辑处理　

‘　ｌ　

（一）ＡＪＡＸ技术概述　

ｌ　Ｗｅｂ服务器　

ＡＪＡＸ是基于浏览器的应用技术，是由ＪａｖａＳｃｒｉｐｔ、ＸＭＬ、ＤＯＭ　

Ｊｒ　Ｔ　

和ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ等多种技术组成的一种综合应用。　

数据存ｆｉｔ　

ＡＪＡＸ包含的技术：　

服务器端　

１．使用ＸＨＴＭＬ和ＣＳＳ来编写结构化的页面来实现表现层，并采　

图１　ＡＪＡＸ工作原理流程　

用ＤＯｉＩｆ技术进行动态操作。　

１．创建Ｘ￣ＨｔｔｐＲｅｑｕｅｓｔ对象，向服务器端发送请求；　

２．使用ＸＭＬ和ＸＳＬＴ进行数据交互操作。　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象在大部分浏览器上已经实现而且拥有一个简　

３．采用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ与服务器进行异步通信。　

单的接口，允许数据从客户端传递到服务端，但并不会打断用户当　

４．使用ＪａｖａＳｃｒｉｐｔ对它们进行绑定。　

前的操作，使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ传送的数据可以是任何格式。　

（二）ＡＪＡＸ技术的基本工作原理　

２．服务器处理完请求后，调用回调函数：　

ＡＪＡＸ技术的核心内容就是使用户操作与服务器之间的响应异　

３．回调函数解析服务器端返回的处理结果，然后更新到页面所　

步化。为此，它就相当于一个中间层，处理客户端和服务器端的请　

需部分。　

求，利用Ｊａｖａｓｃｒｉｐｔ程序，通过调用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的属性　

二、ＡＪＡＸ技术的特点　

ＡＪＡＸ主要的特点是为Ｗｅｂ开发提供异步数据传输和交换方式，　

和方法来与服务器端进行数据交互，然后通过ＤＯＭ来解析处理ＸＭＬ　

在不刷新页面的情况下与服务器进行业务处理。每一种技术的出现　

文档和更新ＨＴＭＬ页面的相关内容。　

难免会存在一些缺点，ＡＪＡＸ技术也同样具有自己的优点和不足。　

（－－）优点　

ｉ．减轻服务器的负担。ＡＪＡＸ的原则是“按需获取”，最大程度　

的减少冗余请求。　

２．更新部分页面，减少响应时间。ＡＪＡｘ使用ＸＩ￣ＨＴＴＰ对象发送　

请求并得到服务器响应，在不重新载入整个页面的情况下，用　

ＪａｖａＳｃｒｉｐｔ操作Ｄ伽最终更新页面，更新相应部分的内容时间非常　

短。　

３．客户端能完成部分服务器端的功能。利用客户端闲置的能力　

来处理，减轻服务器和网路的负担，减少响应时间。・　

一

】２６—　

计算机光盘软件与应用　

２０１０年第４期　

４．将Ｗｅｂ中的应用与页面显示分离。　

（二）不足　

Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐｌｉｃａｔｉｏｎｓ　

建立连接　

软件设计开发　

ＸＨＲ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ＝ｐｒ０ｃｅｓｓＲｅｓｐｏｎｓｅ；　／／指定响应　

１．浏览器对ＡＪＡＸ的兼容性。ＡＪＡＸ大量使用了ＪａｖａＳｃｒｉｐｔ等相　

关技术，能否执行取决于浏览器的支持。虽然很多浏览器支持ＡＪＡＸ，　

但提供ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ的方式不尽相同，所以使用ＡＪＡｘ的程序必　

须针对各个浏览器进行测试。　

函数　

ＸＨＲ．ｓｅｎｄ（　ａｎｓｗｅｒｓ＝　＋ａｎｓｗｅｒｓ）：　／／发送请求　

ｓｅｔＴｉｍｅｏｕｔ（　ｓａｖｅＡｎｓｗｅｒ（）　，６００００）：　／／定时保存答案　

｝　

２．ＡＪＡＸ只是局部更新页面内容，并没有更新整个页面。网页的　

后退功能是失效的，这就导致用户不清楚现在的数据是否已经更　

新。　

ｆｕｎｃｔｉｏｎ　ｐｒｏｃｅｓｓＲｅｓｐｏｎｓｅ（）　

｛　

／／处理返回信息函数　

ｉｆ（ＸＨＲ．ｒｅａｄｙＳｔａｔｅ＝＝４＆＆ＸＨＲ．ｓｔａｔｕｓ＝＝２００）／／判断对象　

３．Ａｊａｘ对流媒体的支持较弱。　

三、ＡＪＡＸ技术的应用　

状态和信息是否成功返回

ｅｌｓｅ　

ｄｏｃｕｍｅｎｔ．ｇｅｔＥ１ｅｍｅｎｔＢｙＩｄ　

（　ｓａｖｅｌｎｆｏ　）．ｖａｌｕｅ＝ＸＨＲ．ｒｅｓｐｏｎｓｅＴｅｘｔ：　

ＡＪＡＸ技术的核心理念是用异步交互替代传统的同步交互。目　

前，ＡＪＡＸ应用最普遍的领域是ＧＩＳ—Ｍａｐ方面，Ｇｏｏｇｌｅ公司成功地将　

ＡＪＡＸ技术应用到ＧｏｏｇｌｅＭａｐ中，用户使用ＧｏｏｇｌｅＭａｐ浏览地图时，　

首先显示的只是局部的地区，如果要查看全图，需要对地图进行放　

大操作：　如果想看其余的地方，需要对地图进行平移。由于应用　

了ＡＪＡＸ技术，使得地图每次都在原有数据的基础上以增量方式显　

ｗｉｎｄｏｗ．ａｌｅｒｔ（　答案保存失败。　）：　

｝　

这样处理的好处就是学生最后提交的时候，不会给服务器造成　

沉重的负担，因为在此之前学生的数据就已经实时的提交到数据库　

里了。　

五、结语　

示。这样用户不用等待页面刷新就能看到其他的区域了。　

四、应用实例　

考试系统中数据的异步处理　

从以上实例可以看出：利用ＡＪＡＸ来做ｗｅｂ开发，能够减少页面　

的重载次数，降低响应时间；客户端还能处理一些服务端的任务，减　

轻服务器的负担。随着ｗｅｂ应用的发展，ＡＪＡｘ技术的不断更新，用　

户将会得到更好的体验。　

参考文献：　

ＡＪＡＸ技术应用在考试系统中可以较好地解决在考试过程中出　

现的响应不及时、页面刷新慢等问题，实现按需存取，自动交互与　

响应请求，减少页面的重复加载。　

为了避免学生在考试结束后一起提交时产生网络堵塞问题，利　

用ＡＪＡＸ技术，在考生做题的过程中，对考生的答案进行实时保存。　

通过ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象在后台自动向服务器发送数据，当考生　

改变选择答案时进行实时跟踪，进行数据覆盖。　

ｆｕｎｃｔｉｏｎ　ｓａｖｅＡｎｓｗｅｒ（）　

…１陈锋敏，罗田，李颖智．程序员突击——Ａｊａ】（原理与系统开发．北京：　

清华大学出版社，２００９　

［２】王星，潘郁基于ＡＪＡｘ技术的Ｗｅｂ模型在网站开发中的应用研究　

田．微计算机信息，２００６　

｛ｖａｒ　ａｎｓｗｅｒｓ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（　ａｎｓｗｅｒ　）：　／／　

获取考生的答题数据　

ＸＨＲ＝ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；　／／创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

［３】刘志忠．ＡＳＰ．ＮＥＴ　ＡＪＡｘ编程参考手册．北京：清华大学出版社，２００９　

ｆ４］周雯．Ａｊ　，ＲＩＡ与Ｗｅｂ开发程序员教程．北京：电子工业出版　

社．２０１０　

对象　

【５￣ｅｓｅ　Ｊａｍｅｓ　Ｇａｒｒｅｔｔ．Ａｊ　：Ａ　Ｎｅｗ　Ａｐｐｒｏａｃｈ　ｔｏ　ｗｅｂ　ＡｐＰｈｃａｔｉｏｎｓ　Ｔｈｅ　

／／与服务器　

ＸＭＩ，　

ＸＨＲ．ｏｐｅｎ（　ＰＯＳＴ　，　ｓａｖｅＡｎｓｗｅｒ．ｄｏ　，ｔｒｕｅ）：　

（上接第１２１页）　

使用磁保持继电器和相应的驱动电路，它能带动更大功率负载，自　

身功耗小，确保系统动作时能可靠运行。　

这里值得注意的是电流检测电阻的使用，一般都使用康铜丝，　

四、应用效果　

经过实际现场应用该产品能自动识别房间内的用电情况，控制　

热得快、电炉、电暖器、电饭煲、电热锅等大功率恶性负载的使用，　

在插上恶性负载后能在几秒内断电，拔除恶性负载后能立即自动恢　

复供电。对电脑、日光灯、充电器等日常用电不加限制，从而大大　

地降低了火灾的发生概率，起到了安全节能的作用！产品控制的型　

号有２００瓦和３００瓦选择，设定的功率是对线性负载的功率限制，　

对超过设定功率的电脑、电视、普通照明等不限制，从而有效的方　

便了大中院校和单位集体宿舍的管理，得到了一致好评。　

参考文献：　

但是康铜丝在长时间使用时会被氧化，使电阻值发生变化，影响检　

测精度。我这里采用密闭式合金取样电阻，保证了对供电回路中用　

电器电流信号的采集精确度。　

三、软件设计　

单片机对积分电路的电压输出进行Ａ／Ｄ转换，并判断是否超过　

标准电压值，确定是否有非法电路接入。如通过几个周波的判断确　

定有非法电路接入，那么再判断该非法电路是否进行了标定，如果　

标定了允许使用。否则驱动继电器断开电源进入延时程序之后接通　

电源，当多次断电之后，即非法电器一直在使用时，则永久断电需　

要手动通电。　

【１】张湘伟，骆少明．小波分析在测试信号分析中的应用Ｕ】＿应用数学和　

力学，１９９８，３　

这里软件可以根据检测到的积分值的变化律来自动调整延时　

斩波电路的延时时间，最终得到～个相对合理的积分宽度，确保积　

［２】李昂．智能负载识别器的设计Ⅱ】．微机与应用，２００５，４：２１～２２　

［３郑宇，３］姚加飞．基于谐波分离的学生公寓负栽特性识别盯】．电子应　

用，２００７，２６，８　

分值能反映线性电阻的大小。还可以通过软件设定标准电压值，它　

用来调整允许通过的线性负载的最大值。软件还提供一个人机交互　

接口可以对一些数值进行设定，如断电延时时间、断电次数、允许　

通过的线性电阻的最大值等。应实际需要还提供了特殊电器的标定　

【５】张重，张道信，姜宝林．学生宿舍总线式限电计量计算机管理系统Ⅱ］　

吉林建筑工程学院学报，２００１，２　

注：本论文是实用新型专利数字式安全用电识别管理装置的成果，　

专利号：ＺＬ　０３２６０２７１．５　

功能，通过通断电的方式就可以标定特定的允许使用的线性电器。　

一

】２７一　


本文标签： 应用 进行 页面 技术 数据

版权声明：本文标题：浅析AJAX在Web中的应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1712970246a614900.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。