建立XMLHttpRequest对象

2016-02-19 12:58 6 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐建立XMLHttpRequest对象,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

utl.js
代码如下:
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 + "/spanbr /";
            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(a) {
    return " span class='attribname'" + a.nodeName + "/spanspan class='attribvalue'="" + a.nodeValue + ""/span";
}
代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

HTMLHEADTITLEAjax 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
BODYSELECT
onchange='XMLDoc1.url=this.value;document.getElementById("XMLDebug").innerHTML=""'
  OPTION value=tree.xml selectedtree.xml/OPTION OPTION
  value=xtree.xslxtree.xsl/OPTION OPTION value=/feed.aspBlog
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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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
}

来源:http://www.tulaoshi.com/n/20160219/1602656.html

延伸阅读
标签: Web开发
刚在ajacn发了个贴,关于为XMLHttpRequest提供一个对象池。或许能帮到你,转贴如下: 在网上看到了有些同志提到了为Ajax的XMLHttpRequest提供一个对象池,也读了他们给出的实现代码。感觉不是特别理想,于是模仿apache的commons中的ObjectPool的思路写了一个简单的JavaScript版。  望指教:  代码 function ObjectPool(poo...
标签: Web开发
Objects are useful to organize information. 对于组织信息来讲对象是非常有用的  JavaScript Objects JS对象 Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date...
标签: Web开发
在IE7的开发中,据说新增加了一个Native对象——XMLHttpRequest。怎么难道开发IE7的"新警察"不知道IE6们都用ActiveX对象XmlHttp吗?XmlHttp出了什么问题,IE7为什么要这么做?原来一切就为了一个简单的兼容而已,但让人感慨颇多。     IE7提供XMLHttpRequest对象后,当然会继续支持ActiveX对象XmlHttp,这是微软这么几十...
标签: Web开发
代码如下: function CallBackObject() { this.XmlHttp = this.GetHttpObject(); } CallBackObject.prototype.GetHttpObject = function() //动态为CallBackObject的原型添加了GetHttpObject共有方法 { //第一步:创建XMLHttpRequest对象 //进行兼容性判断 var xmlhttp; /*@cc_on @if (@_jscript_version = 5) try { xmlhttp = ne...
标签: Web开发
在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象。 下面是我最近写的一个简单的类: ...

经验教程

859

收藏

32

精华推荐

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部