当前位置： 移动技术网 > IT编程>脚本编程>Ajax > 使用Ajax实现简单的带百分比进度条实例

使用Ajax实现简单的带百分比进度条实例

2017年12月08日  | 移动技术网IT编程  | 我要评论

需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验

实现步骤

jsp页面

1.添加table标签

<table id="load" width="700" border="0" align="center" bgcolor="#fafafa" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
   <tr>
    <td><br><br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287bce" style="border-collapse:collapse ">
      <tr bgcolor="#f7f7f6">
       <td width="20%" height="100" valign="middle">
        <table align='center' width='500'>
         <tr>
          <td colspan='2' align='center' id="progresspersent"><font size="2">
          正在进行保存，用时较长，请稍后...
          </font>
          </td>
         </tr>
         <tr>
          <td id='tdone' height='25' width=1 bgcolor="blue"> </td>
          <td id='tdtwo' height='25' width=500 bgcolor='#999999'> </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>
    </td>
   </tr>
  </table>　

　　这个table标签要隐藏，进度条执行的时候再显示。id为tdone和tdtwo分别为进度条的蓝色和灰色区域。

2.添加js代码

/**添加带百分比的进度条*/
  var xmlhttp;
  //创建ajax引擎
  function createxmlhttprequest() {
   if (window.xmlhttprequest) {
     xmlhttp = new xmlhttprequest();
    } else if (window.activexobject) {
     try {
        xmlhttp = new activexobject("msxml2.xmlhttp");
     } catch (e1) {
        try {
         xmlhttp = new activexobject("microsoft.xmlhttp");
        } catch (e2) {
        }
     }
    }
  }
  function loading() {
    createxmlhttprequest();
    clearload();
    var url = "eleccommonmsgaction_progressbar.do";
    xmlhttp.open("get", url, true);
    xmlhttp.onreadystatechange = createcallback;
    xmlhttp.send(null);
  }
  function createcallback() {
    if (xmlhttp.readystate == 4) {
      if (xmlhttp.status == 200) {
        //每隔1秒钟执行一次percentserver()方法，直到当前访问结束
        settimeout("percentserver()", 1000);
      }
    }
  }
  function percentserver() {
    createxmlhttprequest();
    var url = "eleccommonmsgaction_progressbar.do";
    xmlhttp.open("get", url, true);
    xmlhttp.onreadystatechange = updatecallback;
    xmlhttp.send(null);
  }
  function updatecallback() {
    if (xmlhttp.readystate == 4) {
      if (xmlhttp.status == 200) {
        //获取xml数据中的percent存放的百分比的值
        var percent_complete = xmlhttp.responsexml.getelementsbytagname("percent")[0].firstchild.data;
        var tdone = document.getelementbyid("tdone");
        var progresspersent = document.getelementbyid("progresspersent");
        //改变蓝色区域的宽度
        tdone.width = percent_complete + "%";
        //将百分比的数值显示到页面上
        progresspersent.innerhtml = percent_complete + "%";
        //如果计算获取的百分比的数值没有达到100，则继续调用方法，直到操作结束为止
        if (percent_complete < 100) {
          settimeout("percentserver()", 1000);
        }
      }
    }
  } 
  function clearload() {
    document.getelementbyid("load").style.display="";
    document.getelementbyid("opperate1").style.display="none";
    document.getelementbyid("opperate2").style.display="none";
  }

　　当点击保存时，执行loading()方法。

action类

progressbar()方法

/** 
  * @throws exception 
   * @name: progressbar
  * @description: 在页面执行保存后，使用ajax，计算执行的百分比情况，将结果显示到页面上
  * @parameters: 无
  * @return: ajax如果不需要跳转页面，返回null或者none
  */
  public string progressbar() throws exception{
    //从session中获取操作方法中计算的百分比
    double percent = (double) request.getsession().getattribute("percent");
    string res = "";
    //此时说明操作的业务方法仍然继续在执行
    if(percent!=null){
      //计算的小数，四舍五入取整
      int percentint = (int) math.rint(percent); 
      res = "<percent>" + percentint + "</percent>";
    }
    //此时说明操作的业务方法已经执行完毕，session中的值已经被清空
    else{
      //存放百分比
      res = "<percent>" + 100 + "</percent>";
    }
    //定义ajax的返回结果是xml的形式
    printwriter out = response.getwriter();
    response.setcontenttype("text/xml");
    response.setheader("cache-control", "no-cache");
    //存放结果数据，例如：<response><percent>88</percent></response>
    out.println("<response>");
    out.println(res);
    out.println("</response>");
    out.close();
    return null;
  }

save()方法

/** 
  * @name: save
  * @description: 保存表单数据到数据库
  * @parameters: 无
  * @return: string：重定向到system/actingindex.jsp再查询
  */
  public string save(){
    //模拟：循环保存150次，方便观察百分比变化
    for(int i=1;i<=150;i++){
      eleccommonmsgservice.savecommonmsg(eleccommonmsg);//保存数据
      request.getsession().setattribute("percent", (double)i/150*100);
    }
    //线程结束，清空session
    request.getsession().removeattribute("percent");
    return "save";
  }

　　注意：可以在复杂的业务中将代码段分成点，一个点的进度是占百分之多少，然后存放到session中，然后通过ajax调用服务从session中获取值，返回进度并显示即可。

效果

　　输入数据，点击【保存】时： 

总结

　　带百分比的进度条，实际上是用ajax在保存中开启多个线程实现的：

一个线程，执行保存的操作:

　　　　1.将百分比计算出来，放到session中；

　　　　2.在线程结束的时候，将session清空。

另一个线程，从session中获取百分比的内容:

　　　　1.使用ajax将结果返回并显示在页面上

以上所述是小编给大家介绍的使用ajax实现简单的带百分比进度条实例，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网