0

我有一个页面，可以将包含数千个邮政编码的 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();
}
4

1 回答 1

0

您可以使用信号量标志在加载时跟踪请求并立即显示表单，然后通过连续轮询信号量的状态来停止执行搜索，直到 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);
    }

}
于 2013-03-07T20:19:21.363 回答