How to make the completion of php request start another request based on the result of the first?

Question

A user is presented with a box. He enters a string and presses OK. He gets sent to the results page where there are some asynchronous calls to php scripts for the results.

But, on the same page, there are other fields that also need to start a php request, but they need to have the result of the first request first.

In other words,

Page launches 20 requests. Whenever a request completes it needs to initiate 3 more requests based on the result of the first request.

How can I do this without having to synchronously execute those 20 requests and then redirect to a second page for step 2?

Thank You

Answer 1

Here is an ajax tutorial: http://www.w3schools.com/Ajax/Default.Asp

Here is a contact page that uses AJAX to give you an idea of a real example:

<script type="text/javascript">
function ajax(url)
{
    var test = 0;

    var name = document.getElementsByName('name')[0];
    var phone = document.getElementsByName('phone')[0];
    var email = document.getElementsByName('email')[0];
    var msg = document.getElementsByName('msg')[0];

    if(name.value == ""){ name.style.backgroundColor = "#FFFFCC"; test=1;
    }else{ name.style.backgroundColor = "#FFFFFF"; }

    if(email.value == ""){ email.style.backgroundColor = "#FFFFCC"; test = 1;
    }else{ email.style.backgroundColor = "#FFFFFF"; }

    if(msg.value == ""){ msg.style.backgroundColor = "#FFFFCC"; test = 1;
    }else{ msg.style.backgroundColor = "#FFFFFF"; }

    if(test == 1){
        $j("#error").slideDown(600, function(){ }); //Using jQuery
        return false;
    }else{
        document.getElementById('contactButton').value = "Sending";
        $j("#error").slideUp(600, function(){ });
    }

    if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    url = url + "?name=" + name.value;
    url = url + "&phone=" + phone.value;
    url = url + "&email=" + email.value;
    url = url + "&msg=" + encodeURI(msg.value);


    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);

    function stateChanged(){
        if (xmlhttp.readyState==4) {
            var response = xmlhttp.responseText;
            if(response == "true"){
                document.getElementById('contactForm').reset();
                document.getElementById('contactButton').value = "Sent :)";
            }else{
                document.getElementById('contactButton').value = "Can't send your message now :(";
            }
        }
    }
}
</script>

<div id="error" style="display:none; width:100%; border:1px solid #000000; background-color:#91B933; text-align:center">Please fill in all the highlighted areas.</div>
<div style="width:100%">
<div style="float:left; width:auto; position:relative; left:50%;">
<div style="float:left; position:relative; left:-50%;">
    <div style="float:left; margin:20px;">
    <form id="contactForm">
    <table border=0 style="width:300px;">
    <tr><td>Name:</td><td><input type="text" name="name"></td></tr>
    <tr><td>Phone Number:</td><td><input type="text" name="phone"></td></tr>
    <tr><td>Email:</td><td><input type="text" name="email"></td></tr>
    <tr><td colspan=2>Message:</td></tr>
    <tr><td colspan=2><textarea name="msg" style="width:95%"></textarea></td></tr>
    <tr><td colspan=2 align=right><input id="contactButton" type="button" onclick="ajax('contact.php')" value="Send"></td></tr>
    </table>
    </form>
    </div>
</div>
</div>
</div>

<div id="response" style="display:block;"></div>

The XMLHttpRequest (or browser appropriate version) is the juice.

So after the user, in your example, enters their text and click submit, instead of sending them to another page, you can use a onclick="" to call a javascript function, which will send a XMLHttpRequest to your php page. Then you can use xmlhttp.responseText; to read the response you echo from your PHP page.

If you use var response = xmlhttp.responseText; as in the example above, you will then have your response from your php page in a variable called response, which you can use to make another XMLHttpRequest to another php page.

Making sense?

Go through some Ajax tutorials. You'll get the hang of it.

Answer 2

Is this not something that can be done with AJAX? Or is that the question you are asking?