How to use jQuery's ajax function?

Question

How can I use the $.ajax() function to display output in real time. Right now I am using it in this context:

$.ajax({
    type: 'get',
    url: 'process.php',
    data: 'foo=boo',
    success: function(output) {
        $('div#results').html(output);
    }
});

The above displays the output recived from the PHP script only AFTER the script has fully executed. So if in the php script you had the following:

echo 'Hello for the first time';
// some code
echo 'Hello again';
// some code
echo 'Are you still here?';

The output would be all those echos all at one. Instead, is there any way I can update the output received from the PHP script one after another as the requests are being fulfilled by PHP in real time?

I know how to update things in real time when working entirely in the realm of JavaScript, for example: checking if the input being typed is at least 10 characters long using the keyup() event as a trigger to check after every entered key and displaying a message to enter something more which disappears as soon as the 10th character is typed.

But how to do something like this when the output is coming from a PHP file? is it even possible?

Reason why I need to do this is because I would like to have a status screen that shows how much progress has been made and what part of a task the script is currently handling, like how desktop apps have.

have a read of this: http://stackoverflow.com/questions/136012/comet-and-jquery — ifaour, Jan 30 '11 at 12:11
Instead of a 'key=value' data string, use an object `{key: 'value'}`. This ensures no matter what `value` contains you don't have to take care about encoding/escaping stuff. — ThiefMaster, Jan 30 '11 at 12:19
@ifaour heh, didn't know about the foo=bar, I made the foo=boo up on the spot. — Sammy, Jan 30 '11 at 12:30

score 1 · Accepted Answer · answered Jan 30 '11 at 12:08

1

It is not possible. You should split this task in to parts - one is long running task that updates it's status in database, and other task that just fetches status from database and displays progress to users.

answered Jan 30 '11 at 12:08

gor

10,914
4
33
40

That sounds like a good idea, having the PHP script update change status in a database after a task is performed before moving to the next. In this particular project I can't use a proper database but can use a flat file. Do you know how I can use JavaScript to monitor the file for changes, that way upon every change made by PHP I can execute the ajax command to reload the contents of that flat file and update status based on it's contents. How do I monitor the flat file for changes? – Sammy Jan 30 '11 at 12:28
If you use plain files you will run into scaling problem, but for small project it would be good. I'm not expert in php, but I think you could just reread file. Instead of flat file you could use sqlite database, but it is not multithreaded, so be careful. – gor Jan 30 '11 at 12:31
It's am extremely small project so no scalability issues there. I was actually asking what I can use as a trigger in JAVASCRIPT to keep monitoring the contents of the flat file. In the example I gave in the original question I was using "keyup" to keep checking the value of the input field. But in this situation, the user will set the PHP script in motion and not do anything else. So I can't think of what I can use as a trigger to make JavaScript keep checking the flat file for changes. – Sammy Jan 30 '11 at 12:37
just use a timer for trigger. call setInterval function in javascript, and pass there a callback, that will call php function via ajax to check status. – gor Jan 30 '11 at 12:39

score 0 · Answer 2 · answered Jan 30 '11 at 12:10

0

Umm, nope. Thats not possible. The best you can do is, Try breaking down your php file and calling multiple ajax requests for each of those files.

answered Jan 30 '11 at 12:10

Neo

10,789
17
50
78

How to use jQuery's ajax function?

2 Answers2