1

私は javascript と json を勉強していますが、いくつかの問題があります。json で動作するスクリプトがありますが、私が書いたもののパフォーマンスはそれほど良くありません。コードは、firebug またはその他のツールを使用して段階的にデバッグを行う場合にのみ機能し、コードの実行 (またはその一部 ... ご覧のようにテーブルを作成するもの) が必要であると思われます。時間が長すぎるため、ブラウザはそれを停止します。

コードは次のとおりです。

var arrayCarte = [];
var arrayEntita = [];
var arraycardbyuser = [];

function displayArrayCards() {
var richiestaEntity = new XMLHttpRequest();

richiestaEntity.onreadystatechange = function() {
    if(richiestaEntity.readyState == 4) {
        var objectentityjson = {};
        objectentityjson = JSON.parse(richiestaEntity.responseText);

        arrayEntita = objectentityjson.cards;
    }
}
richiestaEntity.open("GET", "danielericerca.json", true);
richiestaEntity.send(null);

for(i = 0; i < arrayEntita.length; i++) {

    var vanityurla = arrayEntita[i].vanity_urls[0] + ".json";
    var urlrichiesta = "http://m.airpim.com/public/vurl/";

    var richiestaCards = new XMLHttpRequest();
    richiestaCards.onreadystatechange = function() {
        if(richiestaCards.readyState == 4) {
            var objectcardjson = {};
            objectcardjson = JSON.parse(richiestaCards.responseText);


            for(j = 0; j < objectcardjson.cards.length; j++)
            arrayCarte[j] = objectcardjson.cards[j].__guid__; //vettore che contiene i guid delle card

            arraycardbyuser[i] = arrayCarte;

            arrayCarte = [];
        }
    }
    richiestaCards.open("GET", vanityurla, true);
    richiestaCards.send(null);
}





var wrapper = document.getElementById('contenitoro');

wrapper.innerHTML = "";

var userTable = document.createElement('table');

for(u = 0; u < arrayEntita.length; u++) {
    var userTr = document.createElement('tr');

    var userTdcard = document.createElement('td');
    var userTdinfo = document.createElement('td');

    var br = document.createElement('br');

    for(c = 0; c < arraycardbyuser[u].length; c++) {
        var cardImg = document.createElement('img');
        cardImg.src = "http://www.airpim.com/png/public/card/" + arraycardbyuser[u][c] + "?width=292";
        cardImg.id = "immaginecard";
        userTdcard.appendChild(br);
        userTdcard.appendChild(cardImg);

    }

    var userdivNome = document.createElement('div');
    userdivNome.id = "diverso";
    userTdinfo.appendChild(userdivNome);

    var userdivVanity = document.createElement('div');
    userdivVanity.id = "diverso";
    userTdinfo.appendChild(userdivVanity);

    var nome = "Nome: ";
    var vanityurl = "Vanity Url: ";
    userdivNome.innerHTML = nome + arrayEntita[u].__title__;
    userdivVanity.innerHTML = vanityurl + arrayEntita[u].vanity_urls[0];

    userTr.appendChild(userTdcard);
    userTr.appendChild(userTdinfo);
    userTable.appendChild(userTr);
}

wrapper.appendChild(userTable);
}

問題は、テーブルを作成するコードが、json ファイルで動作するコードの完全な実行を待たないことです。どうすれば修正できますか？可能であれば、jquery とコールバックを使用せずに簡単にその問題を解決したいと思います (私は初心者です)。

4

3 に答える 3

1

