在後臺加載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文件

回答

相關問題