Using AJAX+J2EE to develop organization management system

Using AJAX+J2EE to develop organization management system

I. Overview Ajax is a new technology that came out early this year, and is an abbreviation for asynchronous JavaScript and XML. It is a set of technologies for developing Web applications that enable browsers to provide users with a more natural browsing experience. The modification of the client Web page is asynchronous and incremental whenever an update is required. In this way, Ajax greatly improves the user interface speed when submitting Web page content. There is no need to wait for the entire page to refresh in an AJAX-based application for long periods of time. The part of the page that needs to be updated is changed and, if possible, the update is done locally and asynchronously. Java EE is an architecture used to develop distributed systems. It mainly uses Java classes to develop business entities. Connect the application server through a JSP. This article develops an organization management small system, through this example to explain how to use Ajax to develop Web applications. The system has the function of adding, modifying and deleting the organization. At the same time to the organization to assign personnel, can add, modify, delete personnel. second, interface design Tree structure is a kind of structural form commonly used in most software systems. Because of the hierarchical structure of the tree, the relationship between the superior and the clear, and the expansion of the contraction to express information convenient, the interface is also more beautiful, so we are keen to use this structure. The organization management is the general software basically has. Organization refers to the organization structure of a company. The group may include the subsidiary company and the department below. Employees belong to the company in which they are located. The interface of the system after running is as follows: Orgmanager.htm is the main page of organization management. Web application interface design is very important. How to Layout, sample organization can directly reflect a person's design level. Organizations mainly include tree structure, organization editor, staff editors, such as three large chunks, how to divide into three, but the general tree structure of the form often first two, tree-type structure of the exclusive piece, and another piece divided into the upper and lower two parts, above is the mechanism code, the following is the personnel code Solid can divide the page into the following form: Tree structure area 1 Organization Code Area 2 Personnel Admin District 3 Obviously we do it through a table. This is a table with two rows and two columns, and the left column of row first to second merges the cells. The code is as follows: TABLE border= "1" width= "100%" height= "100%" We add a div to area 1 (cell) because the DIV can scroll dynamically and can be inserted into other controls. The DIV's ID is "Divtree" and the style is set to scroll automatically when it overflows, with a width and height of 100%, and a full range. The code is as follows: We add a div to section 2 (cell) and insert a table in the Div. The control is dropped on the table, which is simple enough to say in detail. We add a div to area 3 (cell). The ID of this div is "divcontent", and style set to vertical overflow automatically scrolling, wide and high are 100%, and full area, this div used to load personnel information; In the DIV, insert a table, the ID of this table is "Tblist", is used to input, show people rest and relax, Also insert some controls such as checkbox, text, select, and so on in this table. Description, the second column of the table is used to put the person's unique number, not shown. The code is as follows: & #30007; & #22899; Three, the main front page encoding 1. The implementation of the tree To implement the tree structure on the web, we are also implementing it through Ajax. A custom icon can be displayed on the tree to insert, delete, and node. And the nodes can be moved arbitrarily. Here we do not focus on the implementation of tree technology, we have been packaged, you just follow the requirements to change it. 1) key to the tree-type file In the and key to our tree-related files, the code is as follows: 2) Loading method Loading a custom method when the document on the page is opened, preloadimages the method implements the icon definition for the tree control, doonload the icon definition code for the implementation tree control as follows: 3) Writing method Doonload implements the mount and displays the tree. Set tree properties, and so on. function Doonload () { Orgtree=new Dhtmlxtreeobject (document.getElementById (' Divtree '), "100%", "100%", 0); Dhtmlxtreeobject is a tree object that, by creating a new object, specifies the div that the tree displays to define the tree. Orgtree.setimagepath ("imgs/");/set the location of the picture of the tree Orgtree.setdraghandler ()//Set tree node drag Orgtree.enabledraganddrop (TRUE)//Set whether the tree node can be dragged Orgtree.setdraghandler (Mydraghandler); To set the method that is executed when a tree node is dragged Orgtree.setonclickhandler (Myselecthandler); Sets the method that is executed when the tree clicks Orgtree.setxmlautoloading ("org.jsp");//Mount tree node data. The data source, such as org.jsp, returns an XML-formatted string that is loaded dynamically and is loaded when expanded. Orgtree.loadxml ("root.xml?0");//Mount tree node data. The data source Root.xml the file, and the data is read from the ID number of the XML file at 0. Orgtree.loadxml ("org.jsp");//Mount tree node data. The data source, such as org.jsp, returns an XML-formatted string and loads the data all at once. } Preloadimages method implements the icon definition of a tree control 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<imsrcar.length;i++) { Imar[imar.length] = new Image (); IMAR[IMAR.LENGTH-1].SRC = "imgs/" +imsrcar[i] } } 2. The realization of organizational management Organizations can add, delete, and edit. Also, when selecting a tree node, the organization should be displayed for editing and viewing. In order to achieve these functions, you just need to change as required. 1 The definition of global variables In many places we want to use some common variables, we define global variables between , the code is as follows: var orgtree = null; Organization Tree DOM var nextseq = sequential number of 0;//personnel management (serial number) var persondom;//staff Dom var currnodeid;//current Node ID 2) Initialization When the page is open we want to control the good part of the show, that part to hide. and assigning values to global variables, and so on, the organization type is loaded. Loads the Custom method init () when the page's document is opened, and the Init method implements initialization. The Init method is implemented as follows: function init () { Define Persondom as a xmldom ' object persondom= new ActiveXObject (' Microsoft.XMLDOM '); Persondom.async = false; Defines stylesheet as a xmldom ' object, and stylesheet for Persondom determines the display style Stylesheet = new ActiveXObject (' Microsoft.XMLDOM '); Stylesheet.async = false; Stylesheet.load ("addorgperson.xsl"); Load stylesheet Style definition file Load organization type data 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); Insert the organization type into a drop-down list control 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 { 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 The method of writing tree drag and selecting nodes Mydraghandler the parent-child relationship when you implement a tree-node drag. 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; } The Myselecthandler realizes the control of the system by selecting the tree node, and displays the organization information and the personnel under the organization. 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"