AJAX+J2EE开发组�l�机构管理系�l�（摘自天极�|�）

�p�涂 — Thu, 20 Apr 2006 01:21:00 GMT

一�?概述

AJAX是今�q�初才问世的新技术，是Asynchronous JavaScript and XML的羃写。它是一�l�开发Web应用�E�序的技术，它�ɋ��览器可以�ؓ用户提供更�ؓ自然的浏览体验。每当需要更新时�Q�客��L��Web��面的修�Ҏ��异步的和逐步增加的。这��P��AJAX在提交Web��面内容时大大提高了用户界面的速度。在��Z��AJAX的应用程序中没有必要长时间等待整个页面的��h��。页面中需要更新的那部分才�q�行更改�Q�如果可能的话，更新是在本地完成的，�q�且是异步的�?br />
J2ee是一�U�用来开发分布式�pȝ��的体�pȝ��构。它主要是用Java�c�d��发业务实体。通过JSP来连接应用服务器�?br />
本文开发一个组�l�机构管理小�pȝ��Q�通过�q�个实例来介�l�如何用Ajax开发WEB应用�E�序。本�pȝ��h��增加、修攏V��删除组�l�机构的功能。同时给机构分配人员�Q�能增加、修攏V��删除�h员�?br />
二�?界面设计

树结构是大多软�g�pȝ��中常采用的结构�Ş式。由于树型结构层�ơ分明、上下��关系清楚、且展开收羃表达信息方便、界面也较美观，所以是大家热衷于用此结构。组�l�机构管理是一般��Y件基本具有的。组�l�机构是指公司的�l�织�l�构。集团公司可包括分公子公司，公司下面又有�U�室。员工归属于所在的公司。系�l�运行后的界面如下：

orgManager.htm是组�l�机构管理的主页面。WEB应用�E�序界面设计是非帔R��要的。如何布局、么��L��l�可直接体现一个�h的设计水�q��?br />
�l�织机构主要包括树结构、组�l�机构编辑、�h员编辑等三大块，如何分成三块呢，然而一般树型结构的�H�体常先二块�Q�树型结构独占一块，另一块又分成上下二部分，上面是机构编码，下面是�h员编码。固可以把页面划分成如下囑�Ş式：

树结构区1	�l�织�~�码�?
	人员��理�?

昄��我们是通过表来实现。这是一个二行二列的表，且第一、二行的左边列合�q�单元格。代码如下：

�Q?TABLE border="1" width="100%" height="100%"�Q?br />
�Q�TR�Q?br />
�Q�TD rowspan="2"�Q�＜FONT face="宋体"�Q�＜/FONT�Q�＜/TD�Q?br />
�Q�TD�Q�＜/TD�Q?br />
�Q?TR�Q?br />
�Q�TR�Q?br />
�Q�TD�Q�＜/TD�Q?br />
�Q?TR�Q?br />
�Q?TABLE�Q?/td>

我们�?区（单元��|��上加上一个DIV�Q�因为DIV可以动态地滚动�Q��ƈ且可以插入其它控件。DIV的id�?divTree"�Q�且风格讄��为溢出时自动滚动�Q�宽与高都�ؓ100%�Q�及满区域。代码如下：

�Q�div id="divTree" style="width:100%; height:100%;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;"�Q?br />
�Q?div�Q?/td>

