ProgressBar in jsp

[Dimax]

Guten Tag,
ich versuche ein Progressbalken in JSP-Seite einbauen,es klappt aber nicht.
Das Balken soll zeigen wie weit das Programm beim Dateianalyse ist.

JSP Seite
<!--Style vom Balken-->
<style>
#myProgress {
  width: 50%;
  background-color: #ddd;
  margin: auto;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<!--java script finktion für Balkenänderung-->
<script>
var i = 0;
function frame(){
var elem = document.getElementById("myBar");
var id = setInterval(kriegenBreite, 10);
if(i==0){
    i=1;
function kriegenBreite(){
    
    if (Math.round((parseInt(this.responseText)/17)*100)) >= 100) {
         clearInterval(id);
            i = 0;
    }else{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          elem.style.width = Math.round((parseInt(this.responseText)/17)*100) + "%";
          elem.innerHTML = Math.round((parseInt(this.responseText)/17)*100) + "%";
      }
    }
    xmlhttp.open("POST", "programAnalyse" , true);
    xmlhttp.send();
  }
}
}
}
 
</script>

<div id="myProgress">
  <div id="myBar"></div>
</div>
<FORM ENCTYPE="multipart/form-data" ACTION="programAnalyse"
    METHOD=POST>
<INPUT TYPE="button" onclick="submit();frame();" VALUE="hinzuf&uuml;gen">

Die Daten kriege ich vom java Programm
programmAnalyse.java

@WebServlet("programmAnalyse")
@MultipartConfig
public class programmAnalyse extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) {}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        final Part partFile=request.getPart("file");
        final Part partProg=request.getPart("progra_name");
        final Part partProj=request.getPart("SelectDropDown");
        long sizeFile=partFile.getSize();
        long sizeProg=partProg.getSize();
        long sizeProj=partProj.getSize();
        final PrintWriter out=response.getWriter();

//im weiterem Verlauf werden 17 Funktionen aufgerufen und nach jedem Aufruf sollte das Balken den Progress zeigen

finktionAufruf1();
 out.write("1"); usw..

Brauche Denkanstoß wie man das realisieren könnte.
Danke im Voraus.

 

[Steven Hachel]

Hey,
ich würde es mit Websockets (eleganter) oder Restful lösen.

Du kannst ja nach jeder Zeile, die den aktuellen Wert der Progressbar representiert, einen Call per Websocket an das
Frontend machen. Dazu benötigst du einfach nur ein Object mit den Werten (valueCurrent, valueMax), welches sich für die Restful API
nicht unterscheiden muss, dass du über Javascript per JSON.parse(event.data) auflösen kannst.
Websocket sorgt automatisch für den Aufruf Frontendseitig, es muss dann nur noch so implementiert werden, wie du es benötigt.

Wenn du Restful nutzt, musst du mit setInterval() etc. arbeiten und einen regelmäßigen call zum Backend machen um
das Object zurück geliefert zu bekommen, um mit den darin liegenden Werten zu arbeiten. Auch, wie gehabt, mit JSON.parse(responseEntity).

Steven