基础:首先要明白各浏览器获取XMLHttpRequest对象的差异
Firefox, Opera 8.0+, Safari: xmlHttp=new XMLHttpRequest();
IE:xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
其次要明白三行代码
xmlHttp.onreadystatechange = function(){ }
表示响应到达客户端该如何处理,只有在 xmlHttp.open("GET","jilian/ss.xml",true)第三个参数为true才能使用
xmlHttp.open("GET","jilian/ss.xml",true)
表示Ajax以get的方式向哪一个服务器组件发出请求,第三个参数代表是否使用异步请求true表示是
xmlHttp.send(null);
发送请求
<script type="text/javascript"> function change(str) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { //取得该XML文件 var xml = xmlHttp.responseXML; // 取得XML文档的根 var root = xml.documentElement; //获取标签为sheng的节点 var sheng = root.getElementsByTagName("sheng"); var shi; var shiSelect=""; for(var i = 0;i<sheng.length;i++) { //通过getAttribute获取节点的某个属性值 if(str == sheng[i].getAttribute("value")) { shi = sheng[i].getElementsByTagName("shi"); for(var j = 0;j<shi.length;j++) { //获取节点之间的内容 shiSelect+="<option>"+shi[j].firstChild.nodeValue+"</option>"; } } } document.getElementById("shi").innerHTML = shiSelect; } } xmlHttp.open("GET","jilian/ss.xml",true) xmlHttp.send(null); } </script> </head> <body> <select id="sheng" onchange="change(this.value)"> <option>山东</option> <option>北京</option> </select> <select id="shi"> </select> </body>
读取的XML文件 为
<?xml version="1.0" encoding="UTF-8"?> <shengs> <sheng value="山东"> <shi value="青岛">青岛</shi> <shi value="济南">济南</shi> <shi value="潍坊">潍坊</shi> <shi value="东营">东营</shi> <shi value="菏泽">菏泽</shi> </sheng> <sheng value="北京"> <shi value="东城">东城</shi> <shi value="西城">西城</shi> <shi value="朝阳">朝阳</shi> </sheng> </shengs>
在这里要注意Ajax读取XML的方式