我们�?区（单元��|��上也加上一个DIV�Q�在DIV里再插入一个表根{��表��g��放下控�g�Q�这很简单，��׃��详细说了�?br />
我们�?区（单元��|��上加上一个DIV。此DIV的id�? divContent "�Q�且风格讄��为竖直溢出时自动滚动�Q�宽与高都�ؓ100%�Q�及满区域，此DIV用来装蝲人员信息;在DIV里再插入一个表�? 此table的id�? tbList "�Q�是用来输入、显�C�Z�h员作息，同时在此表中插入一些如checkbox 、text、select�{�控件。说明，表的�W�二列是用来放�h员唯一�~�号的，不显�C�。代码如下：

�Q�div id="divContent" style="height:100%; overflow-y:auto;" width="100%"�Q?br />
�Q�table id="tbList" border="1" width="100%"�Q?br />
�Q�tr seqNo="1"�Q�＜td�Q?br />
�Q�table border="1" width="100%"�Q?br />
�Q�tr�Q?br />
�Q�td width="5%"�Q�＜input type="checkbox" value="on"�Q�＜/input�Q?�Q?td�Q?br />
�Q�td width="0%" style="display:none"�Q?�Q�input type="text" size="20"�Q�＜/input�Q�＜/td�Q?br />
�Q�td width="40%"�Q�＜input type="text" size="20"�Q�＜/input�Q�＜/td�Q?br />
�Q�td width="25%"�Q?br />
�Q�select size="1" name="D1"�Q?br />
�Q�option value="0"�Q�男�Q?option�Q?br />
�Q�option selected="true" value="1"�Q�女�Q?option�Q?br />
�Q?select�Q?br />
�Q?td�Q?br />
�Q?tr�Q?br />
�Q?table�Q?

�Q?td�Q�＜/tr�Q?br />
�Q?table�Q?br />
�Q?div�Q?

三�?前端��面的主要编�?br />
1. 树的实现

在WEB上实现树�l�构�Q�同��h��们是通过Ajax来实现的。树上可以显�C��定义的图标，可以插入、删除、结炏V��ƈ且结点可��L��U�d��。这里我们不重点讲树的实现技术，我们已经��装好了�Q�你只要按要求去改动��是了�?

1) 键接树型文�g

在＜head�Q�与�Q?head�Q�之间键接我们的与树有关的文�? 代码如下�Q?br />

�Q�link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css"�Q?br />
�Q�script src="js/dhtmlXCommon.js"�Q�＜/script�Q?br />
�Q�script src="js/dhtmlXTree.js"�Q�＜/script�Q?

2) 装蝲�Ҏ��

在页面的文档打开时装载自定义�Ҏ��, preLoadImages�Ҏ��实现树控件的图标定义�Q�doOnLoad实现树控件的图标定义代码如下�Q?br />

�Q�body onload="preLoadImages();doOnLoad();"�Q?/td>

3) �~�写�Ҏ��

//doOnLoad实现装蝲�q�显�C�树。设�|�树属性等�?br />
function doOnLoad(){

　OrgTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);

　//dhtmlXTreeObject是树对象�Q�通过新徏对象�Q�指定树昄��的DIV可定义树�?br />
　OrgTree.setImagePath("imgs/");//讄��树的囄��所在位�|?br />
　OrgTree.setDragHandler();//讄��树结�Ҏ��?br />
　OrgTree.enableDragAndDrop(true) //讄��树结�Ҏ��否可拖动

　OrgTree.setDragHandler(myDragHandler); //讄��树结�Ҏ��动时所执行的方�?br />
　OrgTree.setOnClickHandler(mySelectHandler); //讄��树单��L��所执行的方�?br />
　//OrgTree.setXMLAutoLoading("Org.jsp");//装蝲树结�Ҏ��据。数据来源如Org.jsp所�q�回的XML格式的字�W�串�Q�数据是动态装载，且当展开时才装蝲�?br />
　OrgTree.loadXML("root.xml?0");//装蝲树结�Ҏ��据。数据来源root.xml文�g�Q��ƈ且从xml文�g的ID号�ؓ0处读取数据�?br />
　//OrgTree.loadXML("Org.jsp");//装蝲树结�Ҏ��据。数据来源如Org.jsp所�q�回的XML格式的字�W�串,�q�且是一�ơ性全部装载数据�?

}

//preLoadImages�Ҏ��实现树控件的图标定义

