兼容各浏览器的Ajax，利用js 读取xml文件

在项目中要利用js 读取xml 文件，通过以前常用的 ItemNode.getElementsByTagName("Id")[0].firstChild.nodeValue;在各个浏览器下存在不兼容的问题，尤其在chrome下，根本没有值读到，在网上查了很多资料，反正有很多说法，有说在chrome 下，不能得到xmlDoucment的，针对各种浏览器创建的xmlHttp也是一大堆，后来我发现很多情况下，已经存在了xmlDocument了，但是还是得不到值，于是查询了一些资料后，得出下面的代码，

这段代码，应该是能在各浏览器下测试的。IE6 chrome firefox,opera,傲游，360等各浏览器我都测过，IE7,iE8没有测，我想应该正常的。

 

pa.xml

<?xml version="1.0" encoding="utf-8"?>
<states>
  <north>
    <state>Minnesota</state>
    <state>Iowa</state>
    <state>North Dakota</state>
  </north>

  <South>
    <state>
      <City>Minnesota</City>
      <Pupulation>6000000</Pupulation>
    </state>
    <state>
      <City>Iowa</City>
      <Pupulation>7000000</Pupulation>
    </state>
    <state>
      <City>North Dakota</City>
      <Pupulation>8000000</Pupulation>
    </state>
  </South>

  <East>
    <state>Minnesota</state>
    <state>Iowa</state>
    <state>North Dakota</state>
  </East>

  <West>
    <state>Minnesota</state>
    <state>Iowa</state>
    <state>North Dakota</state>
  </West>

</states>

 

 

 

Js 代码

 

    <script language="javascript" type="text/javascript">
    var xmlHttp;
    var requestType="";
    
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }
     } 



    function startRequest(requestedList)
    {
        requestType = requestedList;
        createXMLHttpRequest();
        xmlHttp.open("GET","pa.xml",true);
        xmlHttp.onreadystatechange = handleStateChange;
        
        xmlHttp.send(null);
    }
    
    
    function handleStateChange()
    {
        if(xmlHttp.readyState ==4)
         {
             if(xmlHttp.status ==200)
             {
                if(requestType=="north")
                {
                    listNorthStates();
                }
                else if(requestType=="South")
                {
                    listSouthStates();
                }
                else if(requestType=="all")
                {
                    listNorthStates();
                }
            }
        }
    }
    
    
    function listNorthStates()
    {
        var xmlDoc = xmlHttp.responseXML;
        var northNode = xmlDoc.getElementsByTagName("north")[0];
        var out ="Northern States";
        var northStates = northNode.getElementsByTagName("state");
        outputList("Northern States",northStates);
    }
    
    
    function listSouthStates()
    {
        var xmlDoc = xmlHttp.responseXML;
        var SouthNode = xmlDoc.getElementsByTagName("South")[0];
        var SouthStates = SouthNode.getElementsByTagName("state");
        
        for(var i=0;i<SouthStates.length;i++)
        {
            var SouthState = SouthStates[i];
            
            var CityNode = SouthState.getElementsByTagName("City")[0];
            
            var PopulationNode =SouthState.getElementsByTagName("Pupulation")[0] ;
            
            alert(CityNode.childNodes[0].nodeValue);
            alert(PopulationNode.childNodes[0].nodeValue);
            
        }
    }


    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>

 

 

 

Html 代码

 

<input type="button" value="north" onclick="startRequest('north');" />
<input type="button" value="south" onclick="startRequest('South');" />