JavaScript AJAX Progress-Bar?
Schönen guten Tag miteinander,
Ich möchte viele Anfragen auf meiner Website per AJAX realisieren. Dazu möchte ich einen Ladebalken für den aktuellen Ladestatus der asynchronen Abfrage erstellen.
Ich bin auf das ProgressEvent gestoßen. Dieses wird bei mir jedoch nur einmal ausgeführt, was vermutlich auch standardmäßig der Fall ist.
Mein Ziel ist aber wie gesagt einen Ladebalken, der (wenn die Abfrage zu beispielsweise 25% geladen wurde) auch um diesen Prozentsatz angezeigt wird, zu erstellen.
Wie gehe ich da am besten vor?
LG
2 Antworten
Das ProgressEvent zu nutzen ist an der Stelle nicht verkehrt und du findest auch leicht Beispiele dazu:
- https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent
- https://zinoui.com/blog/ajax-request-progress-bar (für Download-/Upload-Prozesse)
Allerdings muss die Länge der zu ladenden Ressource auch bekannt sein. Dafür wird die Content-Length-Information aus dem Response Header bezogen.
If the length of the HTTP entity body is known through the Content-Length header, initialize the lengthComputable attribute to true and initialize the total attribute to the length.
Diese Angabe wirst du nicht finden, wenn der Server den Response eh bereits in Häppchen aufteilt.
If a Content-Length header field (section 14.13) is present, its decimal value in OCTETs represents both the entity-length and the transfer-length. The Content-Length header field MUST NOT be sent if these two lengths are different (i.e., if a Transfer-Encoding header field is present). If a message is received with both a Transfer-Encoding header field and a Content-Length header field, the latter MUST be ignored.
Prüfe also zunächst, welche Informationen dir dein Server bei Anfrage schickt.
