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!