在后台加载xml文件

Question

我有一个页面，它将带有数千个邮政编码的XML文件加载到内存中。 加载xml后，将显示一个文本框和搜索按钮，用户可以输入邮政编码（邮政编码）并单击“搜索”，然后将显示一些结果。 问题是，初始加载需要一段时间，并且在显示文本框和搜索按钮之前，页面会显示“正在加载...” 10-15秒。 我需要使搜索框/按钮显示得更快/立即，即使这意味着搜索需要花费额外的时间。 我承认，我更像是.net的家伙，并且不太了解javascript / ajax。 这是加载xml的函数。 有人可以帮忙吗？

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

您可以使用信号量标记来跟踪请求的加载过程，并立即显示表单，然后通过连续轮询信号量的状态来停止执行搜索，直到ajax请求返回。 不太优雅，但应该做到这一点。

例如：

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

}