Javascript 一键实现两个功能

Question

我正在尝试在 2 个不同的 DIV 中加载两个不同的文件。这是我正在使用的代码

var please_wait = null;
function open_url(url, target) {
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target);
    }
    link.open("GET", url, true);
    link.send(null);
}
function response(url, target) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

，并且用于调用我正在使用此代码的链接...

<a href="javascript:void(0)" onclick="open_url('firstpage.php','containerA');open_url('secondpage.php','containerB')">  Click Here </a>

它只是在任何情况下加载后一个。我尝试了很多不同的事情，做了两种不同的方法，例如 open_url2 但无济于事。它在 DIV 中一次仅加载一个请求。任何解决方案。

Answer 1

通过使用老式的 ajax 调用，您需要做很多额外的工作。我认为使用 jQuery ajax 方法你会运气更好。

至于为什么后者会被加载，您是否检查过firebug或其他网络工具以查看这两个文件是否都已加载？ 如果它们都被加载，我相信可能发生的情况是后者用您正在使用的 .innerHTML 函数覆盖第一个。你想追加。查看这些链接，使用 jQuery 会更容易：

进行 Ajax 调用

附加到元素

Answer 2

您似乎正在使用 link 作为全局变量。因此，对 open_url() 的第二次调用将覆盖第一次创建的 link 的值。

您应该将其设置为 open_url() 函数的本地函数，并将其传递给 response() 函数。

var please_wait = null;
function open_url(url, target) {

      // v----declare the variable
    var link;
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
          // ----------------------v---"target" is a String???
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target, link); // <-- pass "link" to the response
    }
    link.open("GET", url, true);
    link.send(null);
}

  // receive "link"-------------v----so that you have the correct xhr object
function response(url, target, link) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

Answer 3

正如已经说过的，您在 AJAX 上存在争用。

以下是您的代码在 jQuery 中的外观

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"</script>

<script type="text/javascript">
$(document).ready(function() {
  $("#link1").click(function() {
    $("#containerA').load("firstpage.php",function() {
      $("#containerB').load("secondpage.php");
    });
  });
});
</script>

<a id="link1" href="#">  Click Here </a>

或者使用 jQuery 的队列管理器插件