淺談關於JavaScript解析XML文件的注意事項

之前在重慶農商行的時候做項目，涉及到一個級聯的功能，需要從XML中讀取數據存到select框中。

 

開始的時候一直出錯，首先是火狐瀏覽器報錯、但是IE正常，后來是火狐瀏覽器不報錯了但是不顯示、而IE依然顯示。

 

經過一番仔細的研究，總算解決了問題，下面我總結一下， 希望給更多的人帶來幫助。

 

首先呢，是 頁面加載的時候要把數據從XML中讀取並且存入select中的option 。

 

以下是詳細的代碼

 

 

第一步：以下是我所定義的XML代碼 名稱為school.xml

<?xml version="1.0" encoding="UTF-8" ?>
<schools>
  <province name="北京市">
  <school>北京大學</school>
  <school>清華大學</school>
  <school>中國人民大學</school>
  <school>北京交通大學</school>
  <school>北京工業大學</school>
  <school>北京航空航天大學</school>
  <school>北京大學(醫學部)</school>
  <school>北京理工大學</school>
  <school>北京科技大學</school>
  <school>中央民族大學</school>
 </province>
 <province name="天津市">
  <school>南開大學</school>
  <school>天津大學</school>
  <school>天津科技大學</school>
  <school>天津工業大學</school>
  <school>中國民航大學</school>
 </province>
 <province name="上海市">
  <school>復旦大學</school>
  <school>同濟大學</school>
  <school>上海交通大學</school>
  <school>華東理工大學</school>
  <school>上海理工大學</school>
 </province>
</schools>

 

 

第二步：以下這是Javascript的代碼

<script type="text/javascript">

window.onload = function(){ 
    //聲明XML對象
    var xmlhttp; 
    //  IE7+, Firefox, Chrome, Opera, Safari 等等都支持XMLHttpRequest，所以用new XMLHttpRequest();可直接獲取對象
    if (window.XMLHttpRequest) {  
        xmlhttp = new XMLHttpRequest();
    }
    //但是 IE6、IE5等等不支持XMLHttpRequest，所以用以下的方式獲取，創建一個空的微軟 XML 文檔對象
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }     

    //打開XML文檔  我的這句話是我的XML文檔所在的路徑 
   <s:property value="webPath" />/resource/xml/schools.xml  
    //之所以后面是false，意思是：關閉異步加載，這樣確保在文檔完全加載之前解析器不會繼續腳本的執行  
    xmlhttp.open("GET", "<s:property value="webPath" />/resource/xml/schools.xml", false);
    xmlhttp.send();
      
    var xmlDom = xmlhttp.responseXML;
    
       //獲取xml文件的根節點  
    var root = xmlDom.documentElement;
    
       
      
    //獲取根節點下面的省節點  
    var provinces = root.childNodes;  
    
      
    var province = document.getElementById("province"); 

    for (var i = 0; i < provinces.length; i++) {  
        //獲取省節點的name屬性的值  
        if(provinces[i].nodeType == 1){
            var name = provinces[i].getAttribute("name");  
                //創建一個option  
            var opt = document.createElement("option");  
               //為option添加文本  
            opt.appendChild(document.createTextNode(name));  
            //添加到父節點中  
            province.appendChild(opt);  
        }
    }  
      
    var cities = document.getElementById("PRB_SCHOOLNAME"); 
    province.onchange = function(){  
        var pce = document.getElementById("province");  
        var opts = pce.options;  
        //根據下標獲取選中的OPTION  
        var opt1 = opts[pce.selectedIndex];  
        var name = opt1.innerHTML;  
        for (var i = 0; i < provinces.length; i++) {  
            //獲取省節點的name屬性的值  
            if(provinces[i].nodeType == 1){
                var name1 = provinces[i].getAttribute("name");  
                if (name == name1) {  
                    cities.length = 1;//每次改變的時候清空  
                    var pros = provinces[i];  
                    var citys = pros.childNodes;  
                      
                    for (var j = 0; j < citys.length; j++) {  
                     if(citys[j].nodeType == 1){
       //創建一個option  
       var cityName;
       if(citys[j].text){
        cityName = citys[j].text;
       }else{
        cityName = citys[j].textContent
       }
       var opt = document.createElement("option");  
       //為option添加文本  
       opt.appendChild(document.createTextNode(cityName));  
       //添加到父節點中  
       cities.appendChild(opt);  
      } 
                    }  
                }  
            }  
        }  
    }  
} 

</script>

 

 

第三步：以下是html頁面body中的代碼

<span>  
                     <select id="province" name="province">  
                         <option>請選擇省</option>  
                     </select>  
                 </span>  
                 <span>  
                     <select id="PRB_SCHOOLNAME" name="PRB_SCHOOLNAME">  
                         <option>請選擇學校</option>  
                     </select>  
                 </span>

 

 

如果大家有更好的方式，希望可以交流一下經驗，一起進步。

 

 

 注意：在做級聯的時候，通常有AJAX和XML兩種實現方式。

　　　 如果數據是固定的，那么建議采用XML的方式進行操作，因為XML是一次加載，就不會重復的進行讀取，比在數據庫要有效率！

　　　 但是如果是動態的數據，用戶可以自由修改數據的，那么建議采用ajax 的方式，因為XML的讀寫是很消耗性能的，沒有數據庫的讀寫效率高，而且也不適合大量數據的頻繁讀寫。