php 配合 ajax 进度条

最新推荐文章于 2024-09-24 09:19:15 发布

superhosts

最新推荐文章于 2024-09-24 09:19:15 发布

阅读量529

点赞数

分类专栏： js 文章标签： ajax php function xmlhttprequest button go

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

$(function(){
   $("#go").click(function(){

       go();
   });

});
var xmlHttp;
var key;
   var bar_color = "gray";
   var span_id = "block";
   var clear = "   "
   var goCount = 1;

function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

function go(){
goCount = 1;
createXMLHttpRequest();
checkDiv();
var url="http://192.168.1.37/api/gm/sss?task=create&ts="+new Date().getTime();
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = goCallback;//
xmlHttp.send(null);
}

function goCallback(){
//   alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//处理事件

    setTimeout('pollServer("'+goCount+'")',3000);
}
}
}

function pollServer(goCount){
   //alert(goCount);
   createXMLHttpRequest();
   var url = "http://192.168.1.37/api/gm/sss?task=poll&counter="+goCount+"&key="+key+"&ts="+new Date().getTime();
   xmlHttp.open("GET",url,true);
   xmlHttp.onreadystatechange = pollCallback;
   xmlHttp.send(null);
}

function pollCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//处理事件
var percent_complete=xmlHttp.responseXML.getElementsByTagName("percent")[0]
         .firstChild.data;
var index = processResult(percent_complete);
for(var i=1;i<=index;i++){
   var elem = document.getElementById("block"+i);
   elem.innerHTML=clear;
   elem.style.backgroundColor = bar_color;
   var next_cell = i+1;
   if(next_cell>index&&next_cell<=9){
    document.getElementById("block"+next_cell).innerHTML=percent_complete+"%";
   }
}
if(index < 9){
   goCount++;
   setTimeout('pollServer("'+goCount+'")',2000);
}else{
   document.getElementById("complete").innerHTML = "完成!";
               document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete){
var ind;
if(percent_complete.length == 1){
ind = 1;
}else if(percent_complete.length == 2){
ind = percent_complete.substring(0,1);

}else{
ind = 9;
}
return ind;
}
function checkDiv(){
   var progress_bar = document.getElementById("progressBar");
   if(progress_bar.style.visibility == "visible"){
      clearBar();
      document.getElementById("complete").innerHTML = "";
   }else{
      progress_bar.style.visibility = "visible";
   }
}
function clearBar(){
   for (var i = 1; i < 10; i++) {
       var elem = document.getElementById("block" + i);
       elem.innerHTML = clear;
       elem.style.backgroundColor = "white";
    }
}

</script>
<body>
<h1></h1>
开始 <input type="button" value="开始" id="go" "/>
<table align="center">
<tbody>
   <tr><td>
   <div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
      <span id="block1">   </span>
      <span id="block2">   </span>
      <span id="block3">   </span>
      <span id="block4">   </span>
      <span id="block5">   </span>
      <span id="block6">   </span>
      <span id="block7">   </span>
      <span id="block8">   </span>
      <span id="block9">   </span>
       </div>
       </td></tr>
     <tr><td align="center" id="complete"></td></tr>
      </tbody>
      </table>

</body>

php: