Tämä AJAX ohjelmointikielellä tehty pienehko scripti mahdollistaa sen, että voi kirjautua vaikkapa jollekin sivulle päivittämättä sivua sisäänkirjautumisen yhteydessä. Lähdettä ei tarvitse mainita, mutta et saa sanoa että joku muu kuin minä olen sen tehnyt.
Vaatii PHP tuen.
Koodin on tarkoitus hieman opettaa AJAX koodin käyttöä php:n kanssa. Tätä esimerkkiä voisi käyttää esim jollain videosivulla, jolla halutaan että sisäänkirjautuminen ei pysäytä videon lataamista. AJAX koodilla voi myös vaikka tehdä niin, että kirjautumisen jälkeen videon arvostelu/kommentointi on mahdollista.
login.html
<!DOCTYPE html>
<html>
<head>
<title>Kirjaudu sisään</title>
</head>
<body>
<div id="content">
<h1>AJAX sisäänkirjautumis esimerkki</h1><br>
<form name="form" action="get">
<table border=0>
<tr>
<td>Tunnus: </td><td> <input type="text" name="username"></td> <!-- Tunnus -->
</tr>
<tr>
<td>Salasana: </td><td> <input type="password" name="password"></td> <!-- passu -->
</tr>
</table>
<input type="button" value="Kirjaudu sisään" onclick="LogIn();"> <!-- Nappula, jota painaessa sisäänkirjautumiseen käytettävä koodi aktivoituu ja se ajetaan. -->
</form>
</div>
<script type="text/javascript">
function LogIn() {
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("content").innerHTML = xmlhttp.responseText; //Tämä muokkaa "content" id:llä määritellyn divin sisällön sillä, mitä se saa vastaukseksi check_login.php tiedostosta.
}
}
var tunnus = document.form.username.value; //Mitä "tunnus" inputissa lukee?
var salasana = document.form.password.value; //Mitä "salasana" inputissa lukee?
xmlhttp.open("GET", "check_login.php?tunnus="+tunnus+"&salasana="+salasana, true); //Hae tiedot sivulta. Osoitteessa on määritelty tunnus ja passu. Ne eivät kuitenkaan näy osoiterivissä tai muuallakaan. Tosin jossain tapauksessa (kunnon käytössä) saattaa näyttää osoiterivillä tunnuksen ja salasanan.
xmlhttp.send(); //Lähetä tiedot, jotka edellisellä rivillä on määritelty.
}
</script>
</body>
</html>check_login.php
<?php
$tunnus = $_GET["tunnus"];
$salasana = $_GET["salasana"];
/*
Tähän voit laittaa koodin, joka vaikka hakee käyttäjätietoja tietokannasta tai jostain...
*/
if($tunnus == "Tunnus" && $salasana == "Salasana") { //Jos tunnus on "Tunnus" ja salasana on "Salasana" (Voit muuttaa tai laittaa tilalle muuttujat jotka haetaan vaikka kyselyssä, joka tonkii esim tietokantaa).
echo "Sisäänkirjautuminen onnistui!"; //Kerro että käyttäjä on nyt sisällä
/*
Tähän voit määritellä sitten vaikkapa evästeiden asetukset yms.
*/
}else { //Jos sisäänkirjautuminen ei onnistunutkaan...
?>
Sisäänkirjautuminen epäonnistui!<br><br>
<form name="form">
<table border=0>
<tr>
<td>Tunnus: </td><td> <input type="text" name="username"></td>
</tr>
<tr>
<td>Salasana: </td><td> <input type="password" name="password"></td>
</tr>
</table>
<input type="button" value="Kirjaudu sisään" onclick="LogIn();">
</form>
<?php
}
?>Aihe on jo aika vanha, joten et voi enää vastata siihen.