Question

我不知道如何在用javascript编写的功能等待响应时显示加载程序。

我有一个<div>，其中包含回复：

<input type="button" name="btn-s" value="Search">
<div align="center" id="div_feed_data">
</div>

并在同一页面中我称之为该功能：

function get_feed_data(id_feed,not_add)
{
     if (window.XMLHttpRequest)    {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     var xmlhttp=new XMLHttpRequest();
       }
     else    {
    // code for IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
       xmlhttp.onreadystatechange=function()
      {    if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
     document.getElementById("div_feed_data").innerHTML=xmlhttp.responseText;   //NELL' ELEMENTO CON QUESTO ID VIENE MOSTRATO IL RISULTATO MANDATO DAL SERVER

    }
    }
       xmlhttp.open("GET","libraries/show_feed_data.php?id_feed="+id_feed+"&not_add="+not_add,true);
       xmlhttp.send();
 }

现在我想放置一个加载器gif而不是按钮，直到响应准备就绪，但我不知道该怎么办，因为我找到了纯粹的ajax代码的方法和我在js和英语一样不好，所以我需要帮助，谢谢你们！

Answer 1

创建Ajax请求时，它将经历以下状态。

0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is ready

当您触发.send（）方法时，将处理这些状态。因此，只要您调用Ajax ，就会尝试显示 加载程序gif ;当准备状态为4时，您可以隐藏装载机。

伪代码

function yourFunction() { //call the show loader function here if(xmlReq.readyState == 4 && smlReq.status == 200){ //call the hide loader function here } }

注意：您甚至可以根据readystate值显示每个州的消息。

伪代码

function yourFunction() { if(xmlReq.readyState == 1 ){ //call the show loader function here //console.log('connected'); } if(xmlReq.readyState == 2 ){ //call the show loader function here //console.log('Request Received'); } if(xmlReq.readyState == 3 ){ //call the show loader function here //console.log('Processing'); } if(xmlReq.readyState == 4 && xmlReq.status == 200){ //call the hide loader function here } }

Answer 2

请参阅：http://fontawesome.io/examples/#animated

function get_feed_data(id_feed,not_add)
{
    $('#myIcon').fadeIn();
    ...
    ...
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       // request is complete
       $('#myIcon').fadeOut();
    }
    ...
    ...
}

在等待异步响应时显示加载程序

2 个答案: