需要對顯示內容的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 :)

謝謝大家