使用重叠显示进度条的问题

要求：我有一段代码类似于下面的代码。我想在单击保存按钮后在叠加层中显示进度条。一旦我收到来自ajax调用的响应，就会显示一条警报，显示操作已成功。

问题：叠加层（进度条）只有在我们从ajax调用得到响应并显示警报后才可见。它在Ajax调用正在处理时不可见。

我在这里做错了什么，或者这是预期的行为？我正在使用纯JavaScript。我无法使用任何外部库来执行此操作。使用重叠显示进度条的问题

<script> 
    function save(){ 
     document.getElementById('overlaydiv').style.display = 'block'; 
     document.getElementById('progressBarDiv ').style.display = 'block'; 
     var URL = 'some url'; 
     ajaxFunction(URL, false); 
    } 
    function ajaxFunction(URL, isAsynchronousCall){ 
     var xmlHttp; 
     var callTypeFlag = true; // is an Asynchronous Call 
     if(isAsynchronousCall != null){ 
     callTypeFlag = isAsynchronousCall; 
     } 
     try{ 
      if (window.XMLHttpRequest) { 
      xmlHttp = new XMLHttpRequest(); 
      } else if (window.ActiveXObject) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     }catch (e){ 
     alert("Your browser does not support AJAX!"); 
     return false; 
     } 
     xmlHttp.open("GET", URL, callTypeFlag); 
     xmlHttp.onreadystatechange = function(){responseProcessor(xmlHttp)}; 
     xmlHttp.send(null); 
    } 
    function responseProcessor(xmlHttp){ 
    //If the readystate is 4 then check for the request status. 
     if (xmlHttp.readyState == 4) { 
     if (xmlHttp.status == 200) { 
      alert('Settings saved successfully'); 
      window.close(); 
      opener.location.href='new URL'; 
     } 
     } 
    } 
</script> 

<div id="overlaydiv" style="display:none"/> 
<div id="progressBarDiv" style="display:none"> 
    <img border="0" src="progressBar.gif"/> 
</div> 
<div> 
<table> 
    <tr> 
    <td> 
     <input type="button" onclick="save()"/> 
    </td> 
    </tr> 
</table> 
</div>

来源

2009-12-21 Deepak Singh Rawat

你的'ajaxFunction'看起来像什么？ – 2009-12-21 06:35:49

它出现的问题是因为我使用同步Ajax调用放少许延迟。我改变了呼叫异步，现在没有问题。

来源

2009-12-21 07:22:54

调用ajaxFunction时（）

function save(){ 
     document.getElementById('overlaydiv').style.display = 'block'; 
     document.getElementById('progressBarDiv ').style.display = 'block'; 

     setTimeout(ajaxFunction, 50);//5,10,20,30,40 will do 
}

来源

2009-12-21 06:35:31 jerjer

setTimeOut解决方案不起作用。 – 2009-12-21 07:00:29

使用重叠显示进度条的问题

回答

相关问题