在后台加载xml文件

我有一个页面可以将包含数千个邮政编码的XML文件加载到内存中。加载xml后，将显示文本框和搜索按钮，用户可以输入邮政编码（邮政编码）并单击搜索，并显示一些结果。问题是，在文本框和搜索按钮出现之前，初始加载需要一段时间，页面显示“正在加载...”10-15秒。我需要使搜索框/按钮显示更快/即时，即使这意味着搜索时间过长。我承认，我更像是一个.net小伙，并且不太了解javascript/ajax。这是加载xml的函数。谁能帮忙？在后台加载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(); 
}

来源

2013-03-07 Mark Highfield

我建议你开始加载尽快根据用户输入您的邮政编码，他们开始在搜索框中输入。这样，你永远不需要加载所有的邮政编码。我认为像[Chosen]（http://harvesthq.github.com/chosen/）这样的选择框可以帮助你解决这个问题。 – 2013-03-07 19:56:18

如果显示输入框但xml未加载，会发生什么情况？我的意思是，只是在加载回调之外移动取消隐藏的代码不是你的问题，是吗？ – Bergi 2013-03-07 20:10:20

你可以使用一个信号标志来跟踪该请求的同时，它的加载和显示窗体向右走，然后停止从执行，直到通过轮询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-07 20:19:21 Grim

在后台加载xml文件

回答

相关问题