Example to explain Ajax implementation of simple progress bar with percentage-JS Tutorial-php.cn

Example to explain Ajax implementation of simple progress bar with percentage

小云云

Release： 2017-12-19 14:01:11

Original

2058 people have browsed it

Recently I encountered such a requirement in a project. When performing operations such as long-distance file transfer and saving, a progress bar with a percentage can be displayed on the page to give the user a good interactive experience. The following is an example code to introduce to you the ajax-based To achieve the effect of a percentage progress bar, friends who need it can refer to it. I hope it can help everyone.

Requirement: When performing operations such as long-distance file transfer and saving, a progress bar with a percentage can be displayed on the page to give the user a good interactive experience

Implementation steps

JSP page

1. Add table tag

<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=&#39;center&#39; width=&#39;500&#39;>
         <tr>
          <td colspan=&#39;2&#39; align=&#39;center&#39; id="progressPersent"><font size="2">
          正在进行保存，用时较长，请稍后...
          </font>
          </td>
         </tr>
         <tr>
          <td id=&#39;tdOne&#39; height=&#39;25&#39; width=1 bgcolor="blue"> </td>
          <td id=&#39;tdTwo&#39; height=&#39;25&#39; width=500 bgColor=&#39;#999999&#39;> </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>
    </td>
   </tr>
  </table>

Copy after login

This table tag should be hidden and displayed when the progress bar is executed. The IDs tdOne and tdTwo are the blue and gray areas of the progress bar respectively.

2. Add js code

/**添加带百分比的进度条*/
  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";
  }

Copy after login

When you click save, the loading() method is executed.

Action class

progressBar() method

/** 
  * @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;
  }

Copy after login

save() method

/** 
  * @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";
  }

Copy after login

Note: The code segment can be divided into points in complex business. The percentage of the progress of a point is then stored in the Session, and then the value is obtained from the Session by calling the service through ajax, and the progress is returned and displayed.

Effect

When entering data and clicking [Save]:

Summary

The progress bar with percentage is actually implemented by using ajax to open multiple threads during saving:

One thread performs the saving operation:

　1. The percentage is calculated and placed in the session;

2. When the thread ends, clear the session.

Another thread, get the percentage content from the session:

1. Use ajax to return the results and display them on the page

Related recommendations:

Introduction to several methods of implementing progress bars using JavaScript

JavaScript implementing audio control progress bars

How to use php and ajaxForm Example of implementing asynchronous file upload with progress bar

The above is the detailed content of Example to explain Ajax implementation of simple progress bar with percentage. For more information, please follow other related articles on the PHP Chinese website!