AJAX 技术在WEB 开发中的应用研究与实践 - 基础教育 - 2000论文网_论文发表_省级,国家级,核心_发表论文

TOP

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

2013-12-09 09:32:38 来源: 作者:陈翠红【大中小】浏览:0次评论:0条

安徽工商职业学院 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