Design and implementation of dynamic tree structure based on Ajax

ajax| Dynamic | design | tree structure <B> abstract </b&gt: A general and dynamic tree structure implementation scheme is introduced, which is based on asynchronous JavaScript and XML, Combined with the design of struts framework, a multi-layer architecture with clear structure and good expansibility is realized, data is stored in the database and the node information of XML description tree is combined, so that any information described by the predefined XML documents can be displayed through the dynamic tree. &LT;BR/><table border= "0" cellspacing= "0" cellpadding= "0" align= "left" style= "Margin-top:10px;margin-right : 7px;margin-bottom:3px;margin-left:0px "><tr><td><span id=" Ad_pcdog_big "></span></ td></tr></table><br/> <B> keywords </b>:mvc mode; Ajax; tree structure; dictionary order <br/><br/>< B></b> Tree-type structure is a kind of data structure with very wide application. The genealogy of Clan and the organization form of modern enterprise in human society are all tree-shaped structure. In the field of computer, the management structure of files in file system, the page table in memory management, the index in database, etc. are all tree-type structure. With the rapid development of Internet, the application of tree-type structure in browser/server (Browser/server, b/s) is more and more extensive. <br/><br/> At present, there are two kinds of tree structures which are widely existed and applied on Internet: static and dynamic structure. Static structure exists most, realizes simple, however, static causes can not change the structure and content of tree, can not reflect the change of node information of tree, while the implementation of relatively complex dynamic tree, although can dynamically add, delete, update node information, but most can not directly drag and drop nodes to change the structure of the tree and the order between nodes, and repeatedly refresh the entire page, to the user maintenance has brought a lot of inconvenience. This paper presents a solution of dynamically loading nodes based on Ajax (asynchronous JavaScript and XML). The realization uses the Java EE multi-layer structure, the tree node description information uses the database storage, in the Extensible Markup Language (EXTENSIBLe Markup Language, referred to as XML, shows JavaScript parsing, supports adding, deleting, updating node information without refreshing, and dragging and dropping nodes to change the tree's structure and order between nodes. The 1th part of this paper introduces the Ajax technology, the 2nd part introduces the technology realization process of the scheme in detail, and the 3rd part analyzes the efficiency of the program. <br/><br/><strong> 1, Ajax introduction </strong><br/><br/> Ajax concept of the earliest author Jesse James Garrett that Ajax is not a new language or technology, it is actually a number of technologies in a certain way to play their respective roles in a common collaboration, including: <br/><br/> Using Extended hypermedia Markup Language (eXtended Hypertext Markup Language, referred to as XHTML) and cascading style sheets (cascading style Sheet, short CSS) standardized rendering; <br/><br/> Enables dynamic display and interaction using the Document Object model, called DOM, <br/><br/> uses Extensible Markup Language (extensible Markup Language, XML) and Extensible Stylesheet Conversion (extensible Stylesheet Language Transformation, referred to as XSLT) for data exchange and processing; <br/><br/> Asynchronous data reads using the XMLHTTP component XMLHttpRequest object, <br/><br/> finally binds and processes all data with JavaScript. <br/><br/> Ajax works as shown in Figure 1, which is equivalent to adding a middle tier between the user and the server, allowing user actions to respond asynchronously to the server. Not all user requests are submitted to the server, such as data validation and processing, which are handled by the Ajax engine, and the Ajax engine submits the request to the server only if it is determined that new data needs to be read from the server. In this way, some server burden of the work to the client, using the client idle processing capacity to deal with, reduce the burden of server and bandwidth, so as to save the ISP space and bandwidth rental costs. &LT;BR/&gt&LT;BR/><table width= 90% align=center border=0><tr><td><div align=center><a href= " 76587-1.gif "target=" _blank "></a> <br/> Figure 1 Comparison of Web applications using Ajax (a) and Ajax (b) </div></td></tr></table><br/><strong > 2, the overall design of the </strong><br/><br/> Traditional Server program using Model 1 development models, usually the business logic, server-side processing and HTML code together to express the rapid completion of application development. Model 1 in the small scale application development when the advantage is obvious, but the application implementation is generally based on the process, a group of server Pages to implement a process, if the process changes will lead to a number of local changes, very detrimental to the application of the extension and update. In addition, the business logic and presentation logic are mixed in the server Pages, coupled tightly and cannot be modularized, resulting in the code not being reused. <br/><br/> Model 2 solves these problems, it is an object-oriented MVC pattern (Model-view-controller, model-View-Controller) application in Web development, model represents the business logic of the application, View is the presentation layer page of an application, and controller is the process control that provides the application. The MVC design pattern divides the application logic, the processing process and the display logic into different components and modules, which can be interacted and reused among the components. <br/><br/> The scheme is a multi-layer architecture of Java EE, which divides the presentation layer, the business logic layer and the data layer into different modules by combining the struts framework at design time. The presentation layer focuses on the appearance of the tree, the business logic layer is the server-side processing program, the processing tree generation, the change, in order to reduce the coupling, the program is all modular implementation, not the representation page embedded server program; The model layer is the storage and presentation of data. The implementation of each layer is described below. <br/><br/><strong> 2.The 1 presentation layer implements &LT;/STRONG&GT;&LT;BR/><br/> A folder mode similar to Windows Explorer, and the node's picture style is shown in table 1. For each node's DHTML code, you need to include the location of the node, a leading picture, a style, other actions for that node, and so on. Also, for the consistency of the node display, some leading images are required. <br/><br/> Table 1 tree node before the picture style sheet <br/><br/><table width= "90%" Align=center ><td><div align=center><a href= "76587-2.gif" target= "_blank" ></a></div></td></tr></table><br/> A DIV (Division) container is included for the tree's non leaf nodes, picture and node information, etc. DIV and other containers are the basis of DHTML, using it to manipulate its properties through scripting, such as setting its style's display property to control the expansion and concealment of child nodes. The location of the node, the leading picture, the style, and other actions for the node are placed in the container, for example: <br/><br/><table bordercolor= #cccccc width= "90%" Align=center bgcolor= #e3e3e3 border=1><tr><td>< DIV ID =mparentid><br/>< IMG align = center border = 0 onclick =″ Nodeexpand (' Leafid ') ″name = m1tree src =′tplus.gif′><br/>< IMG align = center border = 0 name = M1folder src =′fo Lderclosed. gif′> Computer College </DIV> &Lt;/td></tr></table><br/> leaf node without direct output of the container. <br/><br/> Controls the expansion and concealment of the child nodes by clicking the "+", "-" picture in front of a node by using the div's style display property. Display: "None" (hidden, invisible), display: "Block" (display). The relevant JavaScript code is as follows: <br/><br/><table bordercolor= #cccccc width= "90%" Align=center bgcolor= #e3e3e3　Border=1><tr><td>if (ExpandChild.style.display = =″none″) {<br/>//is currently hidden, performing the unwind action <br/> This. Loading (ParentObject)//To determine whether the data for the branch has been loaded <br/> ExpandChild.style.display =″block″; <br/>if (para2 = =″last″) <br/>, parentobject.src. Gif″; The last node <br/>else <br/> parentobject.src =″tminus. Gif″; Displays ┠<br/> expandfolder.src =″folderopen. Gif″;<br/>}else {<br/>//Hide all child nodes of the current node <br/> expandChild.style.display =″none″;<br/> if (para 2 = =″last″) <br/> parentobject.src =″lplus. gif″;<br/> Else <br/> parentobject.src =″tplus. gif″;<br/> Expandfolder.src =″folDerclosed. Structural design of GIF″;&LT;BR/>}</td></tr></table><br/><strong> 2.2 Tree Table &LT;/STRONG&GT;&LT;BR/ ><br/> We take the database as the carrier to record the change of nodes, the tree table structure should have at least the following fields: the number of the node (CLASSID), the description of the node (ClassName), the number of the parent node (ParentID), which is the information necessary to build the tree structure. The Class code (CLASSCODE) of the node, the level of the node (classlevel), the leaf node (terminated), and other auxiliary fields are also introduced, the order of the nodes is recorded, and the entity diagram is shown in Figure 3. <br/><br/><table width= "90%" Align=center border=0><tr><td><div <br/> Figure 3 Schematic diagram of tree table structure </div></td></tr></table><br/> Tree traversal time complexity is O (<i>n </I>), However, after the tree information is stored in the database, it can not traverse the tree in the traditional way, you must use SQL statements to access the contents of the database table, and the more the amount of data, the more resources consumed, the longer the user waiting time. If the unordered data is read from the database, on the server side, the sorted tree must be sent to the client for display. Therefore, it is a good idea to read the sorted tree from the database. <br/><br/> We know that string sorting is in dictionary order form. Combined with the characteristics of SQL statements and tree structure, the class code of the nodes in the database table is in the form of multilevel strings, such as AAABBBCCC, starting from the root node, adding one level for each downward-level string, and the child node class code begins with the parent node class code and then begins the class code. The nodes of the same sibling are numbered in the order in which they were generated, such as the class code for the next level of AAA for the Node class code for Aaaaaa,aaaaab, aAaaab children node for AAAAABAAA, Aaaaabaab, etc. The width of each level of numbered characters is associated with the actual application, for example, there are 263 nodes at the aaa~zzz level, and if not enough, add one more character for encoding. The ingenious numbering method. Makes the complete First order tree one at a time after executing the SQL statement SELECT * from Tree_class ordered by Classcode. &LT;BR/&GT;&LT;BR/><strong> 2.3 Business Logic Layer design </strong><br/><br/> 2.3.1 Dynamic Loading technology &LT;BR R/> If a complete first order tree, constructed into XML to provide JavaScript parsing, the larger the amount of data, the more resources consumed, the longer the client response latency, so for large data tree, dynamic loading method, that is, each time you click the "+" picture, Determines whether child node data has been loaded, if not loaded, asynchronously sends the request through the Ajax XMLHTTP component XMLHttpRequest object, connecting the server to execute the SQL statement "SELECT * from tree_class where parent =?" ORDER by Classcode gets the node data. The relevant JavaScript code is as follows: <br/><br/><table bordercolor= #cccccc width= "90%" Align=center bgcolor= #e3e3e3 border=1><tr><td>/* to determine if the data has been loaded, and the access server loads the data */<br/><br/>dhtmltree.prototype.loading= function (pobject) {<br/> if ((pobject.xmlload==0) && (this. Xmlsource) && (!this). xmlloading)) {<br/> pobject.xmlload=1;<br/> This.loadxml (this. Xmlsource+geturlsymbol (this. Xmlsource) + "id=" +escape (pobject.id)); &Lt;br/>}<br/>}<br/>dtmlxmlobject.prototype.loadxml=function (URL) {//Load data <br/> try {<br/ > this.xmldoc = new XMLHttpRequest (); <br/>/* Asynchronously connects to URL loading data via get method */<br/> This.xmlDoc.open ("Get", url, true);//true: Asynchronous; false: Synchronous <br/> this.xmlDoc.send (null) <br/>} catch (e) {<br/> This.xmldoc = new Acti　　Vexobject ("Microsoft.XMLHTTP");//Use ie<br/> this.xmlDoc.open ("get", url,true);//true: Asynchronous; false: Sync <br/> This.xmlDoc.send (null); <br/>}<br/> return this.xmldoc.responsexml;<br/>} </TD></TR> </table><br/> Each time only the same parent node parentid sequence of child nodes, encapsulated in XML format as a tree document structure, for example: <br/><br/><table bordercolor= #cccccc width= "90%" Align=center bgcolor= #e3e3e3 border=1><tr><td><tree id= "0" ><br/ ><leaf child= "1" name= "National Defense Science and Technology University" id= "1" im0= "Leaf.gif" im1= "Folderopen.gif" im2= "Folderclosed.gif"/><br/></ Tree></td></tr></table><br/> is provided to the JavaScript DHTmlTreeObject.prototype.insertItem () parses and organizes the HTML output node, where child:1 represents a child node, 0 means No child nodes, im0 an icon when there are no child nodes, im1 an icon that indicates a child node and opens the node, and IM2 represents a child node and And the icon when it is closed, so you can also customize the icon when you construct the XML. The construction of <br/><br/> 2.3.2 tree structure <br/><br/> Returns an ordered sequence tree from the database, and XML is a complete tree structure document, so the tree data is constructed into predefined XML formats. Simply start from the root node and traverse the tree to generate all the trees. The relevant JavaScript code is as follows: <br/><br/><table bordercolor= #cccccc width= "90%" Align=center bgcolor= #e3e3e3 Construction method of border=1><tr><td>/* dynamic loading tree */<br/><br/>dtmlxmlobject.prototype.constructtree= The function () {<br/><br/>//the XML data obtained by dynamic loading, parsing the tree data <br/><br/>var. Xmlloader.getxmltopnode ("tree"); <br/><br/>var parentid=node.getattribute ("id"); <br/><br/ >for (var i=0;i<node.childnodes.length;i++) {//parse the leaf node of the XML file <br/><br/> if (node.childnodes[i). nodetype==1) && (node.childnodes[i].tagname = = "Leaf") {<br/> var name=node.childnodes[i].getattribute ("text"); <br/> ... <br/> var temp=d.Htmlobject.a0find (ParentID)//Gets the parent node object <br/> Temp. xmlload=1;//loaded <br/>//Constructed HTML output node <br/> Dhtmlobject.insertitem (PARENTID,CID,NAME,IM0,IM1,IM2,CHD); <br/> Dhtmlobject.adddragger = this;//Set Drag-and-drop objects <br/>};<br/>}</td></tr></table> <br/> 2.3.3 Tree structure maintenance <br/><br/> When maintaining the tree structure table, the deletion node is simpler, and the SQL statement is: "Delete from Tree_class where Classcode l ike′ "+ Classcode +"%′ ", can be deleted together with its nodes and children, when adding nodes, divided into front, back, and insert child nodes three cases, the first two situations need to update the recursive update category code, the latter only need to find the parent node's child's maximum category code plus 1, As a class code to increase the node, by dragging and dropping to change the structure of the tree, you simply update the parentid of the dragged node to the classid of the target node, and the corresponding SQL statement is: "Update tree_class Set parentid =" + classidto+ "Where classid =" + Classidfrom. <br/><br/><strong> 3, efficiency analysis </strong><br/><br/> There are generally two forms of storage for trees: Two-dimensional tables and lists, The traversal method generally also has the depth traversal and the breadth traversal two kinds of ways, the traversal time complexity all is O (<i>n </I>). When using a two-dimensional table, the subscript of an array in memory can accurately locate the parent node of the node and the array subscript where the sibling node is located. The location of the nodes in the database is also accurate, but when the node information is read into memory from the database, if the node information cannot be positioned through the memory array, then it is necessary to traverse the search for a node, and the time to find a node in the <i>n </I> node is O (<i &GT;N/&LT;/I&GT;2), the time complexity of sorting <i>n </I> nodes will be O (<I>n<SUP> </sup></i>²/2), This is also the general implementation of B/s mode of the tree structure inefficient reasons. This scheme uses dictionary ordinal numbering scheme, make the tree that obtains from the database is already sorted, direct traverse to generate client page program, time complexity is O (<i>n </I>). <br/><br/><strong> 4, conclusion </strong><br/><br/> This paper discusses the implementation scheme of dynamic tree structure based on Ajax, Support for node information without refreshing the dynamic maintenance tree the node structure and order of the tree are supported by the drag-and-drop node, and the database storage node information is used to ensure the generality of the scheme, in addition to the node information of the XML description tree, so that any information described in the XML document according to the plan can be displayed through the tree. This program has been applied in the digital orientation system of our school and the information system of the common People's large pharmacy.