如何在ajax调用期间运行javascript？答案

【问题标题】：how to run javascript during ajax call?如何在ajax调用期间运行javascript？
【发布时间】：2011-09-27 20:55:14
【问题描述】：

在开发 Web 应用程序时，我充分利用了 javascript php 和 ajax。

我想打电话

display_terminal('feedback_viewer','logs/init-raid-log.txt','Init-Raid');

构建我的终端并调用 feed_terminal()，它有自己的 setTimeout() 递归调用

    var url='../edit_initRaid.php';
    status_text('Initializing raid-array. Please wait a moment...');
    var xmldoc=ajaxPHP2(url,2);

一个 php 文件，仅此而已

exec("sudo /usr/bin/./init-raid-drives-web.sh");

这就是我失败的地方。直到 php 文件中的 exec() 返回到 php 文件并且 php 文件返回到 javascript 之后才执行下一行。这并不重要，但我很确定以前不是这样，因为最初 bash 脚本将在 2 分钟的时间段内执行，并且 javascript 将成功地使用 feed_terminal 更新 html。现在已经不是这样了。

alert("javascript has returned from ajax call");
    if (xmldoc) {
            status_text('Raid-array initialized successfully. System will now restart.You must re-login to FDAS-Web.');

下面是你的问题的一堆代码

最后我的问题是，我如何在 ajax 调用期间运行 javascript？或者我的问题应该是，我怎样才能让 edit_initRaid 返回一个 xmldoc，而不等待 exec() 返回，或者即使脚本没有完成，我如何让 exec() 返回？

function initRaidArray(){
if (document.getElementById('initRaid_doubleCheck')){
    if (document.getElementById('initRaidHideButtonSpot'))
            document.getElementById('initRaidHideButtonSpot').innerHTML = '';

    var spot=document.getElementById('initRaid_doubleCheck');
    spot.innerHTML='';
    spot.innerHTML='This may take a few moments. Please wait.';
}
    display_terminal('feedback_viewer','logs/init-raid-log.txt','Init-Raid');
    var url='../edit_initRaid.php';
    status_text('Initializing raid-array. Please wait a moment...');
    var xmldoc=ajaxPHP2(url,2);
alert("javascript has returned from ajax call");
    if (xmldoc) {
            status_text('Raid-array initialized successfully. System will now restart. You must re-login to FDAS-Web.');
    }
}

其中 display_terminal() 做了两件事，构建一个表并将其附加到页面，并调用 feed_terminal(logfile,bigDiv,0)

function feed_terminal(logFile,bigD,lap){
    // AJAX
    bigD.innerHTML = '';
    var url='../view_xml_text.php';
    /*
     * lap(0)=clear file , lap(1)=do not clear file
     */
    url+='?logFile='+logFile+'&lap='+lap;
    var XMLdoc=ajaxPHP2(url,2);
    var xmlrows = XMLdoc.getElementsByTagName("line");

alert("xmlrows.length=="+xmlrows.length);
    // empty file
    if (xmlrows.length==0){
            var d = document.createElement('div');
            var s = document.createElement('span');
            s.innerHTML='...';
            d.appendChild(s);
            bigD.appendChild(d);
    } else {
            // Parse XML
            for (var i=0;i<xmlrows.length;i++){
                    if (xmlrows[i].childNodes[0]){
                            if (xmlrows[i].childNodes[0].nodeValue){
                                    var d = document.createElement('div');
                                    var s = document.createElement('span');

                                    s.innerHTML=xmlrows[i].childNodes[0].nodeValue;
                                    d.appendChild(s);
                                    bigD.appendChild(d);
                            }
                    }
            }
    }
    setTimeout(function(){feed_terminal(logFile,bigD,1)},2000);
}

其中最重要的一项是 setTimeout() 调用以继续访问 php 文件，该文件返回文件中行的 xml。

function ajaxPHP2(url,key)
{
    if (window.XMLHttpRequest) {
            xml_HTTP=new XMLHttpRequest();
            if (xml_HTTP.overrideMimeType) {xml_HTTP.overrideMimeType('text/xml');}
    } else { xml_HTTP=new ActiveXObject("Microsoft.xml_HTTP"); }
    xml_HTTP.open("GET",url,false);
    xml_HTTP.send(null);
    if (key){return xml_HTTP.responseXML;}
}

【问题讨论】：

标签： php javascript ajax linux exec

【解决方案1】：

您需要告诉 Javascript 异步执行您的 XHR 调用。

改变

xml_HTTP.open("GET",url,false);

到

xml_HTTP.open("GET",url,true);

但首先，您需要告诉它在请求完成时执行某些操作（callback）：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        alert(xmlhttp.responseText);
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();

一个建议：XHR 是一种痛苦。使用jQuery's $.ajax()之类的东西会容易得多

【讨论】：

【解决方案2】：

您需要将 ajax 调用设置为异步的。在 ajaxPHP2 函数中，xml_HTTP.open("GET", url, false); 行是导致页面暂停的原因。 false 参数告诉 ajax 调用让其他一切都等待它。将 false 更改为 true，如下所示：

xml_HTTP.open("GET", url, true);

您可能还需要将一个函数附加到 onreadystatechange 属性，以便在 ajax 调用返回时知道该做什么。请参阅these links 了解更多信息。

【讨论】：