charger un fichier XML en arrière-plan

Question

J'ai une page qui charge un fichier XML avec des milliers de codes postaux en mémoire. Une fois le fichier XML chargé, une zone de texte et un bouton de recherche sont affichés et l'utilisateur peut entrer un code postal (code postal) et cliquer sur Rechercher et certains résultats s'afficheront. Le problème est, la charge initiale prend un certain temps et la page indique "chargement ..." pendant 10-15 secondes avant que la boîte de texte et le bouton de recherche apparaissent. Je dois faire apparaître le champ/le bouton de recherche plus rapidement/immédiatement, même si cela signifie un peu plus de temps pour les recherches. J'avoue, je suis plutôt un mec .net et je ne connais pas bien javascript/ajax. Voici la fonction qui charge le fichier XML. Quelqu'un peut-il aider?

function importXML() { 

    var xmlhttp; 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 

      var i,j; 
      var xmlDoc=xmlhttp.responseXML; 

      for (i=0; i<arrServiceProviders.length;i++) { 
       var regionList = xmlDoc.getElementsByTagName("region"); 
       var postalCodeList = regionList[i].getElementsByTagName("postalcode"); 

       for (j=0;j<postalCodeList.length;j++) { 

        arrServiceProviders[i][j]=postalCodeList[j].childNodes[0].nodeValue; 
       } 
      // debug time: 
      //alert(arrServiceProviders[i]); 
      } 
      var searchForm = document.getElementById("search-wrapper"); 
      var loadingPlaceholder = document.getElementById("loading"); 
      loadingPlaceholder.className = "hidden"; 
      searchForm.className = ""; 
     } 
    }; 

    xmlhttp.open("GET","/agency-postal-codes.xml",true); 
    xmlhttp.send(); 
} 

Answer 1

Vous pouvez utiliser un drapeau sémaphores pour garder la trace de la demande pendant son chargement et montrer la forme tout de suite, puis arrêter la recherche d'effectuer jusqu'à ce que le retour de la demande ajax en interrogeant le statut de la sémaphores continuosly. Pas très élégant, mais devrait faire son travail.

Par exemple:

var loaded = false; 

function importXML() { 

    var xmlhttp; 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 

      var i,j; 
      var xmlDoc=xmlhttp.responseXML; 

      for (i=0; i<arrServiceProviders.length;i++) { 
       var regionList = xmlDoc.getElementsByTagName("region"); 
       var postalCodeList = regionList[i].getElementsByTagName("postalcode"); 

       for (j=0;j<postalCodeList.length;j++) { 

        arrServiceProviders[i][j]=postalCodeList[j].childNodes[0].nodeValue; 
       } 
      // debug time: 
      //alert(arrServiceProviders[i]); 
      } 
      loaded = true; 
     } 
    }; 

    xmlhttp.open("GET","/agency-postal-codes.xml",true); 
    xmlhttp.send(); 
} 

function doSearch() { 
    console.log("about to search"); 
    var val = document.getElementById("txt").value; 
    var res = document.getElementById("result"); 

    res.style.display = "block"; 
    if (loaded) { 
     // search logic goes here 
     res.innerHTML = "found"; 
    } else { 
     res.innerHTML = "Still loading..."; 
     setTimeout(doSearch, 1000); 
    } 

}