Utl. js
Copy codeThe Code is as follows: function createXmlTree (node, indent ){
If (node = null)
Return "";
Var str = "";
Switch (node. nodeType ){
Case 1: // Element
Str + = "<div class = 'element'> <span class = 'elementname'>" + node. nodeName + "</span> ";
Var attrs = node. attributes;
For (var I = 0; I <attrs. length; I ++)
Str + = createXmlAttribute (attrs [I]);
If (! Node. hasChildNodes ())
Return str + "/> </div> ";
Str + = "> <br/> ";
Var cs = node. childNodes;
For (var I = 0; I <cs. length; I ++)
Str + = createXmlTree (cs [I], indent + 3 );
Str + = "</<span class = 'elementname'>" + node. nodeName + "</span> </div> ";
Break;
Case 9: // Document
Var cs = node. childNodes;
For (var I = 0; I <cs. length; I ++)
Str + = createXmlTree (cs [I], indent );
Break;
Case 3: // Text
If (! /^ \ S * $/. test (node. nodeValue ))
Str + = "<span class = 'text'>" + node. nodeValue + "</span> <br/> ";
Break;
Case 7: // ProcessInstruction
Str + = "<? "+ Node. nodeName;
Var attrs = node. attributes;
For (var I = 0; I <attrs. length; I ++)
Str + = createXmlAttribute (attrs [I]);
Str + = "?> <Br/>"
Break;
Case 4: // CDATA
Str = "<div class = 'cdata'> <! [CDATA [<span class = 'cdata-content'> "+
Node. nodeValue +
"</Span>]" + "]> </div> ";
Break;
Case 8: // Comment
Str = "<div class = 'comment'> <! -- <Span class = 'comment-content'> "+
Node. nodeValue +
"</Span> --> </div> ";
Break;
Case 10:
Str = "<div class = 'doctype'> <! DOCTYPE "+ node. name;
If (node. publicId ){
Str + = "PUBLIC \" "+ node. publicId + "\"";
If (node. systemId)
Str + = "\" "+ node. systemId + "\"";
}
Else if (node. systemId ){
Str + = "SYSTEM \" "+ node. systemId + "\"";
}
Str + = "> </div> ";
// TODO: Handle custom DOCTYPE declarations (ELEMENT, ATTRIBUTE, ENTITY)
Break;
Default:
// Alert (node. nodeType + "\ n" + node. nodeValue );
Inspect (node );
}
Return str;
}
Function inspect (obj ){
Var str = "";
For (var k in obj)
Str + = "obj." + k + "=" + obj [k] + "\ n ";
Window. alert (str );
}
Function createXmlAttribute (){
Return "<span class = 'bbname'>" +. nodeName + "</span> <span class = 'bbvalue'> = \" "+. nodeValue + "\" </span> ";
}
Copy codeThe Code is as follows:
<HTML> <HEAD> <TITLE> Ajax test </TITLE>
<META http-equiv = Content-Type content = "text/html; charset = gb2312">
<SCRIPT src = "Ajax test_files/utl. js"> </SCRIPT>
<LINK rev = stylesheet media = all href = "Ajax test_files/Ajax.css" type = text/css
Rel = stylesheet>
<SCRIPT>
// ------------ XMLHttpObj class ----------------
Function XMLHttpObject (url, Syne ){
Var XMLHttp = null
Var o = this
This. url = url
This. Syne = Syne
This. sendData = function ()
{
If (window. XMLHttpRequest ){
XMLHttp = new XMLHttpRequest ();
} Else if (window. ActiveXObject ){
XMLHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
With (XMLHttp ){
Open ("GET", this. url, this. Syne );
Onreadystatechange = o. CallBack;
Send (null );
}
}
This. CallBack = function ()
{
If (XMLHttp. readyState = 4 ){
If (XMLHttp. status = 200 ){
O. debugXML ("readyState:" + XMLHttp. readyState + "<br/> ")
O. debugXML ("status:" + XMLHttp. status + "<br/> ")
O. debugXML ("<div style = 'background: # ffc; margin-left: 10px; border: 1px solid #669; padding: 3px '>" + createXmlTree (XMLHttp. responseXML, 0) + "</div> ")
}
}
}
This. getText = function ()
{
If (XMLHttp = null) {return "XMLHttpRequest has not been loaded "}
If (XMLHttp. readyState = 4) {return XMLHttp. responseText}
Return XMLHttp. readyState
}
This. debugXML = function (log)
{
Try {document. getElementById ("XMLDebug"). innerHTML ++ = log}
Catch (e ){}
}
}
Var XMLDoc1 = new XMLHttpObject ("tree. xml", true)
</SCRIPT>
<META content = "MSHTML 6.00.20.0.2706" name = GENERATOR> </HEAD>
<BODY> <SELECT
Onchange = 'xmldoc1. url = this. value; document. getElementById ("XMLDebug"). innerHTML = "" '>
<OPTION value = tree. xml selected> tree. xml </OPTION> <OPTION
Value = xtree. xsl> xtree. xsl </OPTION> <OPTION value =/feed. asp> Blog
Feed </OPTION> </SELECT> <INPUT onclick = XMLDoc1.sendData () type = button value = XMLDoc1.sendData ()> <INPUT onclick = alert (XMLDoc1.getText ()) type = button value = XMLDoc1.getText ()> <INPUT onclick = "if (confirm ('clear log? ') {Document. getElementById ('xmldebug'). innerHTML = ''}" type = button value = ClearLog>
<DIV id = XMLDebug> </DIV> </BODY> </HTML>
Copy codeThe Code is as follows:
HTML {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
BODY {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
BODY {
BACKGROUND: buttonface; FONT: Message-Box
}
FORM {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
FIELDSET {
MARGIN: 5px
}
BUTTON {
MARGIN-LEFT: 5px
}
TEXTAREA {
WIDTH: 100%; HEIGHT: 200px
}
# Out {
BORDER-RIGHT: threeddarkshadow 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: threeddarkshadow 1px solid; MARGIN-TOP: 5px; PADDING-LEFT: 3px; BACKGROUND: white; PADDING-BOTTOM: 3px; BORDER-LEFT: threeddarkshadow 1px solid; COLOR: black; PADDING-TOP: 3px; BORDER-BOTTOM: threeddarkshadow 1px solid; FONT-FAMILY: Verdana
}
# SrcTextContainer {
DISPLAY: none
}
. Element {
PADDING-LEFT: 16px; COLOR: blue
}
. Elementname {
COLOR: darkred
}
. Attribname {
COLOR: red
}
. Attribvalue {
COLOR: blue
}
. Text {
PADDING-LEFT: 16px; COLOR: windowtext
}
. Cdata-content {
DISPLAY: block; PADDING-LEFT: 16px; BORDER-LEFT: gray 1px solid; COLOR: windowtext; FONT-FAMILY: Courier New; WHITE-SPACE: pre
}
. Comment {
PADDING-LEFT: 16px; COLOR: blue
}
. Doctype {
PADDING-LEFT: 16px; COLOR: blue
}
. Comment-content {
DISPLAY: block; COLOR: gray; FONT-FAMILY: Courier New; WHITE-SPACE: pre
}
# XMLDebug {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #000 1px solid; MARGIN-TOP: 6px; PADDING-LEFT: 4px; FONT-SIZE: 12px; BACKGROUND: # fff; PADDING-BOTTOM: 4px; OVERFLOW: auto; BORDER-LEFT: #000 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 400px
}