✔ [Ajax] Dynamischer Ladebalken

[queicherius]

Ich versuche grade meine Verarbeitungsdateien ein bisschen zu verschönern. Wie bekomme ich JS dazu diesen Code

<?php 
print "1";
sleep(10);
print ",2";
sleep(10);
print ",3";
sleep(10);
print ",4";
sleep(10);
?>

so anzuzeigen:

1
10 Sekunden warten
1,2
10 Sekunden warten
usw...

Denn so wie ich mein Ajax programmiert hab kommt 40 Sekunden gar nix und dann 1,2,3,4

var resObjekt

    if(navigator.appName.search("Microsoft") > -1){
      resObjekt = new ActiveXObjekt("MSXML.XMLHTTP");
    }
    else
    {
      resObjekt = new XMLHttpRequest();
    }
    
    function sndReq(){      
      resObjekt.open('get', 'ajax.php', true);
      resObjekt.onreadystatechange = nachladen;
      resObjekt.send(null);  
    }
    
    function nachladen(){
      if(resObjekt.readyState != 4){
        document.getElementById("loading1").style.display = "inline";
        document.getElementById("loading2").style.display = "inline";
        nachladen();
      }
      
      
      document.getElementById("loading1").style.display = "none";
        document.getElementById("loading2").style.display = "none";
      handleResponse();
    }
    
    function handleResponse(){
      if(resObjekt.readyState == 4){
        document.getElementById("antwort").innerHTML = resObjekt.responseText;
      }
    }

 

[Sven Mintel]

Moin,

dein Request ist zwar asynchron....was ihn von sonstigen JS-Anweisungen unterscheidet, und da liegt der Knackpunkt.

nachladen() ist synchron...und du schickst es in eine Schleife.
Solange der readyState nicht 4 ist lässt diese Schleife den Browser zu Eise erstarren.

function nachladen(){
      if(resObjekt.readyState != 4){
        document.getElementById("loading1").style.display = "inline";
        document.getElementById("loading2").style.display = "inline";
      //Hier beginnt der fiese Loop
        nachladen();
      }

Aber:selbst, wenn du diesen Loop entfernst, ist das noch keine Garantie auf das gewünschte Ergebnis.
Versuche doch, das ganze über einen Timer per JS zu lösen

 

[queicherius]

Ich habs jetzt so umgestellt:

function nachladen(){
    
     handleResponse();
    
      if(resObjekt.readyState != 4){
        document.getElementById("loading1").style.display = "inline";
        document.getElementById("loading2").style.display = "inline";
         nachladen();
      }else{
      
      
      document.getElementById("loading1").style.display = "none";
        document.getElementById("loading2").style.display = "none";
        }
        
     
    }
    
    function handleResponse(){
        document.getElementById("antwort").innerHTML = resObjekt.responseText;
    }

Leider funktioniert es immer noch nicht

Versuche doch, das ganze über einen Timer per JS zu lösen

Hm wenn du meinst, dass ich das "sleep" so simulieren soll ist das leider keine Lösung, da der PHP-Code stellvertretend für einen anderen ist, der eben ein bisschen arbeitet und zwischendurch Statusmeldungen ausgeben soll, die JS auswertet und dem Benutzer zeigt.
Ansonsten bitte sagen was gemeint war

 

[Sven Mintel]

Leider funktioniert es immer noch nicht

Du darfst nachladen() nicht innerhalb von nachladen() erneut aufrufen...das ist es, was die Schleife erzeugt.

 

[CPoly]

Abgesehen davon, dass wie Sven bereits gesagt hat, dein Javascript nicht korrekt ist, wird dein vorhaben so nicht funktionen. ReadyState == 4 wird erst erreicht, wenn der Server komplett fertig ist. Die musst mit readyState == 3 arbeiten und der Server muss zwischendruch schon antworten.

Schnelles Beispiel:

function request(url)
{
	if (window.XMLHttpRequest)
	   http = new XMLHttpRequest();
	else if (window.ActiveXObject)
	   http = new ActiveXObject("Microsoft.XMLHTTP");
	
	if (http != null){
	   http.open("GET", url, true);
	   http.onreadystatechange = stateChanged;
	   http.send(null);
	}
}

function stateChanged()
{
	if (http.readyState == 4)
		alert("fertig");
	else if(http.readyState == 3)
		alert(http.responseText);
}

request("text.php");

print "1";
sleep(2);
flush();
print ",2";
sleep(2);
flush();
print ",3";
sleep(2);
flush();
print ",4";
sleep(2);
flush();

 

[queicherius]

Super! Danke, das war genau das, was ich gesucht hab (also den PHP Befehl und den readyState == 3)