Use Ajax to read XML to implement dynamic drop-down navigation

Create a navigation menu for product classification based on the customer's needs, which was previously read recursively using ASP. It is slow and consumes a lot of server resources. Simply change it to AJAX + XML. Share it with you. I hope you can help us with the improvement.
XML file of product category Copy codeThe Code is as follows: // id is its own id, pid is its parent category ID
<? Xml version = "1.0" encoding = "UTF-8"?>
<Proot>
<Item id = "1" pid = "0"> series 1321 </Item>
<Item id = "2" pid = "1"> series 43223 </Item>
</Proot>

Js CodeCopy codeThe Code is as follows: var root;
// FireFox does not support the selectNodes method. This code is found on the Internet to solve this problem. Compatible with IE and FireFox.
// Create the selectNodes Method
If (document. implementation. hasFeature ("XPath", "3.0 "))
{
// Prototying the XMLDocument
XMLDocument. prototype. selectNodes = function (cXPathString, xNode)
{
If (! XNode) {xNode = this ;}
Var oNSResolver = this.createNSResolver(this.doc umentElement)
Var aItems = this. evaluate (cXPathString, xNode, oNSResolver,
XPathResult. ORDERED_NODE_SNAPSHOT_TYPE, null)
Var aResult = [];
For (var I = 0; I <aItems. snapshotLength; I ++)
{
AResult [I] = aItems. snapshotItem (I );
}
Return aResult;
}

// Prototying the Element
Element. prototype. selectNodes = function (cXPathString)
{
If (this. ownerDocument. selectNodes)
{
Return this. ownerDocument. selectNodes (cXPathString, this );
}
Else {throw "For XML Elements Only ";}
}
}

Function createXMLHttpRequest (){
If (window. ActiveXObject ){
OXmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
OXmlHttp = new XMLHttpRequest ();
}

}

Function CreateXMLDOM ()
{
CreateXMLHttpRequest ();
OXmlHttp. open ("GET", "XML Path", false );
OXmlHttp. send (null );
Root = oXmlHttp.responseXML.doc umentElement;
}
CreateXMLDOM ()

Function funCreatePullMenu (passPid, ChildId)
{

Var currentItems = root. selectNodes ("// Proot/Item [@ pid =" + passPid + "]");
Var iItems = currentItems. length;
Var k = 0;
If (iItems> 0)
{

Var pdiv = document. createElement ("DIV ");
Pdiv. id = "piv" + passPid;
Pdiv. className = "piv" + ChildId;
Pdiv. name = "piv" + passPid;
If (passPid> 0)
{
Pdiv. style. display = "none ";
Document. getElementById ("div" + passPid). appendChild (pdiv );
}
Else
{
Document. getElementById ("odiv"). appendChild (pdiv );
}
For (var I = 0; I <iItems; I ++)
{
Var _ id = currentItems [I]. attributes [0]. value;
Var newChild = document. createElement ("DIV ");
NewChild. id = "div" + _ id;
NewChild. className = "div" + ChildId;
NewChild. name = "div" + _ id;

Var _ v;
If (CheckPullMenu (_ id ))
{
_ 1 = _ id
_ V = "<a href = 'javascript: showsubmenu (" + _ 1 + ") '>" + currentItems [I]. firstChild. data + "</a> ";
}
Else
{
_ V = "<a href = 'productlist. aspx? Type = "+ _ id +" '> "+ currentItems [I]. firstChild. data +" </a> ";
}

NewChild. innerHTML = _ v;

Document. getElementById ("piv" + passPid). appendChild (newChild );
If (CheckPullMenu (_ id ))
{
FunCreatePullMenu (_ id, ChildId + 1)
}
}
}
}

// Check whether there are subordinates
Function CheckPullMenu (passPid)
{

Var currentItems = root. selectNodes ("// Proot/Item [@ pid =" + passPid + "]");
Var iItems = currentItems. length;
If (iItems> 0)
{
Return true;
}
Else
{
Return false;
}

}

// Display the hidden layer
Function showsubmenu (sid)
{
Var whichEl = document. getElementById ("piv" + sid );
If (whichEl. style. display = "none ")
{
WhichEl. style. display = "block ";
}
Else
{
WhichEl. style. display = "none ";
}
}

Usage: Add "<div id =" odiv "> </div>" to the webpage ". Add onload = "funCreatePullMenu (0, 0)" to the body )"

Final effect:

You can add CSS definitions in the code. To achieve better results.

Original: http://www.23mo.com/blog/article.asp? Id = 16
Usage: Add "<div id =" odiv "> </div>" to the webpage ". Add onload = "funCreatePullMenu (0, 0)" to the body )"

Final effect:

You can add CSS definitions in the code. To achieve better results.

Original: http://www.23mo.com/blog/article.asp? Id = 16