<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<head>
<script type="text/javascript">
function loadXMLDoc1()
{
//声明一个对象
var xmlhttp;
//解决浏览器兼容问题
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari版本的浏览器使用
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5浏览器使用
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// xmlhttp对象的onreadystatechange是此对象的成员。每当 readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
/*
xmlhttp.readyState的值有5个,从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200: "OK"
404: 未找到页面
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
*/
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./Demo01.php",true);
xmlhttp.send();
}
function loadXMLDoc2()
{
//声明一个对象
var xmlhttp;
//解决浏览器兼容问题
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari版本的浏览器使用
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5浏览器使用
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// xmlhttp对象的onreadystatechange是此对象的成员。每当 readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
/*
xmlhttp.readyState的值有5个,从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
/*
xmlhttp.status的值一般有两个：
200: "OK"
404: 未找到页面
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
/*
将对应的元素的值改为xmlhttp.responseText
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
*/
var txt="";
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("author");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
alert(x);
document.getElementById("myDiv2").innerHTML=txt;
}
}
xmlhttp.open("GET","./Demo01.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX实例Demo01</h2>
<button type="button" onClick="loadXMLDoc1()">请求数据,返回形式为字符串！</button>
<div id="myDiv1"></div>
<button type="button" onClick="loadXMLDoc2()">请求数据,返回形式为XML文件的内容！</button>
<div id="myDiv2"></div>
</body>
</html>
