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

Question

While developing a web app where I'm making great use of javascript php and ajax.

I want to call

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

to build my terminal and call feed_terminal() which has its own setTimeout() recursion call

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

a php file that does nothing more that

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

and this is where I fail. This next line is not executed until after the exec() in the php file returns to the php file and the php file returns to the javascript. Not that it matters, but I am pretty sure it did not used to be this way, as originally the bash script would execute over a time period of 2 minutes and the javascript would successfully be updating the html with feed_terminal. this is not the case anymore.

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.');

Below is a bunch of code for your questions

Ultimately my question is, how can I run javascript DURING the ajax call? Or maybe my question should be, how can I have edit_initRaid return an xmldoc, without waiting for the exec() to return, or how can i have the exec() return even without the script completing?

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.');
    }
}

where display_terminal() does two things, builds a table and appends it to the page, and calls 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);
}

where the most important item is the setTimeout() call to continue reaching out to the php file which returns xml of the lines in the file, simply.

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;}
}

Answer 1

You need to tell Javascript to do your XHR call asynchronously.

Change

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

to

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

But first, you'll need to tell it to do something when the request completes (a callback):

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

One recommendation: XHR is a pain. It would be a lot easier to use something like jQuery's $.ajax()