parseXML.html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>parseXML.html</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp;
var requestType="";
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//针对FireFox,mozillar,opera,Safari,IE7,IE8
xmlHttp=new XMLHttpRequest();
//针对某些特定版本的Mozillar浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//页面点击按钮事件--主函数
function startRequest(requestedList){
//从点击事件传参数给requestType赋值
requestType=requestedList;
//第一步：创建XMLHttpRequest对象
createXMLHttpRequest();
//第二步：注册回调函数时，只需要函数名，不需要加括号
//需要将函数名注册，如果加上括号，就会把函数返回值注册上，这是错误的
xmlHttp.onreadystatechange=handleStateChange;
//第三步：建立与服务器的调用。
//第一个参数：http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数：请求url的地址，get方式请求的参数也在url中
//第三个参数：采用异步还是同步方式交互，true表示异步
xmlHttp.open("GET","parseXML.xml",true);
//第四步：发送请求，开始和服务器端进行交互
//同步方式下：send这句话会在服务器端数据回来才执行完
//异步方式下：send这句话会立即完成执行
xmlHttp.send(null);
}
//监听状态函数
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//根据点击事件时requestSate参数判断
if(requestType=="north"){
//转到函数listNorthStates(),只显示所有北部州名
listNorthStates();
}else if(requestType="all"){
//转到函数listAllStates(),显示所有州名
listAllStates();
}
}
}
}
function listNorthStates(){
//xmlDoc取到值，由xmlHttp对象的responseXML方法从服务器的parseXML.xml文件取到
var xmlDoc=xmlHttp.responseXML;
//返回xml文件中指定标记值
var northNode=xmlDoc.getElementsByTagName("north")[0];
var out="North States";
//返回标记内的指定标记数组
var northStates=northNode.getElementsByTagName("state");
//转到在客户端输出的函数outputList();
outputList("Northern States",northStates);
}
function listAllStates() {
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出函数
function outputList(title,states){
var out=title;
var currentState=null;
for(var i=0;i<states.length;i++){
currentState=states[i];
out=out+"\n-"+currentState.childNodes[0].nodeValue;
}
//弹出提示框
alert(out);
}
</script>
<h1>处理XML文档</h1>
<br/><br/>
<form action="#">
<input type="button" value="查看所有州的列表" οnclick="startRequest('all')">
<br/><br/>
<input type="button" value="查看所有北部地区的州列表" οnclick="startRequest('north')">
</form>
</body>
</html>
parseXML.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
