需要对显示内容的ajax数据结果产生加载效果

Question

当我获得ajax搜索结果时，我想显示一种加载效果。在获得结果之前，我想显示一种加载效果，并且当结果是加载时，该效果必须停止。

这是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>

当函数正常工作时，函数HandleAjaxResponse_search_skin_function（xmlRequest）部分使用此文档显示结果。getElementById（“ search_name_result_view”）。innerHTML = xmlT; 这个。

所以我需要在结果内容之前加载效果。

谢谢大家

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 :)

谢谢大家