How can I iterate XMLHttpRequest?

Question

I have two files: one file contains php code (and it works properly) and the other one contains javacript. The problem is in javascript page:

function calcDist() {
    var citta = $("#txtpartenza").val();


    $.ajax({
        type: "POST",
        url: 'mostraPartenze.php',
        dataType: "json",
        success: function (data) {
            $.each(data, function (index) {
                var partenza = data[index];
                trovaGeo(citta, partenza);

            });

        }

    });
}

function trovaGeo(partenza, destinazione) {
    var latPartenza;
    var lonPartenza;
    var latDestinazione;
    var lonDestinazione;

    console.log(partenza);            // for test
    console.log(destinazione);        // for test

    var xmlhttpPart = new XMLHttpRequest();
    var xmlhttpDest = new XMLHttpRequest();

    xmlhttpPart.open("GET", "https://geocoder.cit.api.here.com/6.2/geocode.json?searchtext="+partenza+"&app_id=[APP_ID]&app_code=[APP_CODE]&gen=8", true);
    xmlhttpPart.send();

    xmlhttpDest.open("GET", "https://geocoder.cit.api.here.com/6.2/geocode.json?searchtext="+destinazione+"&app_id=[APP_ID]&app_code=[APP_CODE]&gen=8", true);
    xmlhttpDest.send();

    xmlhttpPart.onreadystatechange = function () {
        if (xmlhttpPart.readyState == 4 && xmlhttpPart.status == 200) {
            xmlhttpDest.onreadystatechange = function () {
                if (xmlhttpDest.readyState == 4 && xmlhttpDest.status == 200) {

                    var resPart = JSON.parse(xmlhttpPart.responseText);

                    latPartenza = resPart.Response.View[0].Result[0].Location.DisplayPosition.Latitude;
                    lonPartenza = resPart.Response.View[0].Result[0].Location.DisplayPosition.Longitude;

                    var resDest = JSON.parse(xmlhttpDest.responseText);

                    latDestinazione = resDest.Response.View[0].Result[0].Location.DisplayPosition.Latitude;
                    lonDestinazione = resDest.Response.View[0].Result[0].Location.DisplayPosition.Longitude;

                    lonDestinazione = resDest.Response.View[0].Result[0].Location.DisplayPosition.Longitude;   

                    console.log(latPartenza);
                }

            };
        }
    };

}

Ajax works correctly; I can call trovaGeo(citta, partenza) without problems but in trovaGeo(partenza, destinazione) function, XMLHttpRequest "part" doesn't work properly: in console the variable latPartenza is never printed and obviously all codes in xmlhttpPart.onreadystatechange = [...] it's never executed.

For completeness this is the heart of php file:

$i = 0;
$citta = array();

while ($rows = $result->fetch_assoc()) {
    $citta[$i] = $rows['partenza'];
    $i=$i+1;
}
echo json_encode($citta);

Answer 1

I find the problem.

I have to use preventDefault in the first line of the event of on('submit'...

This is the solution:

$('form').on('submit', function (e) {

    e.preventDefault();

    [...]

Answer 2

The problem might be with nested onreadystatechagestatements , there might be a delay in responses. But I can see that second request is dependent on first request response.try the below change

xmlhttpPart.onreadystatechange = function() {
      if (xmlhttpPart.readyState == 4 && xmlhttpPart.status == 200) {

          xmlhttpDest.open("GET", "https://geocoder.cit.api.here.com/6.2/geocode.json?searchtext=" + destinazione + "&app_id=[APP_ID]&app_code=[APP_CODE]&gen=8", true);
          xmlhttpDest.send();
          xmlhttpDest.onreadystatechange = function() {
             //  your code
                  console.log(latPartenza);
              }

          };
      }
  };