Usiłuje zbudować formularz logowania oparty na AJAX. Miałem koncepcje, ale nie działa to do końca tak jak bym chciał. Mam pliki: index.php, ajax.js, logowanie.php oraz wylog.php

index.php
Kod
<?php
session_start();
?>
<html>
  <head>
    <script type="text/javascript" src="ajax.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
<body>
    <?php
    if(isset($_SESSION['prawid_uzyt']))
    {
        ?>
        Jestes juz zalogowany
    <?php
    }
    else {
        ?>
    <form onsubmit="return false;">
      <div id="mainDiv">
        Login:<input class="pole" id="login" type="text" />
        Hasło:<input class="pole" id="haslo" type="password" />
        <input type="button" id="przycisk" onclick="zaloguj();" value="zaloguj" />
        <br>
      </div>
          <?php    
    }
    ?>
      <input type="button" id="przycisk" onclick="wyloguj()" value="wyloguj" />
    </form>
    
</body>
</html>

Na tej stronie znajduje się div do którego ładuje wyniki.

ajax.js
Kod
var odpowiedz = null;
var login = null;
var haslo = null;

function AjaxInit()
{
  var zapytanie = null;
  
  try
  {
    zapytanie = new XMLHttpRequest();
  }
  catch(e)
  {
    try
    {
      zapytanie = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e2)
    {
      try
      {
        zapytanie = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e3)
      {
        alert("Twoja przeglądarka nie obsługuje ajaxa");
      }
    }
  }
  return zapytanie;
}

function zaloguj()
{
  login = document.getElementById("login").value;
  haslo = document.getElementById("haslo").value;
  var zapytanie = AjaxInit();
  if(zapytanie != null)
  {
    zapytanie.open("POST", "logowanie.php", true);
    
    zapytanie.onreadystatechange = function()
    {
      if(zapytanie.readyState == 4)
      {
        if(zapytanie.status == 200)
        {
          odpowiedz = zapytanie.responseText;
        }
      }
    }
    
    zapytanie.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
    zapytanie.send("login="+login+"&haslo="+haslo);
    document.getElementById("login").value="";
    document.getElementById("haslo").value="";
    document.getElementById("mainDiv").innerHTML = odpowiedz;
  }
}

function wyloguj()
{
   var zapytanie = AjaxInit();
  
   if(zapytanie != null)
   {
        zapytanie.open("GET", "wylog.php", true);
       
        zapytanie.onreadystatechange = function()
        {
           if(zapytanie.readyState == 4)
           {
               if(zapytanie.status == 200)
               {
                   odpowiedz = zapytanie.responseText;
                   document.getElementById("mainDiv").innerHTML = odpowiedz;
               }
           }
        }    
   }
   zapytanie.send(null);
}

Funkcja zaloguj powoduje wysłanie do sktyptu loginu i hasła.

zaloguj.php
Kod
<?php
session_start();
$login = $_POST['login'];
$haslo = $_POST['haslo'];

if(isset($_SESSION['prawid_uzyt']))
{
    echo "Jestes juz zalogowany";
}
elseif($login == "login" && $haslo == "haslo")
{
$_SESSION['prawid_uzyt'] = $login;
echo "zalogowany jako ";
echo $_SESSION['prawid_uzyt'];
}
else{
echo "Niepoprawny login/haslo";
echo    "<form onsubmit=\"return false;\">";
echo        "Login:<input class=\"pole\" id=\"login\" type=\"text\" \>";
echo        "Hasło:<input class=\"pole\" id=\"haslo\" type=\"password\" \>";
echo        "<input type=\"button\" id=\"przycisk\" onclick=\"zaloguj();\" value=\"zaloguj\" \>";
echo        "<br>";
echo    "<form>";
}
?>

Skrypt ustawia zmienną sesji $_SESSION['prawid_uzyt'], a jeżeli dane są niepoprawne zwraca formularz logowania.

wylog.php

Kod
<?php
session_start();
unset($_SESSION['prawid_uzyt']);
session_destroy();
echo    "<form onsubmit=\"return false;\">";
echo        "Login:<input class=\"pole\" id=\"login\" type=\"text\" \>";
echo        "Hasło:<input class=\"pole\" id=\"haslo\" type=\"password\" \>";
echo        "<input type=\"button\" id=\"przycisk\" onclick=\"zaloguj();\" value=\"zaloguj\" \>";
echo        "<br>";
echo    "<form>";
?>

Ten skrypt usuwa zmienną sesji i również wyświetla formularz logowania. Problem polega na tym, że po kliknięciu któregokolwiek przycisku nie ma widocznego efektu. Dopiero gdy nacisnę przycisk po raz drugi lub trzeci skrypt zaczyna działać poprawnie. Podejrzewam, że ma to jakiś związek z rejestrowaniem zmiennych sesji. Może ktoś wie w czym tkwi błąd, albo zasugeruje mi jakieś lepszy sposób na zrobienie logowania bez przeładowywania strony. Zaznaczam, że nie chce używać JQuery i innych gotowych bibliotek.