Coder Wiki | HowTos | Ajax-Login

Dies ist ein simpler Mechanismus um Benutzernamen und Passwort an eine JavaScript Funktion zu übertragen. In der JavaScript Funktion findet ein AJAX Request auf login.php statt.

In der login.php kann man nun die Variablen $_GET['user'] und $_GET['pw'] verwenden um die Authentifizierung zu überprüfen. Dann kann man z.B. eine SESSION starten.

Das Trickreiche an diesem Code ist der onsubmit Eventhandler. Indem wir return false liefern bricht die reguläre HTML Aktion ab und die Seite wird nicht neugeladen.
Innerhalb der Funktion können wir ganz leicht mit this auf die Formular-Objekte zugreifen. Wie wir von DOM gewohnt holen wir den Werte mit value.

Sollte der Benutzer kein JavaScript aktiviert haben, wird durch diesen Weg die im Attribut action hinterlegte URL aufgerufen. Hier kann man eine alternative Behandlung durchführen.

[Get Code]

ajax-login.html
<html><head>
<title>AJAX Login mit onsubmit Request</title>
 
<script type="text/javascript">
<!--
var req;
 
try {
        req = window.XMLHttpRequest?new XMLHttpRequest(): 
                new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) {
        //Kein AJAX Support
}
 
/**
 * AJAX Login Request an login.php
 * @param user -> Benutzername
 * @param password -> Passwort
 */
function sendRequest(user, password) {
        req.onreadystatechange = function() {
 
                if ((req.readyState == 4) && (req.status == 200)) { 
                        alert(req.responseText);
                }
        }
 
        req.open("GET", 'login.php?user='+user+'&password='+password); 
        req.send(null); 
 
        return false; //liefere false um das Neuladen der Seite zu verhindern
}
//-->
</script>
</head>
<body>
 
<form method="get" onsubmit="return sendRequest(this.user.value, this.pw.value)" action="login.php">
 
        Benutzer: <input type="text" name="user" /><br />
        Passwort: <input type="text" name="pw" /><br />
 
        <input type="submit" />
</form>
 
</body></html>

Coder How To's

Ajax-Login