0

2つの異なるphpページからデータを取得する単一のページでロード時に複数のAjax関数を実行しようとしています。次に、両方のAjax関数が、取得したデータをajax関数が呼び出されたページに出力します。私が遭遇した問題は、Ajaxから行った最後の関数呼び出しが最初の関数呼び出しをオーバーライドするため、2番目の関数の結果のみが表示されることでした。

Ajax関数の1つのコード（両方が互いに非常に類似しているため）：

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と同様）が行われ、前の呼び出しがオーバーライドされるため、これはオーバーライドされます。これを止める方法はありますか？

4

1 に答える 1

0

そのようなことを管理するために、データハンドラー「クラス」を作成しました。あなたは正しいです、一方が他方を上書きします。私はそれを調査していませんが、おそらくAJAXが使用するonEventを再割り当てしているためです。

以下は私が作成したクラスです（私は知っています、それはJQueryではありません...それは機能します）。これは、タイムアウトを使用して、2番目と3番目の非同期要求をいつ起動するかを「認識」します。おそらく同じことをするJQuery関数があります。

これを呼び出すには、AJAX呼び出しごとに以下を使用します（呼び出しごとに一意の変数名を付けます）。

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 に答える