それを機能させるには、一部のコードを移動する必要があります。最初はいくつかの機能に分割すると、作業が簡単になります。機能するかどうかはわかりませんが、最初にarrayEntitaをロードするという考えです。それが完了すると、他の 2 つの配列が埋められます。最後の配列がいっぱいになると、テーブルが作成されます。

 var arrayCarte = [];
 var arrayEntita = [];
 var arraycardbyuser = [];
 function displayArrayCards() {
    var richiestaEntity = new XMLHttpRequest();
        richiestaEntity.onreadystatechange = function () {
             if (richiestaEntity.readyState == 4) {
             var objectentityjson = {};
             objectentityjson = JSON.parse(richiestaEntity.responseText);

              arrayEntita = objectentityjson.cards;
              BuildArrayEntita();
            }
        }
        richiestaEntity.open("GET", "danielericerca.json", true);
        richiestaEntity.send(null);
    }

    function BuildArrayEntita() {
        for (i = 0; i < arrayEntita.length; i++) {

            var vanityurla = arrayEntita[i].vanity_urls[0] + ".json";
            var urlrichiesta = "http://m.airpim.com/public/vurl/";

            var richiestaCards = new XMLHttpRequest();
            richiestaCards.onreadystatechange = function () {
                if (richiestaCards.readyState == 4) {
                    var objectcardjson = {};
                    objectcardjson = JSON.parse(richiestaCards.responseText);


                    for (j = 0; j < objectcardjson.cards.length; j++)
                        arrayCarte[j] = objectcardjson.cards[j].__guid__; //vettore che contiene i guid delle card

                    arraycardbyuser[i] = arrayCarte;

                    arrayCarte = [];
                    //If it is the last call to populate arraycardbyuser, build the table:
                    if (i + 1 == arrayEntita.length)
                        BuildTable();
                }
            }
            richiestaCards.open("GET", vanityurla, true);
            richiestaCards.send(null);
        }
    }



    function BuildTable() {
        var wrapper = document.getElementById('contenitoro');

        wrapper.innerHTML = "";

        var userTable = document.createElement('table');

        for (u = 0; u < arrayEntita.length; u++) {
            var userTr = document.createElement('tr');

            var userTdcard = document.createElement('td');
            var userTdinfo = document.createElement('td');

            var br = document.createElement('br');

            for (c = 0; c < arraycardbyuser[u].length; c++) {
                var cardImg = document.createElement('img');
                cardImg.src = "http://www.airpim.com/png/public/card/" + arraycardbyuser[u][c] + "?width=292";
                cardImg.id = "immaginecard";
                userTdcard.appendChild(br);
                userTdcard.appendChild(cardImg);

            }

            var userdivNome = document.createElement('div');
            userdivNome.id = "diverso";
            userTdinfo.appendChild(userdivNome);

            var userdivVanity = document.createElement('div');
            userdivVanity.id = "diverso";
            userTdinfo.appendChild(userdivVanity);

            var nome = "Nome: ";
            var vanityurl = "Vanity Url: ";
            userdivNome.innerHTML = nome + arrayEntita[u].__title__;
            userdivVanity.innerHTML = vanityurl + arrayEntita[u].vanity_urls[0];

            userTr.appendChild(userTdcard);
            userTr.appendChild(userTdinfo);
            userTable.appendChild(userTr);
        }

        wrapper.appendChild(userTable);
    }

このチェックかどうかわかりません：

if (i + 1 == arrayEntita.length)
    BuildTable();

それ以外の場合は、buildtable() を実行する前にすべての応答が返されたかどうかを確認する必要があります。

于 2012-06-28T07:08:48.140 に答える
1

AJAX リクエストは非同期です。それらは実行中に不明な期間に到着し、JavaScript は続行する前にサーバーの応答を待機しません。同期 XHR がありますが、理想的な用途ではありません。そうすれば、AJAX の全体像を失うことになります。

通常行われるのは、「コールバック」を渡すことです。これは、いつ実行するかによって、後で実行される関数です。あなたの場合、データを受け取った後にテーブルを生成する必要があります。

function getData(callback){
    //AJAX setup
    var richiestaEntity = new XMLHttpRequest();

    //listen for readystatechange
    richiestaEntity.onreadystatechange = function() {

        //listen for state 4 and ok status (200)
        if (richiestaEntity.readyState === 4 && richiestaEntity.status === 200) {

            //execute callback when data is received passing it
            //what "this" is in the callback function, as well as
            //the returned data
            callback.call(this,richiestaEntity.responseText);
        }
    }
    richiestaEntity.open("GET", "danielericerca.json"); //third parameter defaults to true
    richiestaEntity.send();
}

function displayArrayCards() {

    //this function passed to getData will be executed
    //when data arrives
    getData(function(returnedData){

        //put here what you want to execute when getData receives the data
        //"returnedData" variable inside this function is the JSON returned

    });
}
于 2012-06-28T07:10:45.710 に答える
0

ajax 呼び出しを行ったらすぐに、残りのすべてのコードを readystatechange 関数内に配置します。このようにして、すべてを順番に実行します。

編集: @Dappergoat は、私よりもうまく説明してくれました。

于 2012-06-28T07:12:59.503 に答える