Progress Bar using AjaxIf you have studied the Ajax basic tutorials then this is not so difficult to understand. We will try to develop a progress bar which takes the inputs from a php file ( server side script ) and display the result.
Displaying the progress barTo display a progressing bar we will use one small image of fixed height and width. The width we will change ( or increase ) based on the data we receive from the php file by Ajax. This is the code we will keep inside the div tag to display the progress bar.
The width we have kept here is 10 but on each stage we will increase the width to 20, 40, 60 like that till it reaches the value 200.
This is the line of code used to display progress tag.
In this code we will be calling our ajaxFunction() at 10 sec interval as long as the width is less than 200.
Our server side PHP code.There is nothing much in this code. We will only receive the existing width value and then increase by 20 and then return.
In our form we will keep one hidden field to store the width value. Here is our form part.
Here is our full code of progress-bar-demo.php file
Same way here is our progressbar.php file.
The progress bar displayed here is not reflection of actual script execution process. Read more on a simulated situation.
Ajax & PHP scripts Creating XMLHttp object in different browsers Sample Code: Get Method of Ajax form submission Server Clock:: Display real-time date and time of server Dependant drop down list box using Ajax & PHP Email validation using Ajax in a form Getting customer details by entering customer id using Ajax Progress Bar using Ajax Progress Bar using MySQL PHP & Ajax Displaying Message at client side using Ajax & PHP Web page HTML form validation using Ajax and PHP Form validation with onBlur event using Ajax and PHP
Json support in PHP json_encode to generate Json string from PHP Array data Json Data formatting to return database records to main script Searching MySql database as we type using Ajax Displaying all records based on selection of a drop down list box