Home Web Front-end JS Tutorial Example to explain Ajax implementation of simple progress bar with percentage

Example to explain Ajax implementation of simple progress bar with percentage

Dec 19, 2017 pm 02:01 PM
ajax accomplish Simple

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

/**添加带百分比的进度条*/

  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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

/**

  * @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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/** 

  * @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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1662
14
PHP Tutorial
1261
29
C# Tutorial
1234
24
The easiest way to query the hard drive serial number The easiest way to query the hard drive serial number Feb 26, 2024 pm 02:24 PM

The hard disk serial number is an important identifier of the hard disk and is usually used to uniquely identify the hard disk and identify the hardware. In some cases, we may need to query the hard drive serial number, such as when installing an operating system, finding the correct device driver, or performing hard drive repairs. This article will introduce some simple methods to help you check the hard drive serial number. Method 1: Use Windows Command Prompt to open the command prompt. In Windows system, press Win+R keys, enter "cmd" and press Enter key to open the command

How to implement dual WeChat login on Huawei mobile phones? How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

PHP Programming Guide: Methods to Implement Fibonacci Sequence PHP Programming Guide: Methods to Implement Fibonacci Sequence Mar 20, 2024 pm 04:54 PM

The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence

How to implement the WeChat clone function on Huawei mobile phones How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

Master how Golang enables game development possibilities Master how Golang enables game development possibilities Mar 16, 2024 pm 12:57 PM

In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.

How to solve the problem of jQuery AJAX error 403? How to solve the problem of jQuery AJAX error 403? Feb 23, 2024 pm 04:27 PM

How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make

PHP Game Requirements Implementation Guide PHP Game Requirements Implementation Guide Mar 11, 2024 am 08:45 AM

PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these

See all articles