【基于Ajax的OA系统设计与应用】 嵌入式系统设计与应用
摘要: Ajax,它的全名是“异步java与XML”,是一种开发动态网页的新技术,主要原理是运用JavaScript对网页DOM进行动态显示及交互控制,并使用XML和XSLT进行数据交换和相关操作。本文将重点介绍Ajax技术的基本原理及OA系统实现方法。
关键词: Ajax J2EE 办公自动化
中图分类号: 文献标识码:A文章编号:1007-9416(2010)05-0000-00
1 引言
随着互联网的迅速发展,动态网页技术应用日趋广泛,诸如OA系统等一些需求功能多、并发访问量大、网络数据传输量大的业务系统越来越普及,但传统的同步交互的B/S模式,存在以下缺点:
(1)Web 服务器为了服务更多的客户,对客户浏览器的响应是无状态的,即请求服务的浏览器服务后,一般情况下 Web 服务器上不再存放客户的相关信息,因为保存客户信息有可能严重影响Web服务器的工作效率。
(2)网页的重载造成页面闪烁。客户端在等待服务器响应时会阻塞用户,用户会感觉操作不流畅,同时也会浪费网络带宽。
(3)操作界面缺乏人性化,不符合用户使用习惯。
(4)增加服务器负担。在多人次频繁的前端请求,会增加服务器负担。
2Ajax简述
AJAX的全称为"Asynchronous JavaScript and XML"( 异步 JavaScript
和 XML), 是使用客户端脚本与 Web服务器交换数据的Web 开发技术。AJAX 本身并不是一门新的语言或技术,而是几种相关技术的组合,充分发挥各自的作用。
Ajax基本原理:
(1) 基于 XHTML 和 CSS 标准的表示;
(2) 使用JavaScript操作DOM(Document Object Model,文档对象模型)进行动态显示及交互控制;
(3) 使用隐藏的iframe做异步执行,发送客户端请求及用JavaScript显示响应结果;
(4) 使用XMLHttpRequest与Web服务器实现异步数据读取;
(5) 使用XML和XSLT进行数据交换与处理;
Ajax 包括了JavaScript、XHTML、CSS、DOM、XML、XSTL、XMLHttpRequest。Ajax使用 XHTML 和 CSS进行标准化表示, 使用 DOM实现动态显示和交互, 使用 XML 和 XSTL 进行数据交换与处理, 使用XMLHttpRequest 对象进行异步数据读取, 使用 JavaScript 绑定和处理所有数据。
3 Ajax架构
传统web浏览器与服务器之间的请求/响应用户动作,是采用同步方式进行通讯;而Ajax是一种三层架构的异步通讯,在浏览器(即用户端)和服务器端增加了Ajax引擎,改变了传统的web交互模式。并不是所有的用户请求都提交给服务器,像―些数据验证和数据处理等都交给 Ajax 引擎处理,只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。这样就把一些服务器负担的工作转嫁到客户端,利用客户端闲置的处理能力来处理, 减轻服务器和带宽的负担, 从而达到节约成本的目的。用户通过客户端执行动作,例如按下按钮或输入文字,触发JavaScript函数。Ajax引擎对服务器发出http请求,而在Ajax引擎工作的同时,这个JavaScript呼叫已经回传给呼叫者,这样的动作称为异步通讯。当Ajax引擎得到http 响应时,Ajax引擎会直接呼叫对应函数通知浏览器在使用者界面做出相应显示。
4 Ajax技术在OA系统中的应用
OA系统自2008年建成后,将大大缩短各项行政事务处理时间,提高工作效率,推动行政管理部门信息化建设水平。整个系统遵循J2EE规范、模块化设计,采用通用性较强的关系数据库SQLserver2005构建。AJAX客户端核心代码如下:
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
var objXMLDoc=new ActiveXObject("Microsoft.XMLDOM");
objXMLDoc.loadXML(req.responseText);
eval("if(objXMLDoc.firstChild)"+method+"(objXMLDoc.firstChild.nextSibling);");
} else {
//alert("HTTP error: "+req.status);
function executeAjaxCommand(url,postData,handleMethod)
{
var req = newXMLHttpRequest();
req.onreadystatechange =handleAjaxResult(req,handleMethod); req.open("POST", url, true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.setRequestHeader("charset","utf-8");
req.send(postData);
}
5结语
通过实际应用可以看出,web开发中应用Ajax,减少了页面重载次数,减轻了服务器负担,整个系统将更加人性化。随着web技术的不断发展和进步,Ajax必将成为web程序开发的主流技术。
参考文献
[1] 2005.02,JesseJames Garrett ,AJAX:A New Approachto WebApplications.https:// www.省略/publications/essays/archives/000385.php.省略/.
[3] CFAjax = ColdFusion+Ajax,https://www.省略/cfajax/.
作者简介:唐冲,男,1973年9月10日出生。大学本科学历,中学信息技术一级教师。从事高中信息技术教育和研究。单位:四川省南充市第一中学.