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

request data from multiple files on one page?

本文关键字：文件 请求 数据 一个      更新时间：2023-09-26

我试图在一个页面中加载运行多个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），并且覆盖了前一个调用，所以它被覆盖了。有什么办法阻止这种情况吗？

我构建了一个数据处理程序"类"来管理这样的事情。你是对的，一个凌驾于另一个之上。我还没有对此进行调查，但这可能是因为您正在重新分配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();
};
相关文章：