Need a loading effect on ajax data result showing content

Question

I want to show a loading effect when I got the ajax search result.Before get the result I want to show a loading effect and when the result is load than the effect have to stop .

Here is the JavaScript :

// AJAX FUNCTION
function search_skin_function() 
{   

    var skin = document.getElementById("skin").value;
    //alert(search_name);
    var xmlRequest = GetXmlHttpObject();
if (xmlRequest == null)
    return;

    var url = "search_skin_function.php?skin="+skin;

    var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
    {
        xmlRequest.open("POST",url, true);
    }
else
    {
        xmlRequest.open("GET",url, true);
    }
xmlRequest.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
xmlRequest.onreadystatechange =function()
    {
        if(xmlRequest.readyState==4)
            {                           
                HandleAjaxResponse_search_skin_function(xmlRequest);
            }
    };
xmlRequest.send(null);          
return false;
}

function HandleAjaxResponse_search_skin_function(xmlRequest)
{
    var xmlT=xmlRequest.responseText;
    //alert(xmlT);

        $(window).load(function() {
        $(".loader").fadeOut("slow");
    })

    document.getElementById("search_name_result_view").innerHTML=xmlT;  // GET THE RESULT
    $("#searh_clear").show();       // Result Clear Function 
return false;
}




// OBJECT FUNCTION
function GetXmlHttpObject()
    {       
        var xmlHttp=null;
        try
        {
           xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {
            // Internet Explorer
            try
                {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
            catch (e)
                {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
        }
        return xmlHttp;

}

CSS :

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('loading.gif') 50% 50% no-repeat rgb(249,249,249);
}

HTML :

<div class="loader">

<div id="search_name_result_view">

</div>

</div>

When the function is working than function HandleAjaxResponse_search_skin_function(xmlRequest) part the result showing using this document.getElementById("search_name_result_view").innerHTML=xmlT; this.

so I need before result content a loading effect .

Thanks to All

Answer 1

function search_skin_function() 
{   

    var skin = document.getElementById("skin").value;

    // Loading Show
    $("#loading").show();

    //alert(search_name);
    var xmlRequest = GetXmlHttpObject();
if (xmlRequest == null)
    return;

    var url = "search_skin_function.php?skin="+skin;

    var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
    {
        xmlRequest.open("POST",url, true);
    }
else
    {
        xmlRequest.open("GET",url, true);
    }
xmlRequest.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
xmlRequest.onreadystatechange =function()
    {
        if(xmlRequest.readyState==4)
            {                           
                HandleAjaxResponse_search_skin_function(xmlRequest);
            }
    };
xmlRequest.send(null);          
return false;
}

function HandleAjaxResponse_search_skin_function(xmlRequest)
{
    var xmlT=xmlRequest.responseText;
    //alert(xmlT);
    document.getElementById("search_name_result_view").innerHTML=xmlT;  

    // Loading Hide
    $("#loading").hide();

    $("#searh_clear").show();       
return false;
}

this code is work for me :)

Thanks to All