How to show loading status when the retrieved imformation is loading?

[The Bat]

Hello,

 

I am just recently getting into Ajax, and I am wondering how to add a loading status to my script. I tried adding:

 

if (xmlhttp.readystate == 3) {
   document.getElementById('ok').innerHTML = 'Loading...';
}

 

to my ajax.html page in the script below, but it did not show up when ajax.html was loading a big image. Here is my Ajax script and PHP script:

 

ajax.html

<script type="text/javascript">
function ajax() {
var xmlhttp;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 3) {
	document.getElementById('ok').innerHTML = 'Loading...';
}
if (xmlhttp.readyState == 4) {
	document.getElementById('ok').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'ajax.php?q='+document.myForm.name.value, true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="name" onkeyup="ajax()" />
</form><p>

<div id="ok"></div>

 

ajax.php

<?php
$userQuery = mysql_query("SELECT username FROM users WHERE username='".$_GET['q']."'");
if ($_GET['q']) {
   if (mysql_num_rows($userQuery) > 0) {
      // Trying to show 'Loading...' when loading a big image.
echo '<img src="bigimageURL">';
   } else {
echo '<font color="red">not found.</font>';
   }
}
?>

 

Thank you for your help!

[mainewoods]

--move the statement to start the display of the loading message to the outside of the 'onreadystatechange' function:

<script type="text/javascript">
function ajax() {
var xmlhttp;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 3) {

}
if (xmlhttp.readyState == 4) {
	document.getElementById('ok').innerHTML = xmlhttp.responseText;
}
}
document.getElementById('ok').innerHTML = 'Loading...';
xmlhttp.open('GET', 'ajax.php?q='+document.myForm.name.value, true);
xmlhttp.send(null);
}
</script>

[The Bat]

Using your code, the 'Loading..' text appears and disappears very quickly between showing 'not found', but doesn't show anything while loading the image. Why is this?

[mainewoods]

according to your 'ajax.php' file, the text 'not found' is returned to ajax when the mysql record is not found. Which can happen quite quickly with ajax when you are only returning a small amount of html and you have a fast internet connection.