Scripting | Asynchronous three, client code
The following is the program's startup page tree.htm:
< HTML >
< SCRIPT src= "renderer.js" language= "JavaScript" ></script >
< head >< body id=bodytree name= "Bodytree" onload= "Gettree ();" >
< IFRAME id=getdata style= "Display:none" ></iframe >
</body >
The Gettree function in Renderer.js is executed when the page is loaded. The IFRAME part of the HTML code implements the communication mechanism between the client and server side.
The code for the JavaScript function gettree is as follows:
function Gettree () {
if (Event.type = = ' Load ') {
if (typeof (DivTree0)!= ' object ')
GetData.window.location.href = ' gettreedata.asp? Level=0 ';
} else {
try {
Objmanip = eval (' Divtree ' + event.srcElement.getAttribute (' ElementID '));
if (ObjManip.style.display = = ' None ') {
ObjManip.style.display = ';
} else {
ObjManip.style.display = ' None ';
}
catch (e) {
GetData.window.location.href = ' gettreedata.asp? Level= ' + event.srcElement.getAttribute ('
ElementID ');
}
Event.cancelbubble = true;
}
}
When the document is loaded, the OnLoad event is triggered and the Gettree function is executed. function to check whether the container divTree0 exists and is an IFRAME (ID is
GetData) reads the first level node (the parent node ID of these nodes is 0). As mentioned earlier, all nodes must handle the mouse click event, and the event handle is
Gettree function. When a node (such as DIV1) receives a mouse event, the program executes the else part of the Gettree function. If the node that sent the event has
After the child nodes have been read, the program checks to see if the child nodes are displayed, and then toggles the display state of the child nodes to achieve the expansion or collapse effect of the layer nodes. Prosecution
If the Chazi node displays an If statement that is encapsulated within a try block, so when the child node does not exist, the program executes the catch part, calling the server script
Gettreedata.asp reads child node content. Finally, the program settings event.cancelbubble = True to prevent the last layer of the container from handling the event.
The server script gettreedata.asp returns an HTML code class such as:
< HTML >
< body onload= "parent. Populatetree (' 1|0| node 1|2|0| node 2|3|0| node 3|4|0| node 4| '); ">
</body >
As you can see, the OnLoad event here calls another JavaScript function Populatetree. The Populatetree function code is as follows:
function Populatetree (strdata) {
var arrsplitdata;
var icnt;
var Objtempdiv;
var Objmaindiv;
if (strdata== ') return;
Arrsplitdata = Strdata.split ("|");
Objmaindiv = document.createelement (' DIV ');
objmaindiv.id = ' Divtree ' + arrsplitdata[1];
ObjMainDiv.style.cssText = ' position:relative;left:10px;cursor:hand; ';
for (icnt=0;icnt< arrsplitdata.length-1;icnt+=3) {
Objtempdiv = document.createelement (' < DIV onclick= ' Gettree () ' onselectstart= ' return false; ' >
＇);
objtempdiv.id = ' div ' + arrsplitdata[icnt];
objtempdiv.innerhtml = arrsplitdata[icnt+2];
Objtempdiv.setattribute (' ElementID ', arrsplitdata[icnt]);
Objtempdiv.setattribute (' Parentelementid ', arrsplitdata[icnt+1]);
ObjTempDiv.style.cssText = ' Position:relative;cursor:hand;color:red;width:100px;font-size:x-small;
＇;
Objmaindiv.appendchild (OBJTEMPDIV);
}
if (arrsplitdata[1]== ' 0 ')
Document.body.appendChild (OBJMAINDIV);
Else
Eval (' div ' + arrsplitdata[1]). appendchild (Objmaindiv);
}
As we already know, the Populatetree function is called by the OnLoad event, and its argument is a string, as in the previous example, "1|0| node 1|2|0| node
2|3|0| node 3|4|0| node 4| ", it is a" Node ID | parent Node ID | node text | ... "list.
If a node does not contain a child node, the argument is an empty string, at which point Populatetree returns directly. If a child node exists, you can use the split letter
Number to save the list of child nodes as an array. Next, you can create a container for the layer node, such as DivTree0, and then iterate through the array to create each node, as
Div1,div2 ..... If a node has a parent node ID of 0, which means that the node does not have a parent node, the program will divTree0 the container into the body of the document;
The parent Node ID is not 0, the container "divtree< < parent Node ID > >" corresponding to its parent node is created. A handle to a mouse click event is specified while creating a node
Gettree function.
Note: You can modify gettreedata.asp to return a list of child nodes (that is, populatetree arguments) in the form of "Node id| node text | ..." and
is to omit the parent node ID because the parent node of any set of child nodes is always the same. Also, you must modify the Populatetree function so that it accepts two parameters, the first
One argument is the list of child nodes and the second is the parent node ID. When the number of nodes is large, this method is helpful to reduce the data transmission and improve the efficiency.
Iv. Other Notes
To sum up, the process of the entire program can be described as:
The browser reads the document and executes the Gettree function.
Gettree calls Gettreedata.asp, reads the first-tier node data, and then recalls the Populatetree function.
Populatetree function generates DIVTREE0 and node Div1,div2, ....
The user clicks any one of the nodes.
The Gettree function checks whether "divtree< < Node ID > >" already exists, and if so, toggles the child node display State, otherwise reading the child node list.
Gettreedata.asp returns the list of child nodes and recalls the Populatetree function.
Populatetree generates the appropriate container "divtree< < parent Node ID > >" and generates the node "div< < node ID1 > >", "div< < node ID2 >
> ".....
Repeat step 4.
Run the sample program steps below (default directory d:inetpubwwwroot):
Create a directory that copies all files to the directory.
Publish the directory on the Web server.
Modify the database path in the TREE.DSN.
Modifies the Tree.dsn file path in gettreedata.asp.
Open the tree.htm in the browser.
The IFRAME in the sample program is hidden, and if you want to display it, remove the IFRAME's properties "style=" Display:none "", and you can also view the node
The HTML source code
