欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 12:45:00
需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 jsp页面 1.添加table标签

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

实现步骤

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实现简单的带百分比进度条实例

  输入数据,点击【保存】时: 

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

总结

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

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

    1.将百分比计算出来,放到session中;

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

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

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

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