如何在发布AJAX请求时显示进度？

Question

我是AJAX新手。该脚本工作正常，但是当我点击“确定”按钮

我想表明某种加载动画的我要的是：

，当隐藏请求通过。

标记：

<div id="loading" align="center" > 
    <img src="../dist/img/ajax-loader.gif" display="none" /> 
</div> 

而且也：

<script language="javascript" type="text/javascript"> 
    <!-- 
    //Browser Support Code 
    function product() { 
     if(document.getElementById('privilege').value.length == 0) { 
      alert("Please choose privilege"); 
      document.getElementById('privilege').focus(); 
      return false; 
     } 
     var ajaxRequest; // The variable that makes Ajax possible! 
     try { 
      // Opera 8.0+, Firefox, Safari 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e) { 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function() { 
     if(ajaxRequest.readyState == 4) { 
      var ajaxDisplay = document.getElementById('get'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege; 
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true); 
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false; 
} 
//--> 
</script> 

Answer 1

这里有一个例子：http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

$.ajax({ 
    type: 'POST', 
    url: "/", 
    data: {}, 
    beforeSend: function(XMLHttpRequest) 
    { 
    //Upload progress 
    XMLHttpRequest.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     } 
    }, false); 
    //Download progress 
    XMLHttpRequest.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     } 
    }, false); 
    }, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

刚刚更新 “上传” 与 “过程” 或 “查询” 和你应该很好。 addEventListener跟踪任一方向的进度，并且您可以使用percentComplete更改进度栏的当前值。

Answer 2

假设你知道该怎么做，以显示display:none元素，请看注释：

<script language="javascript" type="text/javascript"> 
    <!-- 
    //Browser Support Code 
    function product() { 
     if(document.getElementById('privilege').value.length == 0) { 
      alert("Please choose privilege"); 
      document.getElementById('privilege').focus(); 
      return false; 
     } 
     /* 
     HERE YOU WILL SHOW THE DIV THAT ARE HOLDING THE LOADING ANIMATION 
     */ 
     var ajaxRequest; 
     try { 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    ajaxRequest.onreadystatechange = function() { 
     if(ajaxRequest.readyState == 4) { 
      /* 
      HERE YOU WILL HIDE THE DIV THAT ARE HOLDING THE LOADING ANIMATION 
      */ 
      var ajaxDisplay = document.getElementById('get'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege; 
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true); 
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false; 
} 
//--> 
</script> 

编辑

，或者，如果没有，太：

<script language="javascript" type="text/javascript"> 
    <!-- 
    //Browser Support Code 
    function product() { 
     if(document.getElementById('privilege').value.length == 0) { 
      alert("Please choose privilege"); 
      document.getElementById('privilege').focus(); 
      return false; 
     } 
     // here we will show 
     document.getElementById('loading').style.display='block'; 
     var ajaxRequest; 
     try { 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    ajaxRequest.onreadystatechange = function() { 
     if(ajaxRequest.readyState == 4) { 
      // here we will hide 
      document.getElementById('loading').style.display='none'; 
      var ajaxDisplay = document.getElementById('get'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege; 
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true); 
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false; 
} 
//--> 
</script>