function preLoadImages(){

　var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif",

"minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif",

"magazine_open.gif","magazine_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif")

　var imAr = new Array(0);

　for(var i=0;i�Q�imSrcAr.length;i++){

imAr[imAr.length] = new Image();

imAr[imAr.length-1].src = "imgs/"+imSrcAr[i]

　}

}

�l�织��理的实�?br />
�l�织可以增加、删除、编辑。同时当选择树结�Ҏ��应该把组�l�显�C�出来供�~�辑�Q�查看。�ؓ了实现这些功能，你只要按要求��L��动就是了�?br />
1) 全局变量的定�?br />
许多地方我们要用��C��些公共变量，我们在＜script�Q�与�Q?script�Q�之间定义全局变量, 代码如下�Q?br />

var OrgTree = null; //�l�织树Dom

var nextSeq = 0;//人员��理的顺序号�Q�流水号�Q?br />
var personDom;//人员Dom

var CurrNodeId;//当前�l�点Id

2) 初始�?br />
当页面打开时我们要控�g好那部分该显�C�，那部分要隐藏。且对全局变量的赋值等,�l�织�c�d��装蝲。在��面的文档打开时装载自定义�Ҏ��init�Q�）, init�Ҏ��实现初始化�?br />

�Q�body onload="init();"�Q?/td>

init�Ҏ��实现如下�Q?br />

function init(){

　//定义personDom��Z��个XMLDOM'对象

　personDom= new ActiveXObject('Microsoft.XMLDOM');

　personDom.async = false;

　//定义stylesheet��Z��个XMLDOM'对象�Q�且stylesheet为personDom��定昄��风格

　stylesheet = new ActiveXObject('Microsoft.XMLDOM');

　stylesheet.async = false;

　stylesheet.load("addOrgPerson.xsl"); //装蝲stylesheet的风格定义文�?br />
　//装蝲�l�织�c�d��数据

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=GetOrgType", false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

　retXml=xmlhttp.responseText;

　// alert(retXml);

　//把组�l�类型插入下拉列表控件中

　var OrgDoc = new ActiveXObject('Microsoft.XMLDOM');

　OrgDoc.async = false;

　OrgDoc.loadXML(retXml);

　var root = OrgDoc.documentElement;

　oNodeList = root.childNodes;

　txtType.options.length =oNodeList.length;

　for (var i=0; i�Q�oNodeList.length; i++)

　{

Item = oNodeList.item(i);

var OrgTypeId=Item.childNodes(0).text;

var OrgTypeName=Item.childNodes(1).text;

txtType.options[i].value=OrgTypeId;

txtType.options[i].text=OrgTypeName;

// txtType.options[0].

　}

}

3) �~�写树拖动及选择�l�点的方�?br />

// myDragHandler实现树结�Ҏ��动时重新指定父子关系�?br />
function myDragHandler(idFrom,idTo){

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=moveOrg&orgId=" + idFrom + "&newparentOrgId=" + idTo, false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

　retXml=xmlhttp.OrgponseText;

　return true;

}

// mySelectHandler实现选择树结点对�pȝ��的控�Ӟ��同时昄��l�织信息及该�l�织下的人员�?br />
function mySelectHandler(id){

　tbOrg.style.display="block";

　divOrgMemo.style.display="none";

　divOrgInfo.style.display="none";

　if(id==1)

　{

divOrgMemo.style.display="block";

div1.style.display="none";

div2.style.display="none";

div3.style.display="none";

divContent.style.display="none";

div5.style.display="none";

　}

　else

　{

divOrgInfo.style.display="block";

div1.style.display="block";

div2.style.display="block";

div3.style.display="block";

divContent.style.display="block";

div5.style.display="block";

　}

　CurrNodeId=id;

　//装蝲�l�织信息�q�显�C�在�~�码和名�U�的文本控�g上�?

　loadOrg(id);

　//装蝲某组�l�下人员信息

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=GetPerson&orgId=" + id, false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

　retXml=xmlhttp.responseText;

　personDom.loadXML (retXml);

　//�l��h员信息的每行加上序号

　for(var i=0; i�Q�personDom.documentElement.childNodes.length; i++){

personDom.documentElement.childNodes[i].setAttribute("seqNo", nextSeq);

nextSeq++;

　}

　//人员信息昄��在divContent上面

　divContent.innerHTML = personDom.transformNode(stylesheet);

};

