load xml file in background

Question

I have a page that loads an XML file with thousands of Postal Codes into memory. Once the xml is loaded, a textbox and search button are displayed and the user can enter a postal code (zip code) and click search and some results will display. The problem is, the initial load takes a while and the page says "loading..." for 10-15 seconds before the textbox and search button appear. I need to make the search box/button appear faster/immediately, even if it means an extra bit of time on the searches. I admit, I'm more of a .net guy and don't know javascript/ajax real well. Here's the function that loads the xml. Can anyone help?

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

You could use a semaphore flag to keep track of the request while it's loading and show the form right away, then stop the search from performing until the ajax request return by polling the status of the semaphore continuosly. Not much elegant, but should do its job.

For example:

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);
    }

}