Ajax-Request Probleme

Hallo zusammen. Ich weiß, es ist Weihnachten, aber vielleicht ist ja doch einer da, der mir das erklären kann

Der Code, also die wichtigen Bestandteile...

function AjaxRequest(uri,callback)
{
    var request = new XMLHttpRequest;


    request.onreadystatechange = function()
    {
        if (request.readyState == 2)
        {
            requestJetzt  = new Date().getTime();
                console.log('jetzt5 '+requestJetzt);
        }


        if (request.readyState == 4)
        {
            request.onreadystatechange = doNothing;


            if(request.status === 200)
            {
                callback(request.responseText);
            }
        }
    };


    request.open('GET', uri, true);
    request.send(null);
};




function sync()
{
    AjaxRequest('/sync.php', function(data)
    {
        var serverTime = JSON.parse(data);
        offset = requestJetzt - serverTime;


        console.log(offset);


        document.getElementById("offset").innerHTML = Trenner(offset);
    });
}




function resync ()
{
    AjaxRequest('/sync.php', function(data)
    {
        var serverTime = JSON.parse(data);
        offset = requestJetzt - serverTime;


        console.log('resync '+offset);
        console.log('requestJetzt '+requestJetzt);


        document.getElementById("offset").innerHTML = Trenner(offset+' vvvvvvv');
    });
}

So, das Problem:

Rufe ich sync() auf, dann geht alles wunderbar. Die Logs in der Console kommen, der Wert im HTML wird ersetzt.

Rufe ich danach resync() auf, dann wird es komisch. sync.php wird abgerufen und auch vollständig übertragen. Aber sämtliche Log-Einträge fehlen und der HTML-Wert wird nicht ersetzt. Verstehe ich schon mal gar nicht, denn die Funktion AjaxRequest ist ja die gleiche, die vorher noch Logeinträge geschrieben hat. Auch sync und resync sind im Grunde identisch.

So, gehe ich nun her und kopiere die Funktion AjaxRequest und erzeuge daraus eine neue AjaxRequestNEU, also identische Funktionen, nur verschiedene Namen und ändere gleichzeitig in resync() den Funktionsaufruf auf AjaxRequestNEU, dann geht alles !?!?! Dann kann ich sync aufrufen und danach so oft ich will auch resync. Alles läuft dann normal.

Nur warum?

Hi Chris,

leider nein, das Ergebnis kommt nicht aus dem Cache. Hatte ich auch schon gedacht, kann ich aber 100% ausschließen. Das Ergebnis der Abfrage selbst ist ein JSON-Objekt mit einem Microtime und das ist immer ein anderer. Den Inhalt der Abfrage sehe ich in der Console, aber eben nur das und nur da.

Und wie gesagt, das ist ja das Komische. Rufe ich mit sync() -> AjaxRequest() auf und mit resync() -> AjaxRequestNEU(), dann geht es ja und ich sehe die korrekten Werte auf der Webseite. Beide AjaxRequest und AjaxRequestNEU sind dann aber halt identische Kopien und beide rufen die sync.php auf.

Mal als Beispiel, Funktionen aber gekürzt (sind aber die von oben)

function AjaxRequest(uri,callback)
{
    console.log('3');


    var request = new XMLHttpRequest;


    request.onreadystatechange = function()
    {
        if (request.readyState == 4)
        {
            console.log('4');
        }
    };
};




function sync()
{
    console.log('1');


    AjaxRequest('/sync.php', function(data)
    {
        console.log('2');
    });
}

Erstaufruf laut Console

Log: 1
Log: 3
GET XHR Request Status 200
Log: 4
Log: 2

Passt also

Rufe ich das dann noch mal auf oder per resync, dann kommt nur

Log: 1
GET XHR Request Status 200

Alles innerhalb von "AjaxRequest", also Logs, inkl. dem "Log 3" und der weitere Programmcode "verschwindet". Dennoch scheint er request.open und request.send aber auszuführen, denn der XHR-Request wird ja erkannt und ausgeführt.

Hi Chris, also wenn ich es richtig gesehen habe, dann ist das nur ein neuer Log-Eintrag.

function AjaxRequest(uri,callback)
{
    console.log('AjaxRequest');


    var request = new XMLHttpRequest;


    request.onreadystatechange = function()
    {
        console.log("ReadyState: " +request.readyState);


        if (request.readyState == 2)
        {
            requestJetzt  = new Date().getTime();
                console.log('jetzt5 '+requestJetzt);
        }


        if (request.readyState == 4)
        {
            //request.onreadystatechange = doNothing;


            if(request.status === 200)
            {
                callback(request.responseText);
            }
        }
    };


    request.open('GET', uri, true);
    request.send(null);
};

So, beim Erstdurchlauf sagt mit die Console dazu:

function sync aufgerufen
setze request ab
AjaxRequest
ReadyState: 1
GETXHR [HTTP/1.1 200 OK 31ms]
ReadyState: 2
jetzt5 1514387825191
ReadyState: 3
ReadyState: 4
Offset 1751

Der Inhalt vom Request ist: 1514387982343

Und nun rufe ich sync() noch mal auf.

function sync aufgerufen
setze request ab
GETXHR [HTTP/1.1 200 OK 33ms]

Der Inhalt vom Request ist: 1514388057311

Und wie sieht man? Dein readyState wurde nicht geloggt, noch nicht mal der String "ReadyState: "

Anmerkung zu den Logs:

console.log('function sync aufgerufen');
console.log('setze request ab');
und
console.log('Offset '+ offset);

stehen in function sync(). Letztere nach nach Request, also der Callback.

In der function AjaxRequest() stehen

gleich am Anfang, erste Zeile, also vor dem Request
console.log('AjaxRequest');

und innerhalb von onreadystatechange stehen
console.log("ReadyState: " +request.readyState);
console.log('jetzt5 '+requestJetzt);

Aber ich sage ja, ich bin zu doof für Javascript. Mache da nun schon seit Samstag rum und werde nicht schlau draus. Vor allem nicht, warum es geht, wenn ich die "function AjaxRequest(uri,callback)" verdopple und eben beide Funktionen aufrufe.

P.S: Wegen Forum und Code. Du musst den vorher in einen Editor kopieren und dann einfügen. Direkt aus der Forenseite kopieren geht nicht, da werden alle Einzüge zerschossen.

Ach ja, bevor da wichtige Infos von mir fehlen.... Der nachträgliche sync wird manuell ausgelöst, also durch einen Klick auf einen Link. Auch da schon mehrere Versionen versucht.

Per "href="javascript:sync();"", "onclick="sync();"" und mit einem Eventlistener "click" auf den Text. Auch schon versucht das globale This zu binden und zu verwenden. Liefert alles genau das gleiche Ergebnis. Geht nur, wenn ich zwei identische, aber unterschiedlich benannte Ajax-Funktionen nutze.

Ja aber dann müsste doch wenigstens das "console.log('AjaxRequest');" kommen, denn das kommt da davor, oder? Also bevor der XMLHttpRequest überhaupt aufgemacht wird.

Wie gesagt, ich raffe hier nix mehr. Habe mir nun ein fertiges Script genommen und getestet. Geht. Habe das nun zu 99% umgebaut auf meines und es geht noch immer.... Du glaubst gar nicht, wie was von ich am Bahnhof bin.... Gestern "Honig im Kopf". So wie der Opa stehe ich auch gerade da....

Fehler eingegrenzt.... Das Inline-Script kollidiert anscheinend mit einem anderen Script. Habe die Seite nun komplett nachgebaut über das Test-Script. Geht. Sobald mein eigenes JS dabei ist, geht nix mehr.

Ok, ganz dumm gelaufen. Ist echt mein externes Script. Die Funktion AjaxRequest gibt es doppelt. Eigentlich ja kein Problem, aber ich nutze nun auch ReadyState 2, das aber nicht im externen Script. Klar, dann geht der Erstaufruf, denn das externe gibt es noch gar nicht, wird per async nachgeladen. Der manuelle Aufruf geht dann auch, die Console schrieb das schon richtig, aber der Request wird nicht vom Inline-Script abgesetzt, sondern vom externen und da gibt es gar keine Log-Anweisungen. Zudem schlägt der Callback ohne Fehlermeldung fehl, also auch keine Textänderung im HTML

Ich sage nur HILFE.... So ein Kindergarten und dann sieht man den Fehler einfach nicht und sucht an allen möglichen anderen Stellen

Danke Chris !