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

Question

我是AJAX的新手。脚本工作正常但我想要的是当我点击“Enter”按钮

我想展示一些加载动画：

并在请求到来时隐藏它。

标记：

<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
  }
});

只需更新＆＃34;上传＆＃34;用＆＃34;过程＆＃34;或＆＃34;查询＆＃34;你应该好。 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>