ajax - 從一個頁面上的多個文件請求數據？

我想在單個頁面上加載多個Ajax函數，它將從兩個不同的php頁面獲取數據。然後Ajax函數將把檢索到的數據打印到調用ajax函數的頁面上。我遇到的問題是，我從Ajax中創建的最後一個函數調用覆蓋了第一個函數調用，因此只顯示了第二個函數結果。ajax - 從一個頁面上的多個文件請求數據？

爲Ajax功能的一個代碼（因爲兩者的非常相似，彼此）：

function favorite_track_request(str){ 

switch(str){ 
case 'next_track': 
    var feed = 'require_fav_track_info'; 
    var offset = track_currentOffset + 5; 
    if(offset > max_track_range){ 
     offset -= 5; 
    } 
    break; 
case 'prev_track': 
    var feed = 'require_fav_track_info'; 
    var offset = track_currentOffset - 5; 
    if(offset < 0){ 
     offset = 0; 
    } 
    break; 
default: 
    var feed = 'require_fav_track_info'; 
    var offset = 0; 
} 



request = new ajaxRequest() 

request.open("GET", "scripts/"+feed+".php?offset="+offset, true) 


request.onreadystatechange = function(){ 
    if(this.readyState == 4){ 
     if(this.status == 200){ 
      if(this.responseText != null){ 
       if(request.responseText){ 
        document.getElementById('fav_tracks').innerHTML = request.responseText; 
       } 
      }else alert("No data recieved"); 
     }else { 
      alert("Ajax error: "+this.statusText); 
     } 
    } 
} 

request.send(null); 
    track_currentOffset = offset; 
}

這AJAX會再打印到<div id="fav_tracks"></div>，但是這被覆蓋，因爲另一個呼叫（類似於上面的Ajax）被創建並覆蓋了前一個。有什麼辦法可以阻止它嗎？

來源

2013-02-07 Human

你有什麼期望

你會通過使用下面的每一個AJAX調用（給每個呼叫的唯一變數名稱）調用此如果你發射2個AJAX請求會發生？他們如何知道不要「相互替代」？我認爲當你調用這個函數時（你的頁面上有什麼事件），它被調用的頻率/速度以及你真正想要發生的事情，你需要更好地解釋。另外，你可以嘗試使用'document.getElementById（'fav_tracks'）。innerHTML + = request.responseText;'（注意** + **字符）附加到div的文本，而不是覆蓋它。 – Ian

我建立了一個數據處理程序「類」只管理這樣的事情。你是對的，一個壓倒另一個。我還沒有調查過它，但它可能是因爲你正在重新分配AJAX使用的onEvent。

下面是我建立的類（我知道，這不是JQuery的...它的工作原理）。它所做的是使用超時來「知道」何時觸發第二個和第三個異步請求。可能有一個JQuery函數可以做同樣的事情。

dataHandler = new DataHandler("[name of datafile to call]"); 
dataHandler.query['[myQueryName]'] = 'myValue' //this is an Object used to build a query string, if needed, so use as many data pairs as you need 
dataHandler.asynchronous(myOnReadyStateChangeFN);//put the fn you want to use for readystatechange as a reference... do not includ the()

這裏的「類」：

function DataHandler(dataFile){ 
    this.dataFile = dataFile; 
    dataInProgress = false; 
    this.query = new Object(); 

     this.asynchronous = function(fn){ 
     var thisFunction = this.asynchronous 
     var rand = Math.floor(Math.random()*100001); 
     var query, timeOutFunctionString; 
     if(this.dataInProgress){ 
      timeOutFunctionString = callingObjectName+".asynchronous("+fn+")"; 
      this.thisTimeout = setTimeout(timeOutFunctionString,500); 
     }else{ 
      dataInProgress = true; 
      this.assignRequestObject.xmlHttp.onreadystatechange = function() { 
       fn(); 
       dataInProgress = false; 
       return; 
      }; 
     } 
     query = this.dataFile + '?r=' + rand; 
     for (var key in this.query) query = query + '&' + key + '=' + this.query[key]; 

     //console.info("DataHandler.asynchronous\nquery = "+query+'\nthis.dataFile = ' + this.dataFile); 
     this.assignRequestObject.xmlHttp.open('GET', query, true); 
     this.assignRequestObject.xmlHttp.send(null); 
    }; 
    this.AssignRequestObject = function() { 
     try { this.xmlHttp = new XMLHttpRequest() } catch (e) { 
      try { this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { 
       try { this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") } catch (e) { 
        alert("Your browser does not support AJAX!"); 
        return false 
       } 
      } 
     } 
    }; 
    this.assignRequestObject = new this.AssignRequestObject(); 
};

來源

2013-02-07 22:01:31

ajax - 從一個頁面上的多個文件請求數據？

回答

相關問題