Frequently in web applications, we may have a request to the back end system which may trigger a long running process such as searching huge amount of data or a long running database process. Then the front end webpage may hang and wait for the process to be finished. During this process, if we can provide the user some information about the progress of the back end process, it may improve user experience. Unfortunately, in web applications, this seems not an easy task because web scripting languages don't support multithreading and HTTP is stateless. We now can have AJAX to simulate real time process. Today we will use PHP+jQuery to simulate a process to get the progress of a long running process dynamically.
We need three files:
<?php //long_process.php for($i=1;$i<=10;$i++){ session_start(); $_SESSION["progress"]=$i; session_write_close(); sleep(1); } ?>
The above code is the long_process.php which simulates the long running process, it actually has a for loop which will loop from 1 to 10 and will sleep for one second after each loop. The most important thing here is we use a session variable $_SESSION["progress"] to store the progress, also don't forget to use session_write_close() after each loop since session data is usually stored after your script terminated without the need to call session_write_close(), but as session data is locked to prevent concurrent writes only one script may operate on a session at any time. When using framesets together with sessions you will experience the frames loading one by one due to this locking. You can reduce the time needed to load all the frames by ending the session as soon as all changes to session variables are done.
One more file is progress.php
<?php //progress.php session_start(); echo $_SESSION["progress"]; ?>
what it does is very simple, just echo the progress to the client. This progress variable is the session variable updated in long_process.php.
One last PHP file:
<script type="text/javascript"> //Start the long running process $.ajax({ url: 'long_process.php', success: function(data) { } }); //Start receiving progress function getProgress(){ $.ajax({ url: 'progress.php', success: function(data) { $("#progress").html(data); if(data<10){ getProgress(); } } }); } getProgress(); </script> <div id="progress"></div>
The above code only contains the code inside(I omit rest of the code) and it actually is the entry of the simulation, it uses AJAX to send two requests to the server, one is to initialize the long running process and the other one is polling the server to get the progress. And after getting the progress, it updates the progress on the page.
Of course there are other ways to store the progress variable such as database or xml file etc.You can choose the way which you prefer or which you think is most efficient. Also, in addition to pure PHP code, you can have flash or Java applet to process and poll a long running process through TCP or UDP which are used by many websites.
If you have any better way other than this, you can share with us.
Thank you,this's very helpful to me!