建立XMLHttpRequest对象

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 + "</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(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
}

赞 (0)

相关推荐

  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author    legend <legendsky@hotmai

  • XMLHTTPRequest的属性和方法简介

    而设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了.这里海啸把我学习XMLHTTPRequest对象的一点资料拿出来跟大家一起分享.文中的资料都是海啸在学习时在网上收集的,如果您开过,那就再加深下印象吧!(如果您觉得侵犯了您的版权,请联系海啸.(haixiao_yao[at]yahoo.com.cn)) 1.XMLHTTPRequest对象什么是? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过ht

  • javascript一个无懈可击的实例化XMLHttpRequest的方法

    复制代码 代码如下: function getHTTPRequest() { var xhr = false; if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); //IE除外的浏览器 else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxm12.XMLHTTP");//最新版的ActiveX对象 } catch(e) { try { xhr = n

  • AJax 学习笔记一(XMLHTTPRequest对象)

    现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了.今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来. 1.何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分

  • AJAX入门之XMLHttpRequest慨述

    在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象.由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例.Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox.Safari和Opera)把它实现为一个本地JavaScript对象.由于存在这些差别,JavaScrip

  • XMLHttpRequest of ajax

    XMLHttpRequest of ajax

    调用 function(Url) {  var XML = new XMLHttpRequest();  XML.onreadystatechange = function() {    if (XML.readyState == 4)    {      if (XML.status == 200)      {        //XML.responseText      }      else      {        //XML.statusText      }    }    el

  • Ajax xmlHttpRequest的status的值的含义

    xmlHttpRequest对象的status代表当前http请求的状态,是一个长整型数据,现在介绍一下它的含义. http请求状态及其含义表 1xx - 信息提示 100 - 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 - 服务器将遵从客户的请求转换到另外一种协议.(HTTP 1.1新) 2xx - 成功 200 - OK 一切正常,对GET和POST请求的应答文档跟在后面. 201 - Created 服务器已经创建了文档,Location头给出了它的

  • IE7提供XMLHttpRequest对象为兼容

    在IE7的开发中,据说新增加了一个Native对象--XMLHttpRequest.怎么难道开发IE7的"新警察"不知道IE6们都用ActiveX对象XmlHttp吗?XmlHttp出了什么问题,IE7为什么要这么做?原来一切就为了一个简单的兼容而已,但让人感慨颇多. IE7提供XMLHttpRequest对象后,当然会继续支持ActiveX对象XmlHttp,这是微软这么几十年来产品升级起码的"素养",丝毫不用我们去担心现在IE上的Ajax应用代码.在Sunava

  • javascript XMLHttpRequest对象全面剖析

    一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G

  • Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

    复制代码 代码如下: /**//// <summary> /// 生成带CDATA的节点 /// </summary> /// <param name="xDocument">XmlDocument</param> /// <param name="elementName">元素名称</param> /// <param name="cdataValue">CDA

  • 一份老外写的XMLHttpRequest代码多浏览器支持兼容性

    这几天要构思用Javascript调用Asp.Net的WebService,需要到XMLHTTP来支持,但发现Opera的XMLHttpRequest很烂,实在支持不下去,后来到处找,终于发现这份代码,在Opera中是利用java.net.URL等类来实现的,不敢独享,特发上来与大家同乐. 复制代码 代码如下: /* Cross-Browser XMLHttpRequest v1.2 ================================= Emulate Gecko 'XMLHttp

  • 一页面多XMLHttpRequest对象

    刚在ajacn发了个贴,关于为XMLHttpRequest提供一个对象池.或许能帮到你,转贴如下: 在网上看到了有些同志提到了为Ajax的XMLHttpRequest提供一个对象池,也读了他们给出的实现代码.感觉不是特别理想,于是模仿apache的commons中的ObjectPool的思路写了一个简单的JavaScript版.  望指教: 代码 function ObjectPool(poolableObjectFactory) {         this._poolableObjectFa

  • ajax 入门基础之 XMLHttpRequest对象总结

    XMLHttpRequest 提供客户端同http服务器通讯的协议 一:创建 IE : http_request = new ActiveXObject("Msxml2.XMLHTTP"); http_request = new ActiveXObject("Microsoft.XMLHTTP"); 非IE: http_request = new XMLHttpRequest(); 二:onreadystatechange 指定当readyState属性改变时的事件

  • [js]轻便的XMLHttpRequest应用函数：downloadUrl()

    前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个.用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人. downloadUrl(url, callback, data); 参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就是responseText,responseCode就是status; data是要post的数据,get方

  • [转]XMLHTTPRequest的属性和方法简介

    1.XMLHTTPRequest对象什么是? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.(这个功能正是AJAX的一大特点之一:)) 来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议.客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用

  • AJAX客户端说明，XMLHttpRequest对象

    在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件.其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX.下面我们来学习学习这个咚咚,希望能给更多的人带来帮助. 首先当然是要了解一下浏览器中的XMLHttp对象了: XMLHTTP方法:           备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析. Open方法:初始化一个Msxml2.XM

  • 建一个XMLHttpRequest对象池

    作者:legend 出处:http://www.ugia.cn/?p=85 在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象.下面是我最近写的一个简单的类: 复制代码 代码如下: /** * XMLHttpReques

随机推荐