Javascript和Ajax:检索xml并显示数据

时间:2018-07-31 07:03:45

标签: javascript ajax xml

function downloadUrl(url,callback) 
  {
      var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) 
        {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }

  };

       request.open('GET', url, true);
       request.send(null);
  }

使用ajax请求,我通过php从数据库中检索了一个XML文件,并输入了end exit event。然后我尝试将其显示在Google地图上。我“跟踪”的每个位置都有自己的 Marker ,并且我为每个标记创建了一个div,以便可以显示xml文件中的事件。

downloadUrl('Data1.php', function(data) 
 {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('event');


        //starting the loop
        Array.prototype.forEach.call(markers, function(markerElem) 
        {
         var infowincontent = document.createElement('div');

          var id = markerElem.getAttribute('event_id');
          var name = markerElem.getAttribute('event_type');
          var address = markerElem.getAttribute('region');
          var type = markerElem.getAttribute('details');


           var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

         // var infowincontent = document.createElement('div');

          var strong = document.createElement('strong');
          strong.textContent = ('Action: ');
          infowincontent.appendChild(strong);

          var text1=document.createElement('text');
          text1.textContent= name
          infowincontent.appendChild(text1);

          //infowincontent.appendChild(document.createElement('br'));

          var strong2 = document.createElement('strong');
          strong2.textContent = (' Time: ');
          infowincontent.appendChild(strong2);

          var text2=document.createElement('text');
          text2.textContent= type
          infowincontent.appendChild(text2);



          var strong3 = document.createElement('strong');
          strong3.textContent = (' Details: ');
          infowincontent.appendChild(strong3);

          var text3=document.createElement('text');
          text3.textContent= address
          infowincontent.appendChild(text3);


          infowincontent.appendChild(document.createElement('br'));





          //var text = document.createElement('text');
          //text.textContent = address
          //infowincontent.appendChild(text);




          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });






          infowincontent.appendChild(document.createElement('br'));
          marker.addListener('click', function() 
          {



          infoWindow.setContent(infowincontent);
          infoWindow.open(map, marker);



          });

        });

      });

    }

</script>

但是,如果我在循环内具有div构造,则只能显示xml的第一个日志,而不显示该位置的所有事件。如果我将其置于循环之外,则每个标记的所有事件都具有相同的div,这是错误的,因为我想要退出并输入每个特定位置(标记)的事件。 我需要一个单独的标记循环,另一个需要事件循环,我尝试过但不能这样做。

例如,我只能看到最后一个事件,而不能看到每个事件:请帮助

example of the problem

0 个答案:

没有答案