Ajax multiple echos from PHP - php

Question

Say, I have a php file like this:
<?php
echo 1;
//some functions
echo 2;
//more code to execute
echo 3;
?>
And I have an html form. So what I want in this form is to print echos in some textfield while PHP script is being executed, is it possible with AJAX and JQuery?
What I want is that user enters HTML page, presses some button, this button runs PHP script and every time script reaches echo he can see this echo in textfield. Once script is over - I want to do some JQuery action, like hide button, for example. Is it possible? What would an overview algorithm be? Thanks!
UPDATE:
I need to run this script ONCE when user presses button, but update textfield every time script reaches next echo, so that user presses button once, than he will see "1" in textfield, in a second he will see "2", in few more seconds - "3".

Answer 1

Unfortunately, since the success handler of .ajax() will only be called once the request has finished, you can't do a "live update".. :(
All you can really do is save your current state in a session, end your script at each echo and re-request the page to continue.

Answer 2

You can use two ways either return the response as json
$values = array();
$values['first'] => 1;
$values['second'] => 2;
$values['third'] => 3;
print json_encode($values);
and in the client side jquery success handler
$.ajax({
url: 'yoururl',
type:'POST',
data :'{ if any }'
dataType:'json', /*most important**/
success:function(data){
console.log(data.first); //first value..etc
}
});
second method
Append the return data on the server side
$return= '';
$return.=1."||";
$return.=2."||";
$return.=3;
echo $return;exit;
and in the ajax
$.ajax({
url: 'yoururl',
type:'POST',
data :'{ if any }'
success:function(data){
console.log(data.split("||")[0]); //first value..etc
}
});
});

Answer 3

You could return a JSON-string that PHP creates for your:
$values = array();
$values['first'] => 1;
$values['second'] => 2;
$values['third'] => 3;
print json_encode( values );
Than store this response in a JavaScript variable and use the values of it to update at the specific time:
var obj = jQuery.parseJSON( response );
// as an example - to see where this goes
setTimeout(function() { $('#example').html(obj.first); }, 1000);
More information:
PHP json_encode
jQuery jQuery.parseJSON((

Answer 4

Another solution by using two php scripts:
first is your actual one, which will store out data in session instead of echoing them
second script will just echo data stored in the session
Your client in javascript, will call the first script to launch the main job. Then call the second script to check and show advancement.
The second script which checks the session can be written in two ways:
only check and directly return, with or without new data (you call it every second by example)
return directly if there is data, else just wait for data (or a timeout), and when the script returns you just recall him
The second solution is closer to "realtime" and will do much fewer ajax calls.

Answer 5

An option is to use WebSockets, it will allow "real time" communication between your PHP and Javascript.
Native WebSockets are only supported by newer versions of modern browsers, but there is some method for old browsher to emulate this, using ajax/iframe/flash
by exemple, the socket.io client can work with internet explorer 5.5.

Answer 6

I had one such requirement. I noticed that though jquery's ajax ie. using $.ajax does not allow it. But using ajax without jquery does accept multiple echoes from php.
var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
ajax.send();
ajax.onreadystatechange = function ( )
{
if (this.readyState == 4 && this.status == 200)
{
console.log(this.responseText)
}
};