Best approach to waiting for completed PHP processing

Question

I am pretty new to web programming, so please bear with me.

I created a web page that submits form data to a PHP exec() function. This function requests data (once or multiple times) from a website, manipulates it in various ways, and sticks it in a file on my web server. While processing, a loader .gif file appears on the web page. I have created a piece of JavaScript code to handle the process waiting period, but I'm not sure that I'm doing it right. The script is as follows:

<script>

window.set = 0;
window.uid = '';

document.forms[0].onsubmit = function(e) 
{
    console.log($(this).serialize());
    e.preventDefault();
    e.stopPropagation();

    // Display "Waiting" .gif during processing
    $('#loader').show();

    // Perform data submission once (when window.set = 0). After that, 
    // keep waiting for output and manifest file to be created. Call
    // "fetch" function repeatedly to test for completion. When completed, 
    // call clearInterval to stop processing.

    window.int_ = setInterval(function() 
    {
        $.ajax({
            "url": "./", 
            "type": "POST", 
            "data": !window.set ?$("#form").serialize() : { 'fetch': 1, 'uid': window.uid }}).done(function(data) 
            {   
                var d = data = JSON.parse(data);

                if (!window.set) 
                {
                    window.uid = d.uid;
                    window.set = 1;
                    return;
                }

                if (data.status === 'ok') 
                {
                    document.location.replace(data.href);
                    data.manifest = data.manifest.replace(/\./g, ".<br />");
                    $('#manifest').show();
                    $('#manifest').html("<b>Results from run:</b> <br />" + data.manifest);
                    $('#loader').hide();
                    window.set = 0;
                    window.uid = '';

                    clearInterval(window.int_);
                } 
                else
                {
                    // waiting
                }
            });
    }, 100);
}
</script>

The code for the "fetch" function referenced in the first AJAX call is as follows:

if ($_POST['fetch']) 
{
    $uid = $_POST['uid'];

    /* check for availability*/

    if (is_file(realpath("./$uid")))
    {
        $f = file_get_contents($uid);
        $m = file_get_contents("./$uid.manifest");
    } 
    else 
    {
        $f = "";
    }

    if ($f != "") 
    {
        echo json_encode(array("status" => "ok", "href" => $f, "manifest" => $m));
        die();
    }  
    else 
    {

        echo json_encode(array("status" => "err", "href" => $f));
        die();
    }
}

What I'm trying to do here is perform the external website processing/manipulation one time, while waiting for the processing to be finished. The "fetch" function checks to see if my output file has been created. If it has, processing ends.

Is this a programmatically sound approach to this problem? Are there alternatives that would be much better?

I would greatly appreciate any insight you can provide. I really want to learn the right way to do things.

Answer 1

I try to make an easy explain of HTTP Requests...

At first you have your Backend code on a Webserver, in your case written in php. This Script doesnt do anything else, then process the data you send to it and maybe post (echo) a failure, or succeed of its processing back to the frontend client. In your case thats all.

On Frontend side its almost the same procedure, whatever language or device you take.

You invoke a HTTP POST or GET request in an asynchronous task, in your case jQuery does that for you by calling its $.ajax function to your php.

Also in that request, you define a callback function which will be invoked automatically, after async processing is finished. jQuery does that for you too, its the .done() function right after the $.ajax.

To indicate loading, the best way would be to Show your loading image right before the $.ajax line of code... And hide or remove it inside the .done() function... To indicate loading is done...

Thats all.