当前位置: 主页 > 论文下载 > 工学论文 >

AJAX 技术在WEB 开发中的应用研究与实践

作者：陈翠红日期：2014-06-20 10:35 来源：未知

安徽工商职业学院 230041
【文章摘要】
随着信息化的不断普及，人们对
Web 的应用日益广泛，但传统的Web
仍存在着不足，当用户向服务器发
送请求，服务器需要分析请求并执
行任务，然后给用户返回结果，当服
务器负载较小时，当然不存在问题，
但是当服务器负载较大时，让用户
体验不连贯，不能像桌面应用程序
那样快速、便捷。为了满足用户体验
需求，AJAX 技术应运而生，它使得
用户从浏览器就像桌面程序一样即
时响应，使得用户从等待中解脱出
来。
【关键词】
AJAX 技术; 异步通信;WEB;AJAX
引擎
1 AJAX 的工作原理
普通的B/S 结构的网站应用程序，浏
览器与服务器的通信是同步的。服务器在
处理用户提交的HTTP 请求时，服务器会
根据请求处理并运行业务逻辑，然后从后
台数据库提取数据，生成用户所需要的
HTML 页面。这样，哪怕只是一次很小的
交互，只需要从服务器端获取一个简单的
数据，都需要返回完整的一个HTML 页
面，这个过程需要用户耗费时间去等待，
因为一般的B/S 结构的网站应用程序，不
能像桌面应用程序的C/S 结构那样快速
响应。AJAX 技术能实现服务器与浏览
器的异步通信，使B/S 结构的应用程序根
据用户输入实现页面快速、实时、局部刷
新，达到桌面应用程序的类似效果，提高
用户体验。
AJAX 的工作原理是在用户和服务
器两者之间加了一个中间层 AJAX 引擎
（AJAX engine），实现用户操作与服务器
响应间异步交互模式。在这种模式下，一
部分用户请求如数据验证和简单的数据
处理请求去交给AJAX 引擎完成，确实需
要服务器端完成的请求，才由AJAX 引擎
向服务器提交，减少了页面重载次数，使
用户感觉所有的操作很快得到了响应，交
互性大大增强。AJAX 应用模型如图1。
2 AJAX 技术应用举例
结合AJAX 的应用模型展开实践分
析。以选课系统中添加实体信息为例说
明。
(1) 搭建添加界面（如图2 所示）。
(2) AJAX 引擎编译解析数据
$("#btnAdd").click(function(){
var name=$("#name").val();
var number=$("#number").val();
var grade=$("#grade").val();
var department=$("#department").
val();
var ajax={};
ajax.type="post";
ajax.data="name="+name+"&number
="+number+"&grade="+grade+"&departm
ent="+department;
ajax.url="../Ajax/classAdd.ashx";});
(3) 服务器端处理数据：
p u b l i c v o i d P r o c e s s R e q u e s t
(HttpContext context) {
string name = context.Request.
Form["name"];
i n t n u m b e r = C o n v e r t . T o I n t 3 2 (
context.Request.Form["number"]);
string grade = context.Request.
Form["grade"];
string department = context.Request.
Form["department"];
i n t c o u n t = h e l p e r .
ExecuteNonQuery(string.Format("insert
into Class(ClassName,ClassNumber,Grade
Name,DepartmentName) values('{0}',{1},'{2
}','{3}')",name, number,grade,department))
if (count > 0)
{ H t t p C o n t e x t . C u r r e n t . R e s p o n s e .
Write("yes");
return;}
H t t p C o n t e x t . C u r r e n t . R e s p o n s e .
Write("no");
return;}
(4)AJAX 引擎解析服务器端回传结
果，并将解析结果传递到客户端。
ajax.success=function(result)
{if(result=="yes")
{parent.window.returnValue="OK";
alert(" 添加成功!");
window.close(); }
else
{alert(" 信息失败，请重试！ ");}};
ajax.error=function(){alert(" 信息添加失败，请重试！ ");};
3 结束语
AJAX 技术相对于传统WEB 技术，
拥有以下优势：
3.1 可以解决海量信息与服务器交互
的问题，提高访问速度；
3.2 增强用户体验，提高访问流畅性
和查询效率；
3.3 提高系统健壮性，可扩展性，节省
移动方式上网用户的通讯费用，降低带宽
和用户成本。
【参考文献】
[1] 孙珊珊,A JA X 技术在随机抽
题系统中的应用[J], 绥化学院
报,2012(10)191-192
[2] 王宏旭, AJAX 技术及其在WEB
应用程序开发中的应用[J], 硅
谷,2013(9)77-78
[3] 纪根宁, 基于．NET 的 Ajax 技
术研究与实现[J], 水力采煤与管
道运输,2013(3)16-20
[4] 翁志宁, 基于Ajax 框架WEB
应用系统研究与设计[J], 科技
风,2012(3)60-61