建立XMLHttpRequest对象

所属分类：网络编程 / AJAX相关阅读数： 1221

收藏 0赞 0分享

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>

复制代码代码如下:

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
}

更多精彩内容其他人还在看

建立XMLHttpRequest对象

ajax和jsonp跨域的原理本质详解

ajax获取json数据为undefined原因分析

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

ajax中用josnp接收josn数据的实现方法

ajax跨域获取网站json数据的实例

关于前端ajax请求的优雅方案（http客户端为axios）

快速解决ajax请求出错状态码为0的问题

ajax实现改变状态和删除无刷新的实例

ajax结合mysql数据库和smarty实现局部数据状态的刷新方法

Ajax客户端异步调用服务端的实现方法(js调用cs文件)

网络赚钱

站长故事