XMLHttpRequest-將responseText返回到另一個函數時，它返回未定義

Question

解決了。 我將代碼更改為此：

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繞-請參閱下面的代碼和結果。

所以。 我正在為一個朋友構建一個小型網頁，所以我決定嘗試一種技術，而不是直接在網頁中編寫內容，而是使用XMLHttpRequest檢索內容（在同一域中）並將其放置在內容中，當人們單擊不同的錨點時，將使用javascript進行更新。 好吧，我遇到了一個障礙。 當我創建用於獲取內容的函數（setEvents和setContent）時，會在其中創建變量並調用用於設置變量的函數（getMarkup），當調用該函數並執行return語句時，它將返回未定義。 我發現了一個類似的線程，但是他們的解決方案是在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;

當我執行innerHTML而不返回時，它顯示“ Test TEST ”，而當我返回而不是innerHTML時，它顯示“未定義”。

我真的不想做它的innerHTML部分，那么是否有一種使該return語句起作用的解決方法？

Answer 1

您熟悉回調嗎？ 打開Firebug並在您的return reply;設置一個斷點return reply; 行-注意調用堆棧。 您有return reply;的功能return reply; 不是getMarkup 。

基本上，您將不得不稍微重組代碼。 我會讓getMarkup附加一個參數-您要將其innerHTML值設置為DOM元素。

Answer 2

看來您不太了解ajax的工作原理。
調用getMarkup函數后，您將發送一個ajax請求，並告訴瀏覽器在onreadystatechange之后使用該函數來處理回復。 因此，實際上，當回復返回時，調用該處理程序的不是您的其他函數（例如setContent ，而是瀏覽器。 這就是為什么退貨不起作用的原因。

同樣，當您調用類似var contentContent = getMarkup('location'); ，因為getMarkup沒有顯式的返回值，所以默認情況下contentContent undefined 。 您可能認為它應該在您的匿名函數中獲取返回值，但事實並非如此。 getMarkup函數立即返回，但是僅當ajax響應到來時才調用處理程序。

如果您想使它變得更好，那么您將不得不做一些額外的事情：您像以前一樣只有一個ajax處理程序。 一旦一個函數調用了該ajax函數，它將把其回調函數注冊到隊列中，並在響應返回時彈出隊列，然后更新值。 構建該機制將花費一些時間，或者您可能需要檢查jQuery Ajax Queue的工作方式。