Ajax学习第一章--读取XML
基础：首先要明白各浏览器获取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的方式
?