Dauerschleife und Error mit Ajax und HTTP-Request

[Guron]

Moin Moin,
ich steige heute komplett neu in Ajax ein und ich versuche gerade zu prüfen ob der username den man eingibt avaible ist. Leider stoße ich auf größere Probleme die mich an die Schmerzgrenze bringen. Ich kriege immer wieder folgende Fehlermeldung:

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe

außerdem wenn ich den httprequest an die function checkav sende erhalte ich eine dauerschleife. Ich bin mittlerweile fraglos, da ich nicht weiß wie ich beide Fehler behandeln soll und Google nicht auf mein Problem eine Antwort findet. script:

$(document).ready(function () {
    function checkAv() {
        var username = $("#username").val();

        $.ajax({
            url: "index.php",
            data: {username: username},
            method: "POST",
            dataType: "html",
            beforeSend: function () {
                $("p").show();
            },

            success: function (data) {
                $("#checkav").html(data);
                $("p").hide();
            },
            error: function (jqXHR, textSttus) {
                alert("error" + textSttus);
                console.log("error" + textSttus);
            }
        });
    }
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", checkAv);
    oReq.open("POST", "index.php");
    oReq.send();
});

[Yasunai]

Ich muss sagen, dass ich nicht allzu viel mit Ajax am Hut habe, da ich eher mit Vue und Angular arbeite, aber vielleicht behebt sich das ganze durch diesen Filter:

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    options.async = true;
});

[False]

Okay zu deinem ersten Problem

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe

das kommt wenn du async = false(Bitte auch nicht die Lösung von @Yasunai nutzen) setzt (brauchst du in deinem Fall eigentlich auch nicht).

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", checkAv);
oReq.open("POST", "index.php");
oReq.send();

Wofür brauchst du das wenn du bereits $.ajax nutzt ?

Zu deiner checkAv(btw. schlechte benamung) Funktion....Zunächst solltest du auf der PHP Seite kein html zurück senden sondern ein JSON (gehe davon aus das du Html zurück schickst da du dataType: "html" hast).

Ansonsten sehe ich auf die schnelle keinen Fehler, hast du dir den Request mal angeschaut ?
Was bekommst du beim Request zurück (Content, Status-Code, etc..) ?
(Bei den meisten Browsern kannst du F12 -> Netzwerk deine Requests anschauen)

[Guron]

Originally Posted by .ƒaℓsє.

Okay zu deinem ersten Problem



das kommt wenn du async = false(Bitte auch nicht die Lösung von @Yasunai nutzen) setzt (brauchst du in deinem Fall eigentlich auch nicht).


Wofür brauchst du das wenn du bereits $.ajax nutzt ?

Zu deiner checkAv(btw. schlechte benamung) Funktion....Zunächst solltest du auf der PHP Seite kein html zurück senden sondern ein JSON (gehe davon aus das du Html zurück schickst da du dataType: "html" hast).

Ansonsten sehe ich auf die schnelle keinen Fehler, hast du dir den Request mal angeschaut ?
Was bekommst du beim Request zurück (Content, Status-Code, etc..) ?
(Bei den meisten Browsern kannst du F12 -> Netzwerk deine Requests anschauen)

Danke für die Rückmeldung (auch danke an Yas). Async musste ich als aktiviert angeben, da ansonsten der HTTPRequest nicht durchgegangen wäre. Eigentlich sollte dieser standardmäßig aktiviert sein, aber komischerweise bei mir nicht. Damit hatte sich das Problem auch gelöst.