Question

我试图在单个页面中加载多个Ajax函数，这将从两个不同的php页面获取数据。然后，两个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）并覆盖前一个调用。有没有办法阻止这个？

Answer 1

我构建了一个数据处理程序“class”来管理这样的事情。你是对的，一个覆盖另一个。我没有调查过，但可能是因为你正在重新分配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();
};

ajax - 从一个页面上的多个文件请求数据？

1 个答案: