AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

In the last AJAX tutorial I wrote about how to send requests to the server and receive the response,
in this short AJAX tutorial I will show you how to show a progress bar to the user when your application is
waiting for the server’s response, so your users will see something is actually happening :)

If you haven’t read the first AJAX tutorial, you’ll find it here:
http://blog.code-head.com/ajax-beginner-ajax-tutorial
It won’t take that long.

Here is the code that we have so far:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			document.getElementById('content').innerHTML = o.responseText;
		}
 
		function failure_handler(o) {
			document.getElementById('content').innerHTML = 'Server or your connection is death';
		}
 
		function send_request() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

To show a loading progress bar you need to get a progress bar image, you can get one by searching.

I will use this one:
AJAX progress Bar

Let’s begin

First let’s make our code a little bit nicer and make a new function called, replace_html

		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}

The way it works is that it receives two arguments:
‘id’ is the ID of the container where you want to replace the content
‘content’ is the new content to replace the old content :)

Now let’s rewrite our success_handler and failure_handler to use this function:

		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}

In success_handler for example, we call replace_html(‘content’, o.responseText); instead of directly
replacing the content of our ‘content’ DIV like: document.getElementById(‘content’).innerHTML = o.responseText;

Why?

First, because we don’t need to write document.getElementById(‘content’).innerHTML = … all over the place and
we encapsulate this into replace_html function.

Second this will centralize our way of changing the content of a DIV, so if later for example we
find a better way to replace a DIV’s content, then we will just change one function and we don’t need
to go through and find all the lines like: document.getElementById(‘content’).innerHTML = … and
change them.

Third, suppose you find out that on one kind of browser innerHTML doesn’t work, then again you
only need to change one function.

So far, all together we have this:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function send_request() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

For our progress bar to show up fast, we have to preload it first, here is a simple way of preloading our progress bar:

		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';

This piece of JavaScript code will make an image instance and sets it’s source attribute to our progress bar, this is enough
to force the browser to preload the progress bar in it’s cache.

To display this progress bar when we are waiting for the server’s response, let’s write another function show_progressbar

		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}

This function receives the ID of the container which we want to show our progress bar in and uses our replace_html
function to display the progress bar.
It simply replaces the content of that particular container with this bit of HTML code:

	<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />

Now we will have to change our send_request and test_failure to use this function and show a progress bar when they are
starting to send a request:

		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}

They simply call show_progressbar with the ID of our content DIV and then send their request to the server.

All together we have this code:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
 
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

Go ahead and try it here:
http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial-progress-bar.html

This is it for now, on the next AJAX tutorial we are going to make a little sample website with all of these:)
Thanks,
-Codehead

Next: AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message
Filed under: AJAX,JavaScript,PHP,Web Development,yui   Posted by: CodingRecipes

8 Comments »

  1. Abdul Sami:
     

    Being a Programmer Bro. You Should Know What is a Progress Bar. Its Not Even Close To Progress Bar. Do Some Research On Progress Bar

    Comment

     
  2. Codehead:
     

    Well, people search for Progress Bar rather than other terms, and around 99% of them are looking for this exactly, I did do my research before choosing this term ;)

    Comment

     
  3. MAN:
     

    nice but there is error always
    it says
    that the conn is is death

    Comment

     
  4. MAN:
     

    when i use it with out the progress bar it works but with it no :(

    Comment

     
  5. MAN:
     

    now both is not working plz find solution for this
    i know that u are tired from me but plz help me

    Comment

     
  6. Bobby:
     

    i got it working for me, but what if i wanted to load a unique url every time? Please reply asap!

    Comment

     
  7.  

    Hello. For those who can’t get it working right…

    Try changing “http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php”
    For a file in your site…

    http://my-own-site/my-directory/my-file

    Make sure this file actually exists.

    Comment

     
  8. NIlabja:
     

    Well, it works fine… what I wanted I got making little modification in the code… but really nice work…..

    Comment

     

RSS feed for comments on this post. TrackBack URL

Leave a comment