当前位置 博文首页 > 建立XMLHttpRequest对象

    建立XMLHttpRequest对象

    作者:admin 时间:2021-09-22 19:17

    utl.js

    复制代码 代码如下:
    function createXmlTree(node, indent) {

        if (node == null)
            return "";
        var str = "";

        switch (node.nodeType) {
            case 1:    // Element
                str += "<div class='element'>&lt;<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 + "/&gt;</div>";

                str += "&gt;<br />";

                var cs = node.childNodes;
                for (var i = 0; i < cs.length; i++)
                    str += createXmlTree(cs[i], indent + 3);

                str += "&lt;/<span class='elementname'>" + node.nodeName + "</span>&gt;</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 += "&lt;?" + node.nodeName;

                var attrs = node.attributes;
                for (var i = 0; i < attrs.length; i++)
                    str += createXmlAttribute(attrs[i]);

                str+= "?&gt;<br />"
                break;

            case 4:    // CDATA
                str = "<div class='cdata'>&lt;![CDATA[<span class='cdata-content'>" + 
                    node.nodeValue +
                "</span>]" + "]></div>";
                break;

            case 8:    // Comment
                str = "<div class='comment'>&lt;!--<span class='comment-content'>" + 
                    node.nodeValue +
                "</span>--></div>";
                break;

            case 10:
                    str = "<div class='doctype'>&lt;!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 += "&gt;</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(a) {
        return " <span class='attribname'>" + a.nodeName + "</span><span class='attribvalue'>=\"" + a.nodeValue + "\"</span>";
    }

    复制代码 代码如下:

    <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类 ----------------
    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"}
       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.3790.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>


    复制代码 代码如下:

    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 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
    }

    jsjbwy