AJAX Based on an unlimited menu tree

Posted by john
3/1/2007
Related Tags:
css menu  css drop-down menu 

  Recently the use of the tree menu, the original one to do is read out the data, now think不爽feeling is, if each according to need reading on ok, and can be used just ajax. 

  First, ajax handling, write a js bar, with oo write ajax.js as follows: 

  / ** 
  * @ Author zxub 
  * State Information Display categories, with var Status = new function () definition, which can be invoked static methods 
  * Under normal circumstances to function Status (), so one can not use the static method, the need to invoke the object 
  * / 
  Var Status = new function () 
  ( 
  This.statusDiv = null; 

  / ** 
  * Initialization of the state show 
  * / 
  This.init = function () 
  ( 
  If (this.statusDiv! = Null) 
  ( 
  Return; 
  ) 
  Var body = document.getElementsByTagName ( "body") [0]; 
  Var div = document.createElement ( "div"); 
  Div.style.position = "absolute"; 
  Div.style.top = "50%"; 
  Div.style.left = "50%"; 
  Div.style.width = "280px"; 
  Div.style.margin = "80px-0 0-100px"; 
  Div.style.padding = "15px"; 
  Div.style.backgroundColor = "# 353555"; 
  Div.style.border = "1px solid # CFCFFF"; 
  Div.style.color = "# CFCFFF"; 
  Div.style.fontSize = "14px"; 
  Div.style.textAlign = "center"; 
  Div.id = "status"; 
  Body.appendChild (div); 
  Div.style.display = "none"; 
  This.statusDiv = document.getElementById ( "status"); 
  ) 

  / ** 
  * Set up state information 
  * @ Param _message: To display information 
  * / 
  This.showInfo = function (_message) 
  ( 
  If (this.statusDiv == null) 
  ( 
  This.init (); 
  ) 
  This.setStatusShow (true); 
  This.statusDiv.innerHTML = _message; 
  ) 

  / ** 
  * Set up is a reflection of the state of 
  * @ Param _show: boolean value, in order to show its true, do not show false 
  * / 
  This.setStatusShow = function (_show) 
  ( 
  If (_show) 
  ( 
  This.statusDiv.style.display = ""; 
  ) 
  Else 
  ( 
  This.statusDiv.innerHTML = ""; 
  This.statusDiv.style.display = "none"; 
  ) 
  ) 
  ) 

  / ** 
  * @ Author zxub 
  * The name used for the storage and communication channels targeted categories, such names can be different channel of communication to differentiate between different objects 
  * / 
  Function HttpRequestObject () 
  ( 
  This.chunnel = null; 
  This.instance = null; 
  ) 

  / ** 
  * @ Author zxub 
  * Communication class, which can be invoked static methods 
  * / 
  Var Request = new function () 
  ( 
  / / Communications category cache 
  This.httpRequestCache = new Array (); 

  / ** 
  * The creation of new communications targets 
  * @ Return a new object communication 
  * / 
  This.createInstance = function () 
  ( 
  Var instance = null; 
  If (window.XMLHttpRequest) 
  ( 
  / / Mozilla 
  Instanse = new XMLHttpRequest (); 
  / / Some version of the Mozilla browsers handle server does not include the return of XML mime-type head of the information content would be wrong.    Therefore, in order to ensure that the return of content includes text / xml information 
  If (instance.overrideMimeType) 
  ( 
  Instance.overrideMimeType = "text / xml"; 
  ) 
  ) 
  Else if (window.ActiveXObject) 
  ( 
  / / IE 
  Var MSXML = [ 'MSXML2.XMLHTTP.5.0', 'Microsoft.XMLHTTP' 
  'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; / / layout here to dismantled into two lines, Editor's notes. 
  For (var i = 0; i <MSXML.length; i + +) 
  ( 
  Try 
  ( 
  Instance = new ActiveXObject (MSXML [i]); 
  Break; 
  ) 
  Catch (e) 
  ( 
  ) 
  ) 
  ) 
  Return instance; 
  ) 

  / ** 
  * Access to a targeted communications 
  * If no designated channel name, the default channel called "default" 
  * If there is no need for cache in the communications category, the creation of a, Add Communications cache 
  * @ Param _chunnel: channel name, not the existence of this parameter, the default for the "default" 
  * @ Return a communications object, stored in a cache in the communications category 
  * / 
  This.getInstance = function (_chunnel) 
  ( 
  Var instance = null; 
  Var object = null; 
  If (_chunnel == undefined) / / channel did not specify the name 
  ( 
  _chunnel = "Default"; 
  ) 
  Var getOne = false; 
  For (var i = 0; i <this.httpRequestCache; i + +) 
  ( 
  Object = HttpRequestObject (this.httpRequestCache [i]); 
  If (object.chunnel == _chunnel) 
  ( 
  If (object.instance.readyState == 0 | | object.instance.readyState == 4) 
  ( 
  = Object.instance instance; 
  ) 
  GetOne = true; 
  Break; 
  ) 
  ) 
  If (! GetOne) / / object is not in cache, create 
  ( 
  Object = new HttpRequestObject (); 
  Object.chunnel = _chunnel; 
  Object.instance = this.createInstance (); 
  This.httpRequestCache.push (object); 
  = Object.instance instance; 
  ) 
  Return instance; 
  ) 

  / ** 
  * Client requests sent to the server 
  * @ Param _url: Purpose of Request 
  * @ Param _data: To send data 
  * @ Param _processRequest: to deal with the outcome of the return of function, which is defined in other places, the need for a parameter that is targeted to handle communications 
  * @ Param _chunnel: channel name, defaults to "default" 
  * @ Param _asynchronous: Does asynchronous processing, the default is true, that is, asynchronous processing 
  * / 
  This.send = function (_url, _data, _processRequest, _chunnel, _asynchronous) 
  ( 
  Status.showInfo ( "request processing, please wait  ");
  If (_chunnel == undefined) 
  ( 
  _chunnel = "Default"; 
  ) 
  If (_asynchronous == undefined) 
  ( 
  _asynchronous = True; 
  ) 
  Var instance = this.getInstance (_chunnel); 
  If (instance == null) 
  ( 
  Status.showInfo ( "browser does not support ajax, please check!") 
  Window.setTimeout ( "Status.setStatusShow (false)", 3000); 
  Return; 
  ) 
  If (typeof (_processRequest) == "function") 
  ( 
  Instance.onreadystatechange = function () 
  ( 
  If (instance.readyState == 4) / / Object state judge 
  ( 
  If (instance.status == 200) / / information has been successfully returned to start processing information 
  ( 
  _processRequest (Instance); 
  Status.setStatusShow (false); 
  ) 
  Else 
  ( 
  Status.showInfo ( "You have an unusual request pages, please check!"); 
  Window.setTimeout ( "Status.setStatusShow (false)", 3000); 
  ) 
  ) 
  ) 
  ) 
  / / _url Plus a change in the parameters of time, to prevent the browser cache after the same request is not sent the request to the server 
  If (_url.indexOf ("?")!=- 1) 
  ( 
  _url + = "& RequestTime =" + (new Date ()). GetTime (); 
  ) 
  Else 
  ( 
  _url + = "? RequestTime =" + (new Date ()). GetTime (); 
  ) 
  If (_data.length == 0) 
  ( 
  Instance.open ( "GET", _url, _asynchronous); 
  Instance.send (null); 
  ) 
  Else 
  ( 
  Instance.open ( "POST", _url, _asynchronous); 
  Instance.setRequestHeader ( "Content-Length" _data.length); 
  Instance.setRequestHeader ( "Content-Type", "application / x-www-form-urlencoded"); 
  Instance.send (_data); 
  ) 
  ) 

  / ** 
  * The time lag between the request sent sustained only for asynchronous processing, the only way for GET 
  * @ Param _interval: Spacing request, or to milliseconds 
  * @ Param _url: Address requests 
  * @ Param _processRequest: to deal with the outcome of the return of function, which is defined in other places, the need for a parameter that is targeted to handle communications 
  * @ Param _chunnel: channel name, the default "defaultInterval" Bi-Tim 
  * / 
  This.intervalSend = function (_interval, _url, _processRequest, _chunnel) 
  ( 
  Var action = function () 
  ( 
  If (_chunnel == undefined) 
  ( 
  _chunnel = "DefaultInterval"; 
  ) 
  Var instance = Request.getInstance (_chunnel); 
  If (instance == null) 
  ( 
  Status.showInfo ( "browser does not support ajax, please check!") 
  Window.setTimeout ( "Status.setStatusShow (false)", 3000); 
  Return; 
  ) 
  If (typeof (_processRequest) == "function") 
  ( 
  Instance.onreadystatechange = function () 
  ( 
  If (instance.readyState == 4) / / Object state judge 
  ( 
  If (instance.status == 200) / / information has been successfully returned to start processing information 
  ( 
  _processRequest (Instance); 
  ) 
  Else 
  ( 
  Status.showInfo ( "You have an unusual request pages, please check!"); 
  Window.setTimeout ( "Status.setStatusShow (false)", 3000); 
  ) 
  ) 
  ) 
  ) 
  / / _url Plus a change in the parameters of time, to prevent the browser cache after the same request is not sent the request to the server 
  If (_url.indexOf ("?")!=- 1) 
  ( 
  _url + = "& RequestTime =" + (new Date ()). GetTime (); 
  ) 
  Else 
  ( 
  _url + = "? RequestTime =" + (new Date ()). GetTime (); 
  ) 
  Instance.open ( "GET", _url, true); 
  Instance.send (null); 
  ) 
  Window.setInterval (action, _interval); 
  ) 
  ) 

  Then read data that is generated menu treeMenu.js: 

  / ** 
  * Control of the menu tree 
  * @ Author zxub 
  * / 
  Var TreeMenu = new function () 
  ( 
  This._url = null; 

  / / Join Style 
  Document.write ( '<style type="text/css">'); 
  Document.write ( '. TreeCheckBox (height: 11px; width: 11px; vertical-align: middle)'); 
  Document.write ( '. TreeImg (cursor: hand; vertical-align: text-bottom; margin-right: 2px)'); 
  Document.write ( '</ style>'); 

  / / Definition used an array of icon 
  This.icon = new Array (); 
  This.icon [ "member"] = 'img / child.gif'; 
  This.icon [ "open"] = 'img / opened.gif'; 
  This.icon [ "close"] = 'img / closed.gif'; 

  / ** 
  * Access to designated node-node 
  * @ Param _parentId: id specified node 
  * / 
  This.getChildren = function (_parentId) 
  ( 
  If (this.alreadyGetChileren (_parentId)) 
  ( 
  Var childContainer = document.getElementById (_parentId + "_subContainer"); 
  If (childContainer) 
  ( 
  ChildContainer.style.display = (childContainer.style.display == "none ")?"":" none"; 
  Var _parentNode = document.getElementById (_parentId); 
  If (_parentNode.firstChild & _parentNode.firstChild.tagName == "IMG") 
  ( 
  _parentNode.firstChild.src = (ChildContainer.style.display == "none")? This.icon [ "close": this.icon [ "open"]; 
  ) 
  ) 
  Return; 
  ) 
  Var processRequest = function (obj) 
  ( 
  TreeMenu.addChildren (_parentId, obj.responseXML); 
  ) 
  Request.send (this._url + "? PId =" + _parentId, "", processRequest, _parentId +""); 
  ) 

  / ** 
  * Based on data collected from the set of nodes designated nodes 
  * @ Param _parentId: id specified node 
  * @ Param _data: access to data 
  * / 
  This.addChildren = function (_parentId, _data) 
  ( 
  If (this.alreadyGetChileren (_parentId)) 
  ( 
  Return; 
  ) 

  Var _parentNode = document.getElementById (_parentId); 
  If (_parentNode.firstChild & _parentNode.firstChild.tagName == "IMG") 
  ( 
  This.icon _parentNode.firstChild.src = [ "open"]; 
  ) 
  / / Sub-grade containers, all sub-level options are put in a container 
  _nodeContainer = Document.createElement ( "div"); 
  _nodeContainer.id _parentId + = "_subContainer"; 
  / / Add-class container vessel father 
  _parentNode.insertAdjacentElement ( "BeforeEnd" _nodeContainer); 
  Var _children = _data.getElementsByTagName ( "root") [0]. ChildNodes; 
  Var _child = null; 
  Var _point = this; 
  For (var i = 0; i <_children.length; i + +) 
  ( 
  _children _child = [I]; 
  _node = Document.createElement ( "div"); 
  If (i! = _children.length-1) 
  ( 
  _node.style.cssText = "Padding-bottom: 5px"; 
  ) 
  _node.innerHTML = ""; 
  _node.id = _child.getAttribute ( "Id"); 
  / / If the existence of the lower nodes Node 
  If (_child.getAttribute ( "hasChildren ")==" 1") 
  ( 
  _node.innerHTML + = '<Img class = "treeImg" onclick = "TreeMenu.getChildren (' + _child.getAttribute (" id ")+')" src = " '+ this.icon [" close "]+'"/ > '; 
  _node.innerHTML + = '<span Style="cursor:hand;line-height:16px;height:16px" name="treeText" onclick="treeNodeChoosed(this);">' + _child.firstChild.data + '</ span > '; 
  ) 
  / / Node or nodes does not exist at lower levels 
  Else if (_child.getAttribute ( "hasChildren") == 0) 
  ( 
  _node.innerHTML + = '<Img class = "treeImg" onclick = "this.nextSibling.click ();" src = "' + this.icon [" member "]+'" style = "margin-left: 14px" / > '; 
  _node.innerHTML + = '<span Style="cursor:hand;line-height:16px;height:16px" name="treeText" onclick="treeNodeChoosed(this);">' + _child.firstChild.data + '</ span > '; 
  ) 
  / / Node-class vessel to join 
  _nodeContainer.insertAdjacentElement ( "BeforeEnd" _node); 
  ) 
  _nodeContainer.style.cssText = "Border-left: 0px solid # ccc; margin-left: 7px; margin-top: 5px; padding-left: 10px"; 
  ) 

  / ** 
  * Determine whether the specified node has access node of 
  * @ Param _nodeId designated node id 
  * @ Return [boolean] has been true for the acquisition, for not obtaining false 
  * / 
  This.alreadyGetChileren = function (_nodeId) 
  ( 
  Var obj = document.getElementById (_nodeId + "_subContainer"); 
  If (obj) 
  ( 
  Return true; 
  ) 
  Return false; 
  ) 
  ) 

  / ** 
  * Click on the menu moves 
  * / 
  Function treeNodeChoosed (_obj) 
  ( 
  Var choosedColor = "lightblue"; 
  Var unChoosedColor = "white"; 

  If (_obj.style.backgroundColor == choosedColor) 
  ( 
  _obj.style.backgroundColor = UnChoosedColor; 
  ) 
  Else 
  ( 
  / / Var allNodeText = document.getElementsByName ( "treeText"); 
  Var allNodeText = document.getElementsByTagName ( "SPAN"); 
  For (var i = 0; i <allNodeText.length; i + +) 
  ( 
  AllNodeText [i]. Style.backgroundColor = unChoosedColor; 
  ) 
  _obj.style.backgroundColor = ChoosedColor; 
  ) 
  ) 


  - Is the return of service xml with responseText of Chinese issues trouble, using the xml, xml-such as: 

  <? Xml version = "1.0" encoding = "UTF-8"> 
<root>
  <node Id="1" hasChildren="1"> test node 1 </ node> 
  <node Id="2" hasChildren="0"> test node 2 </ node> 
  </ Root> 

  That the selected node is the son of nodes, is the id of the id in the database, hasChildren said whether the lower level of its nodes, as what other attributes can be added according to their own needs, then, in the spanning tree in the corresponding js East on the East. 
  I tested using the asp, asp convenient place, test2.asp code as follows: 

  <% @ LANGUAGE = "JAVASCRIPT" CODEPAGE = "65001"%> 
<%
  Response.ContentType = "text / xml"; 
  Var xmlString = '<? Xml version = "1.0" encoding = "UTF-8 "?>'; 
  XmlString + = '<root>'; 
  If (Request.QueryString ( "pId ")==" 0") 
  ( 
  XmlString + = '<node id="1" hasChildren="1"> testing Category 1 </ node>'; 
  ) 
  Else if (Request.QueryString ( "pId ")==" 1") 
  ( 
  XmlString + = '<node id="2" hasChildren="1"> testing Category 2 </ node>'; 
  XmlString + = '<node id="4" hasChildren="0"> testing Category 4 </ node>'; 
  XmlString + = '<node id="5" hasChildren="1"> testing Category 5 </ node>'; 
  ) 
  Else if (Request.QueryString ( "pId ")==" 2") 
  ( 
  XmlString + = '<node id="6" hasChildren="1"> testing Category 6 </ node>'; 
  XmlString + = '<node id="3" hasChildren="0"> testing Category 3 </ node>'; 
  ) 
  XmlString +='</ root> '; 
  Response.write (xmlString); 
  %> Test page code below (test.htm): 
<html>
<head>
  <title> Test </ title> 
  <meta Http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <script Language="javascript" src="js/ajax.js"> </ script> 
  <script Language="javascript" src="js/treeMenu.js"> </ script> 
  <style Type="text/css"> 
  <! -- 
  Body (font-size: 12px;) 
-->
  </ Style> 
  </ Head> 
<body>
  <a Href="javascript:TreeMenu.getChildren('0');"> show categories </ a> 
  <a Href="javascript:Request.intervalSend(3000,'test2.asp?pId=1',processRequest);"> regularly request testing </ a> 
  <div Id="0"> </ div> 
<script>
  TreeMenu._url = "test2.asp"; 
  Var processRequest = function (obj) 
  ( 
  Alert (obj.responseText); 
  ) 
  </ Script> 
  </ Body> 
  </ Html> 


Related articles:

HTML basic elements of Suchabiao
  Function    Basic labels    Create an HTML document    <html> </ Html>    Document Title, as well as other settings are not displayed on the website WEB information    <head> </ Head>    Set the visibil...
Exploration F9 As3.0 Preview
  Exploration Flash Professional Actionscript 3.0 Preview    Statement: The Guide to English from Adobe: http://www.adobe.com/devnet/flash/articles/flash9_as3_preview.html    Original author: Jen deHaan and Peter deHaan    Site finishing its translation, this t...
Asp.net ajax program design notebook 3 - ScriptManager attributes of EnablePageMethods
  ScriptManager the EnablePageMethods attribute set javascript direct client services-called static WebMethod    EnablePageMethods.aspx    <script Type="text/javascript">    Var txtName;    Var lblMsg;    Function pageLoad ...
SEO: ajax search engines killer?
  A few days ago to google with the open source projects GWT (Google Web Toolkit).    GWT is a very useful and very interesting things.    It is a concept: the use of pure jscript to create your website.    GWT example of a site Kitchen Sink, very complex pages, H...
CSS expression of alternative treatments
  Css expression the following problems    1. Support only IE, Firefox is not provided;    2. Very expendable CPU resources;    Add a casual expression expression, in IE under Huang few mouse, CPU immediately promoted, resulting in slow response system  &n...