1

解決しました。 コードを次のように変更しました。

function init() {
    //preloadImages();
    getContent('events', 'events');
    getContent('content', 'main');
}

function loadingScreen(start) {
    var loadingSpan = document.getElementById('loading');
    if (start == true) {
            loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
    }
    else {
            loadingSpan.innerHTML = '';
    }
}

function getContent(what, where) {
    if (what == 'content') {
            loadingScreen(true);
            var ranLoad = true;
    }
    var toSet = document.getElementById(what);
    var location = "content/" + where + ".txt";
    var request = new XMLHttpRequest;
    request.open("GET", location, true);
    request.onreadystatechange = function(){
            if (request.readyState == 4 && request.status == 200){
                    toSet.innerHTML = request.responseText;
                    if (ranLoad==true){
                            loadingScreen(false);
                    }
            }
    }
    request.send(null);
}
window.onload = init;

tl;drまたはlong-winded-以下のコードと結果を参照してください。

それで。私は友人のために小さなウェブページを作成しています。コンテンツをウェブページに直接書き込む代わりに、XMLHttpRequestを使用して（同じドメイン内の）コンテンツを取得し、コンテンツに配置する手法を試してみることにしました。人々が別のアンカーをクリックすると、javascriptによって更新されます。さて、私はロードバンプに出くわしました。コンテンツを取得するための関数（setEventsとsetContent）を作成し、変数を作成して変数を設定するための関数（getMarkup）を呼び出すと、関数が呼び出され、returnステートメントが実行されると、undefinedが返されます。私は似たようなスレッドを見つけましたが、彼らの解決策は、getMarkup関数にinnerHTMLステートメントを直接追加することでした。やりたくない。

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

編集：Esailijaは私がちょうどコードを投稿するべきだったと提案しました。私にとっては、画像を撮るのが少し簡単でしたが、ここにあります：

function init() {
    //preloadImages();
    setEvents();
    setContent('main');
}

function setEvents() {
    var eventDiv = document.getElementById("events");
    var eventContent = getMarkup("content/events.txt");
    eventDiv.innerHTML = eventContent;
}

function setContent(which) {
    loadingScreen('start');
    var contentDiv = document.getElementById('content');
    location_ = "content/" + which + 'txt';
    //var contentContent = getMarkup('location');
    //contentDiv.innerHTML = contentContent;
    loadingScreen('stop');
}

function loadingScreen(action) {
    var loadingSpan = document.getElementById('loading');
    loadingSpan.innerHTML = "Test";
    if (action == 'start') {
        loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
    }
    if (action == 'stop') {
        loadingSpan.innerHTML = '';
    }
}

function getMarkup(where) {
    var filerequest = new XMLHttpRequest();
    filerequest.open("GET", where, true);
    filerequest.onreadystatechange = function() {
        if (filerequest.readyState == 4 && filerequest.status == 200) {
            var test = document.getElementById("events");
            var reply = filerequest.responseText;
            //Doesn't work
            return reply;
            //Works just fine
            //test.innerHTML = reply;
        }
    };
    filerequest.send(null);
}
window.onload = init;

returnの代わりにinnerHTMLを実行すると、 「Test TEST」と表示され、innerHTMLの代わりにreturnを実行すると、「undefined」と表示されます。

私は本当にそのinnerHTML部分をやりたくないので、そのreturnステートメントを機能させるための回避策はありますか？

4

2 に答える 2

0

ajaxがどのように機能するかをよく理解していないようです。
関数を呼び出すと、ajaxリクエストを送信し、応答を処理したgetMarkup後に関数を使用するようにブラウザーに指示します。onreadystatechangeしたがって、実際に応答が戻ってきたとき、setContentそのハンドラーを呼び出しているのは、そのような他の関数ではなく、ブラウザーです。そのため、返品は機能しません。

var contentContent = getMarkup('location');また、明示的な戻り値がないので、のようなものを呼び出すとgetMarkup、デフォルトで。contentContentを取得しますundefined。匿名関数内で戻り値を取得する必要があると思うかもしれませんが、そうではありません。関数はすぐにgetMarkup戻りますが、ハンドラーはajax応答が来たときにのみ呼び出されます。

それを素晴らしいものにしたい場合は、次のような特別なことを行う必要があります。あなたが行ったように、ajaxハンドラーは1つだけです。関数がそのajax関数を呼び出すと、そのコールバックをキューに登録し、応答が戻るとキューがポップされ、値が更新されます。このメカニズムを構築するには時間がかかるか、jQueryAjaxキューがどのように機能するかを確認する必要がある場合があります。

于 2012-07-15T17:42:17.030 に答える
0

コールバックに精通していますか? Firebug を開き、return reply;行にブレークポイントを設定します。コール スタックに注目してください。あなたが持っている機能return reply;はありませんgetMarkup。

基本的に、コードを少し再構築する必要があります。getMarkup に追加のパラメーター (innerHTML 値を設定する DOM 要素) を取らせます。

于 2012-07-15T16:31:57.463 に答える