Loading Bar on Ajax Request

[urbantricker]

Hi,

 

I am trying to create a loading effect using Ajax, similar to the sort that would be used on YouTube, Facebook etc.

 

I am having some trouble with it at the moment, at first I thought you would check when _XMLHttpRequest.readyState == 2 and then set a loading image for this status but that hasnt work.

 

I have now chosen to go another route, by calling a function, at the beginning of this function I set the image to display in a DIV and then I use the _XMLHttpRequest object to call a PHP page (code shown below).

 

What I want to happen is for the loading image to be shown instantly and then the PHP file be executed.

 

The best way to show this is by example....

 

http://businessthing.co.uk/testLoading.php

 

As you can see, you click the "loading" button and then it hangs for 3 seconds and displays both the image and the PHP output at the same time.

 

I want it so that the loading image is displayed instantly and then teh PHP output will be displayed 3 seconds later.

 

Any ideas anyone? Really appreciated!

 

PHP:

 

$mtime = microtime(); 
$mtime = explode(' ', $mtime); 
$mtime = $mtime[1] + $mtime[0]; 
$starttime = $mtime; 	

sleep(3);

$mtime = microtime(); 	
$mtime = explode(" ", $mtime); 	
$mtime = $mtime[1] + $mtime[0]; 	
$endtime = $mtime; 	
$totaltime = ($endtime - $starttime); 

echo 'This page was created in ' .$totaltime. ' seconds.'; 

 

HTML:

 

<input type="button" value="loading" onclick="javascript:loading('loading');javascript:testAjx('testAjx')" />
<div id="loading"></div>
<div id="testAjx"></div>

 

Javascript:

 

function loading(div) {

	var _div = document.getElementById(div);
	_div.innerHTML = '<img src="/BusinessThing/images/loading.gif" />';


}


function testAjx(div) {

	 // set up the http var
	var _XMLHttpRequest = false;

	// set up the request object
	if(window.XMLHttpRequest) {
		_XMLHttpRequest = new XMLHttpRequest(); // netscape
	} else if(window.ActiveXObject) {
		_XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE
	}

	var _div = document.getElementById(div);


	if(_XMLHttpRequest) { // check if the object isset
		// we need to open the action handler file
		_XMLHttpRequest.open('POST', '/handler.php');
		// set the post header
		_XMLHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

		// now create an annonymous function to check the ready state of the XMLHttpRequest every time the XMLHttpRequest changes 
		_XMLHttpRequest.onreadystatechange = function() {
			// check whether it is ready
			if(_XMLHttpRequest.readyState == 4 && _XMLHttpRequest.status == 200) {
				//the file is ready to be used
				// 4 = completed download
				// 200 = HTTP Ok
				// set the div to the response text
				_div.innerHTML = _XMLHttpRequest.responseText;
			}
		}

		// we are sending POST data, so we do not use the null value as before but an array of arguents
		_XMLHttpRequest.send("action=testAjx");
	}				

}

[phorman]

I don't know if you have gotten this fixed or not, but it worked when I viewed it.

 

Something to consider.  The image will not display until it is loaded itself, and then it will display more quickly as it is in cache.

 

Consider calling the image into a javascript variable in your onload fuction so that the image is immediately available to your vistors in their local cache.

[urbantricker]

Hi Phorman,

 

Yes cheers for the advice.

 

I have fixed it now

 

Ian