php - 是否可以使用 XMLHttpRequest 评估 JavaScript 代码

Question

我正在尝试使用此 AJAX 请求来调用一个文件，其中一些 PHP 工作正常，而一些 JavaScript 则不能。有什么想法吗？

function showpart2(){
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","atuamae.org/parte2-encomendar.php",false);
        xmlhttp.send(null);
    }

    document.getElementById('part2').innerHTML = xmlhttp.responseText;
    eval(xmlhttp.responseText.getElementById('part2').innerHTML)

    setTimeout('showpart2()',15000);

}

showpart2();

Answer 1

示例代码的一个大问题是，使 XMLHttpRequest.send 同步意味着所有 JS 执行在等待接收请求时必须暂停。没有理由不使用异步调用。

异步调用可以提高响应能力，但它们无法提供协调性，这意味着任务在需要的数据准备好之前不会运行。协调异步代码的标准方法是将一个函数传递给异步函数，该函数在执行时将执行依赖于数据的其余计算。该函数的技术名称为“延续”，它只是一个表示从给定点向前计算的其余部分的函数。即转:

f1();
f2();
async();
f3();
f4();

进入:

f1();
f2();
async(function() {
    f3();
    f4();
});

因为您要传递延续，所以这称为“延续传递风格”。 XMLHttpRequest 是一种特殊情况，您不是将函数传递给异步函数，而是将其设置为 XHR 对象上的 readystatechange 事件的监听器。也就是说，您将延续分配给 xmlhttp.onreadystatechange。

还有一些改进需要进行。首先，添加错误检测。 XHR 实例的 status 属性保存 HTTP 状态，您可以使用它来检查错误。

正如许多其他人提到的，eval 可能会出现问题，当有其他选择时应该避免。一方面，您必须确保该字符串来自可信来源。这里 eval 的特殊问题是脚本在与调用 eval 相同的上下文中进行计算。如果eval发生在函数内部，则脚本定义的任何内容在函数外部都不可见。如果您的脚本不需要定义任何内容(并且永远不需要定义任何内容；始终考虑代码的 future )，您可以使用 eval。否则，动态创建一个以脚本为内容的脚本元素，并将其添加到文档中；您可以定义一个函数来执行此操作(请参阅下面示例中的 globaleval)。

xmlhttp 是 global变量，这是不好的。相反，将其声明为局部变量。

使用setInterval，而不是用于一次性调用的setTimeout ，它定期调用传递的函数。请注意，setTimeout 和 setInterval 的运行时间可能比给定的延迟更长，但这在此处不应成为问题。

(function () {
    // keep variable from polluting global namespace
    var showpart2Interval = 0,
        scriptElt = {parentNode: {removeChild: function() {}}};
        
    function globaleval(script) {
        scriptElt.parentNode.removeChild(scriptElt);
        scriptElt = document.createElement('script');
        scriptElt.type = 'text/javascript'
        scriptElt.appendChild(document.createTextNode(script));
        document.body.appendChild(scriptElt);
    }

    function showpart2(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","atuamae.org/parte2-encomendar.php",false);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (200 <= xmlhttp.status && xmlhttp.status < 300) {
                    globaleval(xmlhttp.responseText);
                } else {
                    // HTTP error
                    ...
                }
            }
        }
        xmlhttp.send(null);
    }
    
    function startShowpart2() {
        if (window.XMLHttpRequest && !showpart2Interval) {
            showpart2();
            showpart2Interval = setInterval(showpart2, 15000);
        }
    }
    function stopShowpart2() {
        clearInterval(showpart2Interval);
        showpart2Interval = 0;
    }
    
    window.startShowpart2 = startShowpart2;
    window.stopShowpart2 = stopShowpart2;
})();

startShowpart2();

如果您不关心自己实现所有这些，可以让 jQuery 来完成繁重的工作。知道如何自己做事是件好事，但是(对于生产代码)使用具有标准接口(interface)的标准库可以通过多种方式加快开发速度。

另请参阅

• Javascript: Set the order of functions