1

ajaxを介して次々と呼び出したい4つのスクリプトがあります。

実行が完了しscript_2た後にのみ呼び出したい。script_1

これは、最初にscript_1ajaxを呼び出し、script_1実行結果をそれぞれの div に表示し、次に 2 番目のスクリプトを呼び出し、その結果を 2 番目の div に表示することを意味します。

現在私がやっていることは、onreadystatechange()関数内に新しい ajax 呼び出しを作成することです (ネストされた方法で)。

以下は擬似コードです。

var script1_ajax = new XMLHttpRequest();

script1_ajax.onreadystatechange=function() {            
    if (script1_ajax.readyState==4 && script1_ajax.status==200) {

        document.getElementById('result').innerHTML = script1_ajax.responseText;
        //create second ajax request and call it
        //similarly create two more nested ajax calls and call it
    }
}

これはこれを行う適切な方法ではないと思います。より複雑でない方法でこれを行う方法を提案してください。

4

4 に答える 4

2

2 つの言葉で: 抽象とコールバック:

//abstract the AJAX code
function ajax(url,data,callback){
    var xhr = new XHR(...
    //the rest of the AJAX setup here
    xhr.onreadystatechange=function() {            
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText); //execute callback
        }
    }
    xhr.send();
}

function script1(){
    //call ajax
    ajax('test1.php','somedata',function(returndata){
        //this callback gets executed when ajax is done
        document.getElementById('result').innerHTML = returndata;
        //execute next
        script2();
    });
}

function script2(){
    ajax('test1.php','somedata',function(returndata){
        document.getElementById('result').innerHTML = returndata;
        script3();
    });
}

function script3(){
    //and so on...
}

script1(); //execute first

一方、jQuery.ajaxほとんど同じように見える を使用できます。

function script1(){
    $.get('url','data',function(data){
        $('#result').html(data);
        script2();
    });
}

function script2(){
    $.get('url','data',function(data){
        $('#result').html(data);
        script3();
    });
}

function script3(){
    //and so on
}

script1(); //execute first
于 2012-05-22T14:03:03.943 に答える
1

あなたはこのようにそれをすることができます。3つのスクリプトをロードする必要があり、3つ目にコールバックがあるとします。

$.get("js/ext/flowplayer-3.2.8.min.js")
.pipe($.get("js/eviflowplayer.js"))
.pipe($.get("js/evi.flowplayer.js", {}, function()
{
    W.EVI.FLOWPLAYER.init(elem.attr('id'));
});

を使用した例は他にもあります$.getScript()。

于 2012-07-18T03:46:22.713 に答える
1

おそらく最良の選択肢は、jQuery などの Javascript ライブラリを使用することです。jQuery にはjQuery.Deferred()、promise (将来の結果) を簡単に表すために使用できるオブジェクトがあるため、関数呼び出しを簡単に連鎖させることができます。$.get()たとえば、 は a を返すことに注意してくださいDeferred(このページの下のドキュメントを参照してください)。この記事には、優れたソリューションと機能する jsfiddle もありますが、Deferredアプローチからはかなり離れています。

function _get(url, params, success) {
  return function() {
    return $.get(url, params, success);
  }
}

$.get("http://host/1", {}, updateDiv)   // see the doc for $.get()
  .pipe(_get("http://host/2"))          // see $.Deferred() and pipe()
  .pipe(_get("http://host/3"))
  .pipe(_get("http://host/4"));

jQuery がわからない場合$.get(url, params, callback)は、非同期 HTTP GET リクエストを作成する方法です

注: コードを更新しましdeferred.then()た。コールバックが必要なため (私は約束しました)、 に置き換えthen()ましたpipe()。これにより、現在の jQuery バージョンで意図した動作が得られます (実際には 1.8 ではthen()、現在の のエイリアスのようですpipe()) 。

于 2012-05-22T14:01:29.327 に答える
0

実際には非常に適切です（アイデア）。もちろん、ajax呼び出しでjQueryとその非同期オプションを使用して強制的に同期させることができます（http://api.jquery.com/jQuery.ajax/）、または次のように同じことを行いますコールバック処理を使用してコードでsuccess()。

このリクエストのコードについては、ブラウザによっては失敗することをご存知でしょうか? 同じ関数セットを2回呼び出して、それらを関数に入れようとしたり、クラス/ JSONでajaxリクエスト全体をラップしたりする必要があるため、見た目が悪いです。

setTimeout()3 番目のオプションは、 /clearTimeout()実装を使用して自分で同期モードを強制することですsetInterval()が、これはお勧めする方法ではありません。

于 2012-05-22T13:59:03.660 に答える