0

I am trying to run multiple Ajax functions on load in a single page which will get data from two different php pages. Both the Ajax functions will then print the retrieved data onto the page from which the ajax function was called. The problem I encountered was that the last function call which I make from the Ajax overrides the first function call, and so only the second function result is showed.

The code for one of the Ajax function (since both of the are very similar to each other):

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

This ajax would then print to <div id="fav_tracks"></div>, however this gets overridden because another call (similar to the Ajax above) is made and that overrides the previous one. Is there any way to stop this?

4

1 回答 1

0

我建立了一个数据处理程序“类”来管理这样的事情。你是对的，一个压倒另一个。我没有调查它，但这可能是因为您正在重新分配 AJAX 使用的 onEvent 。

下面是我构建的类（我知道，它不是 JQuery ......它有效）。它的作用是使用超时来“知道”何时触发第二个和第三个异步请求。可能有一个 JQuery 函数可以做同样的事情。

您可以通过对每个 AJAX 调用使用以下内容来调用它（给每个调用一个唯一的 var 名称）：

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-07T22:01:31.067 回答