//装蝲�l�织信息�q�显�C�在�~�码和名�U�的文本控�g上�?br />
function loadOrg(OrgId){

　if(OrgId == null){

OrgId = OrgTree.getSelectedItemId();

　}

　if(OrgId == ""){

tbOrg.style.display = "none";

return;

　}

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=loadOrg&OrgId=" + OrgId, false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

　retXml=xmlhttp.responseText;

　var OrgDoc = new ActiveXObject('Microsoft.XMLDOM');

　OrgDoc.async = false;

　OrgDoc.loadXML(retXml);

　if(OrgId != 1){

txtCode.value = OrgDoc.selectSingleNode("http://OrgCode").text;

txtName.value = OrgDoc.selectSingleNode("http://OrgName").text;

　}

　tbOrg.style.display = "block";

}

4) 建立�l�织

�l�织建立主要是通过调用XMLHTTP对象来实现。我们主要学会如何调用XMLHTTP。组�l�徏立应该在后台实现�Q�把�l�织信息插入数据库中。这里我们通过JSP来实现。我们的Org.jsp 文�g中有个createOrg�Ҏ��Q�该�Ҏ��传递一个父ID�?br />

function createOrg(parentOrgId){

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=createOrg&parentOrgId=" + parentOrgId, false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

　retXml=xmlhttp.responseText;

　var orgId = (new Number(retXml)).toString();

　return orgId;

}

5) 删除�l�织

�l�织删除同样是调用Org.jsp 文�g中的deleteOrg�Ҏ��来实玎ͼ�该方法传递所删除的结点ID�?br />

function deleteOrg(){

　var OrgId = OrgTree.getSelectedItemId();

　var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　xmlhttp.open("POST","Org.jsp?mode=deleteOrg&OrgId=" + OrgId, false);

　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　xmlhttp.send();

}

6) �~�辑�l�织

�l�织修改是调用Org.jsp 文�g中的modifyOrg�Ҏ��来实玎ͼ�该方法传递所修改的结点ID。同时修改的数据通过自定义的XML格式的字�W�串传�?�q�时通过send字符串来实现。修改前数据一律要验证其合法性，�q�提�C�错误信息�?br />

3. 人员��理的实�?br />
人员可以增加、删除、编辑。同时当选择树结�Ҏ��应该把�h员显�C�出来供�~�辑、查�?.....

1) 增加人员

人员增加实现的原理是在personDom中加入结点peorsone�Q�该�l�点相当于表的一行，讄��属性。同时在peorsone中不�l�地加入其它�l�点�Q�代表数据库的字�D�，且必��M��XLT文�g的标号同名。这些结点相当该行的列。最后在表中插入一行，行上插入一列，�q�显�C�Z��?br />

function addPerson(){

　var seqNo = nextSeq;

　nextSeq++;

　var peorsonNode = personDom.createNode("1", "peorsone","");

　peorsonNode.setAttribute("isNew", "Y");

　peorsonNode.setAttribute("isDelete", "N");

　peorsonNode.setAttribute("seqNo", seqNo);

　personDom.documentElement.appendChild(peorsonNode);

　var PersonId= personDom.createNode("1", "personId", "");

　peorsonNode.appendChild(PersonId);

　var personCode= personDom.createNode("1", "personCode", "");

　peorsonNode.appendChild(personCode);

　var PersonName= personDom.createNode("1", "personName", "");

　peorsonNode.appendChild(PersonName);

　var Sex= personDom.createNode("1", "sex", "");

　peorsonNode.appendChild(Sex);

　var tr = tbList.insertRow(tbList.rows.length);

　tr.setAttribute("seqNo", seqNo);

　var td = tr.insertCell(0);

　td.innerHTML = peorsonNode.transformNode(stylesheet);

}

