Question

当我运行我的页面时，只有1个ajax开始工作......我很确定它与setInterval“属性”有关......

<script>
function encontrarnumero() {
    src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
    var divid = 'u219-4';


    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById(divid).innerHTML = xmlhttp.responseText;
            setInterval(encontrarnumero, 1000);


        }
    };
    xmlhttp.open("GET", "numero.php?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

window.onload = function () {
    encontrarnumero();
};
</script>
<script>
function encontrartiempo() {
    src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
    var divid = 'tiempo';


    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById(divid).innerHTML = xmlhttp.responseText;
            setInterval(encontrartiempo, 2000);


        }
    };
    xmlhttp.open("GET", "tiempo.php?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

window.onload = function () {
    encontrartiempo();
};
</script>

任何想法？谢谢！！ PS。我确定问题不是php文件，当我自己运行每个ajax时它们工作正常。

Answer 1

重复代码过多。如果将代码重构为单个函数，事情就会简单得多。

<script>
// Move repeating code to a function
function doAJAX(divid, page) {
    if (window.XMLHttpRequest) {
        // Use `var` when declaring variables
        var xmlhttp = new XMLHttpRequest();
    } else {
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById(divid).innerHTML = xmlhttp.responseText;

            // Use `setTimeout` if you're going to make recursive calls!
            setTimeout(function() {
                doAJAX(divid, page)
            }, 1000);
        }
    };
    xmlhttp.open("GET", page + "?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

// Just one onload handler that calls the function twice,
//    passing the different info for each call
window.onload = function () {
    doAJAX('u219-4', "numero.php");
    doAJAX('tiempo', "tiempo.php");
};
</script>

Answer 2

原始代码的问题在于您指定了window.onload两次，第二次作业覆盖了第一次。这就是为什么encontrarnumero()从未被调用的原因。

请注意，Crazy Train的答案仅对window.onload进行一次分配。

最后，像这样分配给window.onload并不是最好的方法。如果您想在窗口加载时执行某些操作，请考虑使用JQuery或使用本机浏览器事件（如果您需要纯JavaScript）。您可以在this answer

中看到JQuery如何实际执行此操作

2 AJAX不会工作

2 个答案: