readyState-Verzögerung = Datensalat

[zoku2020]

Hallo,

ich schreibe grade an einem Chat, den ich mit AJAX, PHP und MySQL realisiere.
Leider stehe ich vor folgendem Problem: Wenn ich einen Request absetze, der neue Nachrichten vom Server holen soll, bleibt das Script kurz bei readyState 1 und 2, und wenn eine oder mehr Nachrichten übermittelt werden auch bei 3 hängen. Allerdings werden Nachrichten, die in dieser Zeit zum Server übermittelt werden einfach übergangen beim nächsten Abfragen. Leider stehe ich auf dem Schlauch, was die Lösung dieses Problems angeht.

Vielleicht überblickt das ja einer von Euch (ich bin AJAX-Anfänger). Für Hilfe wäre ich sehr dankbar.

var http_request = false;

    function request_msgs() {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // zu dieser Zeile siehe weiter unten
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = writemsg;
        http_request.open("POST", "scripts/messages.php", true);
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		http_request.send("send=false");
		
		setTimeout("request_msgs();", 2000);

    }

    function writemsg() {
        if(http_request.readyState == 4){
			if(http_request.status == 200){
            	var response = http_request.responseXML;

				table = document.getElementById("text_messages");
			
				if(response != null){
					var messages = response.getElementsByTagName("message");
					for(var i = 0; i < messages.length; i++){
						var tr = document.createElement("tr");
						var td = document.createElement("td");
						td.appendChild(document.createTextNode("content"));
						
						td = td.cloneNode(true);
						td.firstChild.nodeValue = messages[i].getAttribute("user") + ": ";
						tr.appendChild(td);
					
						td = td.cloneNode(true);
						td.firstChild.nodeValue = messages[i].getElementsByTagName("text")[0].firstChild.nodeValue;
						tr.appendChild(td);
				
						table.appendChild(tr);
					}
				}
			}
		}else{
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			td.appendChild(document.createTextNode("content"));
						
			td = td.cloneNode(true);
			td.firstChild.nodeValue = "System: ";
			tr.appendChild(td);
					
			td = td.cloneNode(true);
			td.firstChild.nodeValue = "Übertragungsfehler! Nummer: " + http_request.readyState;
			tr.appendChild(td);
				
			table.appendChild(tr);
		}
	}

 

[Sven Mintel]

Moin,

Das ist so eine Sache mit AJAX....vor allem mit dem A (asynchron)

Das bedeutet ja, das im Gegensatz zum sonsigen JS-Verhalten mehrere Sachen parallel abgearbeitet werden können, und das ist der Knackpunkt:

Du hast da nicht nur 1 Request am Laufen, sondern höchstwahrscheinlich mehrere nebeneinander.

Eine Lösung könnte so aussehen:
Beende bevor du einen neuen Request startest erst den alten(das geht über die Methode abort() )

Dann gibt es noch ein Performance-Gesichtspunkt: so, wie es aussieht, erzeugst du ja jedesmal eine Tabelle mit allen Nachrichten....und musst auch jedesmal alle Daten holen und versenden.
Günstiger wäre es bspw., wenn du beim Request z.B die ID der zuletzt erhaltenen Nachricht mit verarbeitest...du könntest diese dann beim Request mitsenden und müsstest nur die neuen Nachrichten verarbeiten, statt jedesmal alle.