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

}

在后台加载xml文件

1 个答案: