Ajax вызов сервлета из JavaScript из функции не возвращает значение

Question

Я пытаюсь загрузить карту с маркерами на веб-сайте. Когда я вызываю сервлет из js вне функции, я получаю значения (координаты для отображения маркера), но когда я помещаю код в вызов сервлета в функции, а затем создаю карту, я вижу только пустую карту без мест или маркер. Я говорю, что это пустой MAP, потому что я вижу указатель мыши как ладонь (например, на карте Google).

Таким образом, карта загружается, но вызов функции, вызывающей сервлет и получение координат, не выполняется. Когда я помещаю код для вызова сервлета снаружи без функции, он работает. Я показываю массив значений из сервлета, используя console.log(). Я вижу только [].

Возможно, xhr.open() не называется. ИДК. Я работаю в JavaScript всего несколько дней. Я не знаю, как это работает. Пожалуйста помоги.

 function initMap() { 
     xhr = new XMLHttpRequest(); 

     getLocation(xhr); // calling the function that gets location from servlet 

     //setTimeout(function(){ 
     var bounds = new google.maps.LatLngBounds(); 
     var mapDiv = document.getElementById('map'); 
     map = new google.maps.Map(mapDiv); 
     map.setCenter(new google.maps.LatLng(latArray[0], lngArray[0])); 
     map.setZoom(18); 
     console.log(deviceId); 
     console.log(latArray); 

     latArray.forEach(function(lat, i) { 
      // For each one create info window 
      var infoWindow = new google.maps.InfoWindow({ 
       content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>' 

      }); 
      marker = new google.maps.Marker({ 
       map: map, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       position: new google.maps.LatLng(latArray[i], lngArray[i]), 
       icon: "phone6.png" 
      }); 
      //marker.setPosition(new google.maps.LatLng(latArray[0],lngArray[0])); 
      marker.addListener("click", function() { 
       //infoWindow.open(map, marker); 
       //marker.setMap(null); 
       placeMarker(this.map,this.marker,latArray[i],lngArray[i]); 
      }); 
     }); 
    // },10000); 
    } 


    function open(){ 
     xhr.open('POST', 'GetLocationFromDB', true); 
     xhr.send(); 
    } 
    //map.fitBounds(bounds); 

    function getLocation(xhr) //function that gets coordinates in array from servlet 
    { 
     xhr.onreadystatechange = function() { //when I put this code above where I created the map, it works 
      if (xhr.readyState == 4) { 
       data = JSON.parse(xhr.responseText); 
       for (i = 0; i < data.length; i++) { 
        if (!((i + 1) % 3 == 0)) { 
         latArray.push(data[i]); 
         lngArray.push(data[i + 1]); 
         i = i + 2; 
         deviceId.push(data[deviceIdLoopCount]); 
         deviceIdLoopCount += 3; 
        } 
       } 
      } 

     } 
    } 

Edit:

Я только что прочитал, что вы не можете вызвать функцию xhr.onreadystatechange и это только ссылка. Я попытался выполнить onreadystatechange(), но он не работал. Я передал xhr.onreadystatechange переменной, в которой я вызывал функцию. Как его выполнить?

Answer 1

Вы не зовем open() и send() метод xhr

function getLocation(xhr) //function that gets coordinates in array from servlet 
{ 
    xhr.open('POST', 'GetLocationFromDB', true); 
    xhr.send(); 
    xhr.onreadystatechange = function() { 
     .... 
    } 
} 

Пожалуйста, обратитесь here

EDIT 1:

определить одну функцию, содержащую вашу карту, связанные с вещью

function createMap(){ 

    var bounds = new google.maps.LatLngBounds(); 
    var mapDiv = document.getElementById('map'); 
    map = new google.maps.Map(mapDiv); 
    map.setCenter(new google.maps.LatLng(latArray[0], lngArray[0])); 
    .. 
} 

Тогда звоните:

getLocation(xhr); 
setTimeout(function(){ createMap() },200)