当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 建立XMLHttpRequest对象

AJAX技术
一个简单的ASP+AJAX留言本源码下载
IE7下ajax之open Method New的说明
ASP+Ajax实现无刷新评论简单例子
AJAX的阻塞及跨域名解析
[js]一个获取页面ip的正则
AJAX乱码解决新方法
也写一个Ajax.Request类附代码
AJAX简历系统附js文件
Ajax留言本源码 提供下载了
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了
Ajax 学习资源 中外都有
本人ajax留言板的源程序 不错的应用js
xmlhttp 乱码 比较完整的解决方法 (UTF8,GB2312 编码 解码)
AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
AJAX缓存问题的两种解决方法(IE)
AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器
Ajax的小贴士使用小结
用ajax动态加载需要的js文件
XMLHTTP多浏览器兼容性写法
PJBLOG中用到的ajaxjs.几个简单的函数

AJAX技术 中的 建立XMLHttpRequest对象


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 40 ::
收藏到网摘: n/a

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
}