Exemple pour expliquer l'implémentation Ajax d'une barre de progression simple avec pourcentage

J'ai récemment rencontré une telle exigence lorsque je travaillais sur un projet. Lors de l'exécution d'opérations telles que le transfert et l'enregistrement de fichiers longue distance, une barre de progression avec un pourcentage peut être affichée sur la page pour offrir à l'utilisateur une bonne expérience interactive. Voici un exemple de code basé sur ajax. Pour obtenir l'effet d'une barre de progression en pourcentage, les amis qui en ont besoin peuvent s'y référer.

Exigence : lors de l'exécution d'opérations telles que le transfert et l'enregistrement de fichiers longue distance, une barre de progression avec un pourcentage peut être affichée sur la page pour offrir à l'utilisateur une bonne expérience interactive

Étapes de mise en œuvre

Page JSP

1. Ajouter une balise de 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=&#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>　

Cette balise de table doit être masquée et affichée lorsque la barre de progression est exécutée. Les ID tdOne et tdTwo sont respectivement les zones bleues et grises de la barre de progression.

2. Ajoutez du code 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";
  }

Lorsque vous cliquez sur Enregistrer, exécutez la méthode chargement().

Classe d'action

Méthode 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;
  }

Méthode 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";
  }

Remarque : Le code peut être utilisé dans des affaires complexes Les segments sont divisés en points, et la progression de chaque point correspond à quel pourcentage, puis stockés dans la session, puis appelez le service via ajax pour obtenir la valeur de la session, renvoyer la progression et l'afficher.

Effet

Lors de la saisie des données et en cliquant sur [Enregistrer] :

Résumé

La barre de progression avec pourcentage est en fait implémentée en utilisant ajax pour ouvrir plusieurs threads pendant la sauvegarde :

Un thread effectue l'opération de sauvegarde :

　1. Le pourcentage est calculé et placé dans la session

2. Lorsque le fil de discussion se termine, effacez la session.

Un autre fil de discussion, récupérez le pourcentage de contenu de la session :

1. Utilisez ajax pour renvoyer les résultats et les afficher sur la page

Recommandations associées :

Introduction à plusieurs façons d'implémenter des barres de progression en JavaScript

JavaScript pour implémenter des barres de progression de contrôle audio

Comment utiliser php et ajaxForm Exemple d'implémentation de téléchargement de fichiers asynchrone avec barre de progression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!