2) 删除人员

人员删除同样是调用Org.jsp 文�g中的deletePerson�Ҏ��来实玎ͼ�该方法传递所删除的�h员ID。如何确定�h员ID是通过��d��隐藏的ID�Q��ƈ扫描整个表，看那些被选中。这里我们要注意是提供多��w��择的�?br />

3) �~�辑人员

人员修改我们要判定哪些行被修改了。刚增加但没保存的行应该是新增而不是修改的�?br />

四�?XML与XSL文�g设计

XML是种可扩展的标记语言�Q�它��h��开攄��、可扩展的、可自描�q�的语言�l�构�Q�它已经成�ؓ�|�上数据和文档传输的标准。XSLT的目的是��信息内容与 Web 昄��分离�Q�HTML 通过按抽象概念（如段落、重点和�~�号列表�Q�定义显�C�来实现讑֤�独立性。XSLT用来具体昄��控�g�Q�设�|�控仉��根{�?br />
Ajax主要使用XML和XSLT�q�行数据交换与处理�?br />
1. 树信息的XML文�g(见root.xml文�g)

XML是标记语�a��Q�元素必��L��对出现。树�l�构中以tree为根�l�点�Q�以item为结点体�Q�属性text指出�l�点所昄��的文本，id指出唯一的所标识受��?br />

�Q?xml version='1.0' encoding='gb2312'?�Q?br />
�Q�tree id="0"�Q?br />
�Q�item child="1" text="�l�织" id="1" �Q?br />
�Q?item�Q?

�Q?tree�Q?/td>

�q�文件�ƈ不是必要的，只是��Z��pȝ��能独立运行才加的。事实如果连接了后台数据是不需要的。只要吧OrgTree.loadXML("root.xml?0")改�ؓOrgTree.loadXML("Org.jsp")��可以了�?br />
2. 人员信息XML文�g(见peorson.xml文�g)

说明![CDATA[]]可在��M��昄��M��格式的文本，文本中可插入其它��M��字符。这文�g也不是必要的�?br />
3. 人员信息展现的xsl文�g�Q�见addOrgPerson.xsl文�g�Q?br />
xsl文�g同样是XML格式文�g。所以一律遵守XML标准。下面对主要的行讲解�Q?br />

�Q?xml version="1.0" encoding="gb2312"?�Q?br />
//�q�是定义xml文�g的首行。用来指明版本及字符�?br />
�Q�xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript"�Q?br />
//�q�里定义了stylesheet 元素。�ƈ指出其国际命名的�l�织及语�a��?

�Q�xsl:template match="/"�Q?br />
�Q�xsl:apply-templates select="peorsones"/�Q?br />
�Q?xsl:template�Q?br />
//上面是匹配的规则�?/"表示从根�l�开始去匚w��。匹配到下面的peorsones标记。这是正则表辑ּ�有关的学问。我们只要理解就可以�?br />
�Q�xsl:template match="peorsones"�Q?br />
//当匹配上peorsones时所要做的事情�?br />
�Q�table id="tbList" border="1" width="100%"�Q?br />
//定义一个id�?tbList的表根{��此表格是显�C�在WEB上的

�Q�xsl:for-each select="peorsone"�Q?br />
//循环匚w��peorsone

�Q�tr�Q?br />
//定义tbList表格的一行，�q�在行上增加一个叫seqNo的属性名�Q��gؓ匚w��到的seqNo�Q�序��P��

�Q�xsl:attribute name="seqNo"�Q�＜xsl:value-of select="@seqNo"/�Q�＜/xsl:attribute�Q?br />
�Q�td�Q?br />
//定义行上的一列，列又��d��?br />
�Q�xsl:apply-templates select="."/�Q?br />
�Q?td�Q?br />
�Q?tr�Q?br />
�Q?xsl:for-each�Q?

�Q?table�Q?br />
�Q?xsl:template�Q?br />
�Q�xsl:template match="peorsone"�Q?br />
�Q�table border="1" width="100%"�Q?br />
�Q�tr�Q?br />
//定义宽�ؓ5%的一列，在该列上插入一个checkbox控�g

�Q�td width="5%"�Q?br />
�Q�input type="checkbox" value="on" size="10"�Q�＜/input�Q?br />
�Q?td�Q?br />
//定义一个不昄��的列�Q�在该列上插入一个text控�g�Q�text的��gؓ匚w��到的personId�Q��h员Id�Q?br />
�Q�td style="display:none"�Q?br />
�Q�input type="text" size="25"�Q?br />
�Q�xsl:attribute name="value"�Q�＜xsl:value-of select="personId"/�Q�＜/xsl:attribute�Q?br />
�Q?input�Q?

�Q?td�Q?br />
�Q�td width="30%"�Q?

�Q�input type="text" size="20"�Q?

�Q�xsl:attribute name="value"�Q�＜xsl:value-of select="personCode"/�Q�＜/xsl:attribute�Q?

�Q?input�Q?

�Q?td�Q?

�Q�td width="40%"�Q?

�Q�input type="text" size="40"�Q?br />
�Q�xsl:attributename="value"�Q�＜xsl:value-of select="personName"/�Q�＜/xsl:attribute�Q?

�Q?input�Q?br />
�Q?td�Q?br />
//定义一个width�?8%的列�Q�在该列上插入一个下拉列表select 控�g�Q�select的值如果匹配到�?时则�?�?�Q?时则�?�?

�Q�td width="28%"�Q?br />
�Q�select size="1"�Q?br />
�Q�option value="0"�Q?br />
�Q�xsl:if test=".[sex=0]"�Q?br />
�Q�xsl:attribute name="selected"�Q�true�Q?xsl:attribute�Q?br />
�Q?xsl:if�Q?br />
�?br />
�Q?option�Q?br />
�Q�option value="1"�Q?br />
�Q�xsl:if test=".[sex=1]"�Q?br />
�Q�xsl:attribute name="selected"�Q�true�Q?xsl:attribute�Q?br />
�Q?xsl:if�Q?

奻I��/option�Q?br />
�Q?select�Q?br />
�Q?td�Q?br />
//定义一列，在该列上插入一个button控�g�Q�onclick 事�g��定义的方法，该方法传递当前单�ȝ��按纽

�Q�td width="*"�Q?

�Q�button onclick="openPersonRolePage(this)" style="width: 36; height: 21"�Q�角�Ԍ��/button�Q?br />
�Q?td�Q?br />
�Q?tr�Q?br />
�Q?table�Q?br />
�Q?xsl:template�Q?br />
�Q?xsl:stylesheet�Q?/td>

五�?数据接口的实�?/strong>�Q�见Org.jpg文�g�Q?br />
Org.JSP文�g用来在服务器上运行Java的类与前台web��之间架起一座桥。取��C��间�g的接口作用�?br />
�q�里分析部分代码�Q?br />

�Q?@ page contentType="text/html; charset=GBK" %�Q?br />
�Q?@ page import="java.sql.*" %�Q?br />
�Q?@ page import="javax.naming.*" %�Q?br />
�Q?@ page import="javax.sql.*" %�Q?br />
�Q?@ page import="tool.*" %�Q?br />
�Q?@ page import="orgNew.*" %�Q?br />
�Q?@ page import="org.w3c.dom.*" %�Q?br />
//上面主要是引用一些java�c?br />
�Q?

try{

　//request.setCharacterEncoding("GBK");

　Document doc = XmlTool.createDocumentFromRequest(request);

　//建立web面文档请求的文档对象

　Connection conn = ConnTool.getConnectionFromPool();

　//获取��h��的方法名

　String mode=request.getParameter("mode");

　//out.println("ccc");

　//如果�Ҏ��中没有其它参数则��d��l�织树数�?br />
　if(mode == null){

/* int OrgId = Integer.parseInt(request.getParameter("id"));

String str = orgManager.getChildOrg(OrgId, conn);

out.println(str);

*/

　String str = orgManager.getTree(conn);

　//out.println(str);

　out.println(str);

}else if(mode.equals("createOrg")){

　//如果是createOrg�Ҏ��则徏立一个组�l?br />
　int parentOrgId = Integer.parseInt(request.getParameter("parentOrgId"));

　//取出传递来的第一个参数parentOrgId

　int OrgId = orgManager.createOrg(parentOrgId, conn);

　//调用orgManager �cȝ��createOrg�Ҏ��来徏立一个组�l?br />
　out.println(OrgId);

　//�q�回�l�果

}

conn.close();

}

catch(Exception e){

　e.printStackTrace();

}

%�Q?/td>

六�?后台数据的实�?/b>

1. 数据�l�构的定�?br />
�q�里�Q�我们主要有三个表。一个是�l�织�l�构表，一个是人员表person�Q�一个组�l��h员关联表orgPerson。组�l�结构表有OrgCode�Q�组�l�代码）、OrgName�Q�组�l�名�U�ͼ�、orgId�Q�组�l�Id�Q? parentOrgId�Q�父Id�Q�。�h员表有personCode�Q��h员代码）、personName�Q��h员名�U�ͼ�, sex�Q�性别�Q�、personId�Q��h员Id�Q�。orgPerson表有orgId, personId�?br />
2. 数据库的�q�接

WEB应用�E�序常用MySQL作后台数据库�Q�这是因为MySQL��单、高效。这里我们也用MySQL作�ؓ数据库。Java中用jdbc�q�接数据库。下面是�q�接数据库的CODE�Q?br />

public static Connection getConnectionFromPool() throws Exception {

　Context ctx = new InitialContext();

　DataSource ds = (DataSource) ctx.lookup("java:/erpds");

　return ds.getConnection();

}

/**

* 取数据库链接对象

* @return Connection 数据库链接对�?br />
* @throws Exception

*/

/*

public static Connection getDirectConnection() throws Exception {

　Class.forName("com.sybase.jdbc2.jdbc.SybDriver");

　String url = "jdbc:sybase:Tds:19.64.13.16:4100/wydb?charset=iso_1";

　String user = "sa";

　String password = "2860008";

　Connection conn = DriverManager.getConnection(url, user, password);

　return conn;

}

*/

. 业务逻辑层的实现

后台开发我们用Java�c�L��实现。这里我们开发了一个orgNew包，�c�d��为orgManager。此�c�d��装了与数据库操作有关的方法。通过main可调试程序的正确性�?br />
�q�里�l�出了新增加一个组�l�的全部代码和通过XML取得树结构信息的代码�Q�树�l�构通过递归实现�?br />

package orgNew;// Java�c�L��打的�?br />
import tool.*;

import java.sql.*;

import java.util.*; // 引用Java�cȝ��

public class orgManager {

　public orgManager() { }

　public static void main(String[] args) throws Exception {

Connection conn = tool.ConnTool.getDirectConnection();// 引用数据讉K��c?br />
conn.setAutoCommit(false);

orgManager orgManager1 = new orgManager();

orgManager1.createOrg(0, conn); //��试建立�l�织是否正确

　}

　//建立一个组�l?br />
　public static int createOrg(int parentOrgId, Connection conn) throws

　Exception {

String sql = "insert into Org (OrgName, parentOrgId) values('新组�l?, ?)";

PreparedStatement pstat = conn.prepareStatement(sql);

pstat.setInt(1, parentOrgId);

pstat.executeUpdate();

pstat.close();

Statement stat = conn.createStatement();

String sql2 = "select max(OrgId) from Org";

ResultSet rs = stat.executeQuery(sql2);

rs.next();

int OrgId = rs.getInt(1);

rs.close();

stat.close();

System.out.println(OrgId);

return OrgId;

　}

}

//通过递归得到�l�织信息的XML格式的数�?br />
public static String getTree(Connection conn) throws

Exception {

　StringBuffer ret = new StringBuffer();//定义可缓冲的字符��?br />
　ret.append("�Q?xml version='1.0' encoding='gb2312'?�Q�＜tree id='0'�Q?);//定义XML格式的头信息

　ret.append(" �Q�item child='1' text='�l�织' id='1' �Q?);//插入�l�点体。注树结点以item为标�?

　ret.append(getChildTree(1, conn));

　ret.append("�Q?item�Q?);//�l�点体结束标�?br />
　ret.append("�Q?tree�Q?);//树结束标�?br />
　return ret.toString();//�q�回字符��?br />
}

public static String getChildTree(int OrgId, Connection conn) throws

Exception {

　StringBuffer ret = new StringBuffer();

　String sql = "select a.OrgId, a.OrgName, a.OrgCode,count(b.parentOrgId) from Org a " +

"left join Org b on a.OrgId = b.parentOrgId " +

"where a.parentOrgId = ? " +

"group by a.OrgId, a.OrgName";

　PreparedStatement pstat = conn.prepareStatement(sql);

　pstat.setInt(1, OrgId);

　ResultSet rs = pstat.executeQuery();

　while (rs.next()) {

int childOrgId = rs.getInt(1);

String childOrgName = rs.getString(2);

String childOrgCode = rs.getString(3);

if (childOrgCode == null) {

　childOrgCode = " ";

}

if (childOrgName == null) {

　childOrgName = "新组�l?;

}

int childCount = rs.getInt(3);

if (childCount �Q?0) {

　childCount = 1;

}

ret.append("�Q�item child='" + childCount + "' text='" + childOrgName +

"' id='" +childOrgId + "' code='"+childOrgCode+"'�Q?);

ret.append(getChildTree(childOrgId, conn));

ret.append("�Q?item�Q?);

　}

　rs.close();

　pstat.close();

　return ret.toString();

}

其它代码见orgManager.java文�g�?br />
七�?�ȝ��

本文仉��过一个实例全面介�l�了Ajax开发的各个�l�节。通过与J2ee的结合来实现三层分布式开发的层次划分�Q�后��C��前端的调用。数据的��d��、访问及展现�?

通过�q�个实例�Q�我们可见，Ajax使WEB中的界面与应用分��R��数据与呈现分离的分��，有利于分工合作、减��非技术�h员对��面的修攚w��成的WEB应用�E�序错误、提高效率、也更加适用于现在的发布�pȝ��。也可以把以前的一些服务器负担的工作�{嫁到客户端，利于客户端闲�|�的处理能力来处理�?br />
Ajax是传�l�WEB应用�E�序的一个�{变。以前是服务器每�ơ生成HTML��面�q�返回给客户端（��览器）。Ajax理念的出玎ͼ�揭开了无��h��更新��面时代的序�q�，�q�有代替传统web开发中采用form(表单)递交方式更新web��面的趋势，可以��是一个里�E�碑�?br />
��M��Q�Ajax适用于交互较多，频繁��L��据，数据分类良好的WEB应用�?/p>

�p�涂 2006-04-20 09:21 发表评论

亚洲VA中文字幕不卡无码,亚洲日日做天天做日日谢,亚洲国产精品无码久久一区二区

AJAX+J2EE开发组�l�机构管理系�l�（摘自天极�|�）