Obtenir AJAX pour travailler avec JavaScript

Question

Juste pour signaler, je sais comment le faire avec jQuery et AngularJS. Le projet sur lequel je travaille actuellement m'oblige à utiliser du JavaScript simple. J'essaie de faire fonctionner AJAX avec du JavaScript simple. J'utilise Java/Spring pour la programmation backend. Voici mon code JavaScript:

/** AJAX Function */ 
ajaxFunction = function(url) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.status == 200) { 
      var JSONResponse = JSON.parse(xhttp.responseText); 
      return JSONResponse; 
     } 
    } 
    xhttp.open('GET', url, true); 
    xhttp.send(); 
} 

/** Call Function */ 
searchResults = function() { 
    var test = ajaxFunction('http://123.456.78.90:8080/my/working/url'); 
    console.log(test); 
} 

/** When the page loads. */ 
window.onload = function() { 
    searchResults(); 
} 

Il convient de noter que quand je vais directement à l'URL dans ma barre d'adresse du navigateur (par exemple, si je vais directement sur le lien http://123.456.78.90:8080/my/working/url), je reçois une réponse JSON dans le navigateur .

Lorsque je survole xhttp.status, le statut indique 0, pas 200, même si je sais que le lien que j'appelle fonctionne. Est-ce quelque chose que vous devez définir dans les contrôleurs de Spring? Je ne pensais pas que c'était le cas parce que quand j'inspecte cet appel JS URL dans l'onglet Réseau, il indique que le statut est 200.

Dans l'ensemble, cette réponse revient undefined. Je ne peux pas comprendre pourquoi. Qu'est-ce que je fais mal?

Answer 1

Un XMLHttpRequest est créé de manière asynchrone, ce qui signifie que la demande est déclenchée et que le reste du code continue de s'exécuter. Un rappel est fourni et lorsque l'opération asynchrone est terminée, la fonction de rappel est appelée. La fonction onreadystatechange est appelée à la fin d'une requête AJAX. Dans votre exemple, le ajaxFunction retournera immédiatement après l'exécution de la ligne xhttp.send(), donc votre var test n'aura pas le JSON dedans comme je suppose que vous vous attendez.

Afin de faire quelque chose lorsqu'une requête AJAX est terminée, vous devez utiliser une fonction de rappel. Si vous voulez enregistrer le résultat à la console comme ci-dessus, vous pouvez essayer quelque chose comme ce qui suit:

var xhttp; 

var handler = function() { 
    if(xhttp.readyState === XMLHttpRequest.DONE) {  
     if (xhttp.status == 200) { 
      var JSONResponse = JSON.parse(xhttp.responseText); 
      console.log(JSONResponse); 
     } 
    } 
}; 

/** AJAX Function */ 
var ajaxFunction = function(url) { 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = handler; 
    xhttp.open('GET', url, true); 
    xhttp.send(); 
};  

/** Call Function */ 
var searchResults = function() { 
    ajaxFunction('http://123.456.78.90:8080/my/working/url'); 
}; 

/** When the page loads. */ 
window.onload = function() { 
    searchResults(); 
}; 

Si vous voulez en savoir plus sur la façon dont fonctionne alors XMLHttpRequest MDN est un enseignant beaucoup mieux que moi :)