Correction - AJAX et datalistes

Question

J'essaie d'utiliser XML pour obtenir une liste de villes à partir d'un site Web, puis de passer et d'ajouter chacune des villes à un datalist de sorte que lorsque je mets une entrée, il va filtrer les villes dans la liste.

exemple de liste des villes:

Aleppo 
Alexandria 
Alger 
Almaty 
Ankara 
Anshan 
Baghdad 
Baku 
Bandung 
Bangalore 
Bangkok 
Barcelona 

* [Chaque nom de la ville est sur une nouvelle ligne]

html actuel:

<div id="namearea"> 
     <h2>City Name:</h2> 

     <div> 
      <input id="citiesinput" list="cities"> 
      <datalist id="cities"></datalist> 

      <button id="search"> 
       Search 
      </button> 

      <span class="loading" id="loadingnames"> 
       Loading... 
      </span> 
     </div> 
    </div> 

code actuel JS:

window.onload = function() { 
    var request = new XMLHttpRequest(); 
    request.onload = processCities; 
    request.open("GET", "url", true); 
    request.send(); 
}; 

Inspection de la page avec h Firebug montre que rien n'est ajouté au datalist, donc je me demande ce que je fais de mal. J'ai également essayé d'utiliser .responseText plutôt que .responeXML mais cela n'a fait aucune différence. Quelqu'un peut-il m'aider?

[EDIT] Des progrès ont été réalisés. J'ai changé la fonction processCities() à:

function processCities() { 
    var response = this.responseText; 
    var city = response.split("\n"); 
    var options = ""; 

    for(var i = 0; i < response.length; i++) { 
     options += "<option value='"+city[i]+"'>\n"; 
    } 
    document.getElementById("cities").innerHTML = options; 
} 

Ce code semble fonctionner.

Merci pour l'aide.

Answer 1

Voici un exemple de réalisation de la requête. Si vous obtenez vraiment XML, vous devrez l'analyser. C'est mieux si vous pouviez avoir JSON.

var request = new XMLHttpRequest(); 
 
request.open('GET', '/my/url', true); 
 

 
request.onload = function() { 
 
    if (request.status >= 200 && request.status < 400) { 
 
    // Success! 
 
    var data = JSON.parse(request.responseText); 
 
    } else { 
 
    // We reached our target server, but it returned an error 
 

 
    } 
 
}; 
 

 
request.onerror = function() { 
 
    // There was a connection error of some sort 
 
}; 
 

 
request.send();