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 或冗长 - 请参阅下面的代码和结果。

所以。我正在为朋友构建一个小网页，我决定尝试一种技术，而不是直接在网页中编写内容，而是使用 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;

当我执行 innerHTML 而不是 return 时，它显示“Test TEST ”，当我返回而不是 innerHTML 时，它显示“undefined”。

我真的不想做它的 innerHTML 部分，那么有没有一种解决方法可以使 return 语句工作？

4

2 回答 2

0

你熟悉回调吗？打开 Firebug 并在您的return reply;行上放置一个断点 - 注意调用堆栈。您拥有的功能return reply;不是getMarkup.

基本上你将不得不稍微重构你的代码。我会让 getMarkup 采用一个额外的参数 - 您想要为其设置其 innerHTML 值的 DOM 元素。

于 2012-07-15T16:31:57.463 回答
0

看来您不太了解ajax 的工作原理。
一旦你调用了你的getMarkup函数，你就发送一个 ajax 请求并告诉浏览器在onreadystatechange处理回复之后使用该函数。setContent所以实际上当回复回来时，调用该处理程序的不是您的其他函数，而是浏览器。这就是为什么退货不起作用的原因。

此外，当您调用类似var contentContent = getMarkup('location');, asgetMarkup没有明确的返回值时，默认情况下contentContent会获取undefined. 您可能认为它应该在您的匿名函数中获取返回值，但事实并非如此。该getMarkup函数立即返回，但只有在 ajax 响应到来时才会调用处理程序。

如果你想让它变得更好，你将不得不做一些额外的事情，比如：你只有一个像你一样的 ajax 处理程序。一旦一个函数调用了该 ajax 函数，它将其回调注册到一个队列中，当响应返回时，队列被弹出，然后更新值。这将需要一些时间来构建此机制，或者您可能需要检查jQuery Ajax 队列是如何工作的。

于 2012-07-15T17:42:17.030 回答