title: responseText works but responseXML is always null
body: <p>I've looked through every answer i can find on here and can't solve this. 
  I'm pretty sure I havn't missed anything obvious.</p>
  
  <p>I'm trying to load map markers based on lat longs. The problem is when I try to return the AJAX response as responseXML its always null, if i use responseText it works fine but obviously the next step doesn't work.</p>
  
  <p>This is the PHP that generates the XML:</p>
  
  <pre><code>&lt;?php
  header('Content-type: text/xml');
  ?&gt;    
  &lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;properties&gt;
      &lt;![CDATA[
  &lt;?php 
  if ($body != null): 
          foreach ($body as $property): ?&gt;
          &lt;property&gt;
              &lt;lat&gt;&lt;?php echo $property -&gt; lat; ?&gt;&lt;/lat&gt;
              &lt;long&gt;&lt;?php echo $property -&gt; long; ?&gt;&lt;/long&gt;
              &lt;name&gt;&lt;?php echo $property -&gt; property_name; ?&gt;&lt;/name&gt;
              &lt;/property&gt;
  &lt;?php endforeach;
  endif; ?&gt;
      ]]&gt;
  &lt;/properties&gt;
  </code></pre>
  
  <p>I can see in Fiddler that the request is made ok</p>
  
  <blockquote>
    <p>GET
    /letsgo/index.php/hotmaps/get_properties_ajax/22.270888501350186/22.288560098193066/114.13720860290528/114.19827713775635
    HTTP/1.1</p>
    
    <p>Entity Content-type: text/xml</p>
  </blockquote>
  
  <p>Although when i view this in XML view in fiddler it appears to be empty,</p>
  
  <p>here is the raw response</p>
  
  <pre><code>HTTP/1.1 200 OK
  Date: Tue, 15 Jan 2013 11:04:27 GMT
  Server: Apache/2.4.2 (Win32) PHP/5.4.4
  X-Powered-By: PHP/5.4.4
  Expires: Thu, 19 Nov 1981 08:52:00 GMT
  Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
  Pragma: no-cache
  Content-Length: 310
  Keep-Alive: timeout=5, max=100
  Connection: Keep-Alive
  Content-Type: text/xml
  
  
  
  &lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;properties&gt;
      &lt;![CDATA[
          &lt;property&gt;
              &lt;lat&gt;22.2776&lt;/lat&gt;
              &lt;long&gt;114.173&lt;/long&gt;
              &lt;name&gt;Kaxo Tower test&lt;/name&gt;
              &lt;/property&gt;
          &lt;property&gt;
              &lt;lat&gt;22.2803&lt;/lat&gt;
              &lt;long&gt;114.16&lt;/long&gt;
              &lt;name&gt;Kuno Tower&lt;/name&gt;
              &lt;/property&gt;
      ]]&gt;
  &lt;/properties&gt;
  </code></pre>
  
  <p>Here is the create marker function that is called every time the map is moved</p>
  
  <pre><code>// make the ajax request
  function loadXMLDoc(downUrl){
      var xmlhttp;
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
      else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
          {
  
              //var propertiesXml = xmlhttp.responseText; // WORKS FINE!!
              var propertiesXml = xmlhttp.responseXML; // ALWAYS null
              //alert(propertiesXml);     
              var propertiesRows = propertiesXml.getElementsByTagName("property");
  
              for (var i = 0; i &lt; propertiesRows.length; i++) {           
              var propertiesRow = propertiesRows[i];
              var xmlLat = propertiesRow.getElementsByTagName("lat")[0];
              var xmlLong = propertiesRow.getElementsByTagName("long")[0];
              var propertyLatLong = new google.maps.LatLng(parseFloat(xmlLat.firstChild.data),parseFloat(xmlLat.firstChild.data));            
              // create each marker
              createMarker(propertyLatLong);
              }   
  
          }
        }
      xmlhttp.open("GET", downUrl, false); // false or true? makes no difference
      xmlhttp.setRequestHeader("Content-type", "text/xml");
      xmlhttp.send(); 
  }
  </code></pre>
  
  <p>and this is the error i get for feeding getElementsByTagName with null, Chrome console says</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot call method 'getElementsByTagName' of null</p>
  </blockquote>
  
  <p>This is running on my local Apache</p>
  
  <p>Any suggestions?</p>
  
  <p>/** UPDATE - WORKING CODE **/</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&amp;sensor=false"&gt;
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;  
  
        // initialise map 
        function initialize() {
  
        // set starting latlong
        var myLatlng = new google.maps.LatLng(22.2776, 114.173); 
  
        // set initial map options        
        var mapOptions = {
          center: myLatlng,
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
        // create the map                       
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
  
        // listen for changes in map bounds - after map has stopped moving!!      
        google.maps.event.addListener(map,'idle', function () {      
          loadByBounds(map);          
          });                 
        }
  
        // if the bounds have changed 
        function loadByBounds(map) {  
  
          var bounds = map.getBounds();       
          var swPoint = bounds.getSouthWest();
          var nePoint = bounds.getNorthEast();
  
          // specific co ordinates
          var swLat = swPoint.lat();
          var swLng = swPoint.lng();
          var neLat = nePoint.lat();
          var neLng = nePoint.lng();               
  
          var downUrl = "&lt;?php echo site_url('hotmaps/get_properties_ajax'); ?&gt;/"+swLat+"/"+neLat+"/"+swLng+"/"+neLng;
  
          // load the 
          loadXMLDoc(downUrl, map); 
  
          // clear icons outside of bounding box
  
          //....
  
  
          }
  
          // make the ajax request
          function loadXMLDoc(downUrl, map){
              var xmlhttp;
              if (window.XMLHttpRequest) {
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                }
              else {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
              xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
                  {
  
                      var propertiesXml = xmlhttp.responseText; // WORKS FINE!!
  
                      // remove whitespaces from start and end (.trim() doesnt work)
                      propertiesXml = propertiesXml.replace(/^\s+|\s+$/g,'');                 
  
                      // manually parse to XML DOM object 
                      var parser = new DOMParser();                   
                      var xmlDoc;                 
                         try {
                              xmlDoc = parser.parseFromString (propertiesXml, "text/xml");
                          } catch (e) {
                              alert ("XML parsing error.");
                              return false;
                          };
  
                      //console.log(xmlDoc);
  
                      // get each property
                      var propertiesRows = xmlDoc.getElementsByTagName("property");   
  
                      //alert(console.log(propertiesRows));   
                      for (var i = 0; i &lt; propertiesRows.length; i++) {
  
                          var propertiesRow = propertiesRows[i];
                          var xmlLat = propertiesRow.getElementsByTagName("lat")[0];
                          var xmlLong = propertiesRow.getElementsByTagName("long")[0];
                          var propertyLatLong = new google.maps.LatLng(parseFloat(xmlLat.firstChild.data),parseFloat(xmlLong.firstChild.data));           
                          // create each marker
                          createMarker(propertyLatLong, map);
                      }
                   }
               }
              xmlhttp.open("GET", downUrl, false);
              xmlhttp.setRequestHeader("Content-type", "text/xml");
              xmlhttp.send(); 
          }   
  
          // create new markers
          function createMarker(propertyLatLong, map){             
              var dynamicMarker = new google.maps.Marker({
  
                  map:map,
                  draggable:false,
                  position: propertyLatLong
              });
              debugger;           
          }       
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;      
      &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>