Beispiel zur Erläuterung der Ajax-Implementierung eines einfachen Fortschrittsbalkens mit Prozentsatz

Ich bin kürzlich auf eine solche Anforderung gestoßen, als ich an einem Projekt gearbeitet habe, z. B. beim Übertragen und Speichern von Dateien über große Entfernungen. Auf der Seite kann ein Fortschrittsbalken mit einem Prozentsatz angezeigt werden, um dem Benutzer ein gutes interaktives Erlebnis zu bieten Im Folgenden finden Sie ein Beispiel für einen auf Ajax basierenden Code. Freunde, die ihn benötigen, können sich darauf beziehen, um den Effekt eines prozentualen Fortschrittsbalkens zu erzielen.

Anforderung: Beim Durchführen von Vorgängen wie Ferndateiübertragung und -speicherung kann auf der Seite ein Fortschrittsbalken mit einem Prozentsatz angezeigt werden, um dem Benutzer ein gutes interaktives Erlebnis zu bieten

Implementierungsschritte

JSP-Seite

1. Tabellen-Tag hinzufügen

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

Dieses Tabellen-Tag sollte ausgeblendet und angezeigt werden, wenn der Fortschrittsbalken ausgeführt wird. Die IDs tdOne und tdTwo sind die blauen bzw. grauen Bereiche des Fortschrittsbalkens.

2. JS-Code hinzufügen

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

Wenn Sie auf Speichern klicken, führen Sie die Methode „loading()“ aus.

Aktionsklasse

progressBar()-Methode

/** 
  * @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()-Methode

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

Hinweis: Der Code kann in komplexen Unternehmen verwendet werden Die Segmente sind in Punkte unterteilt, und der Fortschritt jedes Punktes ist ein Prozentsatz, der dann in der Sitzung gespeichert wird. Anschließend wird der Dienst über Ajax aufgerufen, um den Wert aus der Sitzung abzurufen, den Fortschritt zurückzugeben und ihn anzuzeigen.

Wirkung

Bei Dateneingabe und Klicken auf [Speichern]:

Zusammenfassung

Der Fortschrittsbalken mit Prozentsatz wird tatsächlich implementiert, indem Ajax verwendet wird, um während des Speicherns mehrere Threads zu öffnen:

Ein Thread führt den Speichervorgang aus:

1. Der Prozentsatz wird berechnet und in der Sitzung platziert;

2. Wenn der Thread endet, löschen Sie die Sitzung.

Ein weiterer Thread, holen Sie sich den prozentualen Inhalt der Sitzung:

1. Verwenden Sie Ajax, um die Ergebnisse zurückzugeben und auf der Seite anzuzeigen

Verwandte Empfehlungen:

Einführung in verschiedene Möglichkeiten zum Implementieren von Fortschrittsbalken in JavaScript

JavaScript zum Implementieren von Fortschrittsbalken für die Audiosteuerung

Wie zur Verwendung von PHP und AjaxForm Beispiel für die Implementierung des asynchronen Datei-Uploads mit Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonBeispiel zur Erläuterung der Ajax-Implementierung eines einfachen Fortschrittsbalkens mit Prozentsatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!