ajax loading image

I have a page which checks a form for validation, the main checks are for if the email or开发者_StackOverflow社区 username is already in the database. I have this working fine, but I cannot figure out how to add a loading image...for when the user changes either username or email when it is being checked.

Yy function to check username is below, its similar for the checking email

function check_username(username)
{
var httpRequest;
make_request()
function stateck() 
    {

    if(httpxml.readyState==4)

        { 
        if (httpxml.responseText.indexOf ("Username Ok") >= 0)
        {
            document.getElementById("username").style.backgroundColor = "green";
            document.getElementById("username").style.color = "white";
            document.getElementById("username_div").style.display = 'none';
            usernameok = true;

        }

         else 
        {
            document.getElementById("username").style.backgroundColor = "red";
            document.getElementById("username_div").style.visibility = 'visible';
            document.getElementById("username_div").innerHTML=httpxml.responseText;
            usernameok = false;

        }
        checkCanSubmit();           
        }


    }

httpxml.onreadystatechange=stateck;
user_url="check_username.php?username=" + username.value;
httpxml.open("GET",user_url,true);
httpxml.send(null);
}

I have already tried jQuery library, and I prefer it this way.

ajaxload.info does indeed work well, but you don't need to bother with a div and background-image. Simply create an <img>, using document.createElement, then set the src of the image, then add it to your document:

var img = document.createElement('img');
img.src = '<the URL of your loading image>';
function stateck() {
    ...

Now you can insert the newly created img into your document, then remove it in stateck().