AJAX - drugie starcie z fascynującą technologią. / Po stronie przeglądarki / Artykuły / Wortal / Home

Witam ponownie.

Aby jeszcze bardziej przybliżyć technologię AJAX, przedstawię jeszcze jeden przykład. Jest to ulepszona walidacja formularza do rejestracji użytkownika. Potrzebny będzie nam jak zwykle plik klasy advAJAX.js, plik z funkcjami js (register.js), oraz pliki: register.php oraz register2.php...

Troszkę dużo się nazbierało, ale już wyjaśniam o co chodzi.

Ogólna idea jest taka:

Plik register.php generuje formularz ( registerForm), po wypełnieniu pól zaczyna się magia... ...ekhm, no nie zupełnie, zaczyna się AJAX, który wywołuje odpowiednią funkcję JS, która to przesyła odpowiednie dane (z formularza) do pliku register2.php, on daje odpowiedź i ajax na podstawie otrzymanej odpowiedzi ( responseText) wysyła bądź nie formularz. Ktoś może powiedzieć, że to można zrobić bez ajaxa - fakt, można, ale nie zamierzam nikogo do tego przekonywać, potraktujmy to jako ćwiczenie.

Zaczniemy od pliku register.php. Równie dobrze, mógłby być to register.html, to bez różnicy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <title>rejestracja nowego użytkownika</title>
  <script type="text/javascript" src="register.js"></script>
  <script type="text/javascript" src="advajax.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <form action="register3.php" method="POST" id="registerForm" name="registerForm">
<table>
<tr><td class="napis">Login:</td><td><input type="text" name="login" id="login"></td></tr>
<tr><td class="napis">Hasło:</td><td><input type="password" name="Haslo"></td></tr>
<tr><td class="napis">Powtórz hasło:</td><td><input type="password" name="Haslo2"></td></tr>
<tr><td class="napis">E-mail:</td><td><input type="text" name="email" id="email"></td></tr>
<tr><td colspan="2" style="text-align: center;"><button onClick="sprawdz_dane();">Zarejestruj mnie...</button></td></tr>
</form>
</table>
</body>
</html>

Plik ten ma za zadanie wyświetlenie formularza, mamy 4 pola: Login, Hasło, Powtórz hasło oraz e-mail. Aby nie gmatwać przykładu zajmiemy się tylko "dodatkową" walidacją, czyli czy użytkownik lub e-mail istnieją już w bazie danych, nie będziemy brać pod uwagę długości wpisanych danych, walidacji e-maila czy porównywania haseł. Do przycisku Zarejestruj mnie.... Przypisana jest funkcja sprawdz_dane() która znajduje się w pliku register.js (mógłby być połączony z plikiem register.php), który wygląda następująco:

function $(id) {
     return document.getElementById(id);
}
function sprawdz_dane() {
     var login = $("login").value;
     var email = $("email").value;
     var zapytanie = "register2.php?login="+login+"&email="+email;
     advAJAX.get({
          url : zapytanie,
          onSuccess : function(obj) { 
          if(obj.responseText == "login") { 
               alert("Użytkownik o takim loginie jest już w bazie danych");
               $("login").style.border='1px solid red';
               $("email").style.border='1px solid #7F9DB9';
          }
          if(obj.responseText == "email") {
               alert("Ten e-mail isntieje już w bazie danych");
               $("login").style.border='1px solid #7F9DB9';
               $("email").style.border='1px solid red';
          }
          if(obj.responseText == "OK") 
               $("registerForm").submit();
     }
     });
}

Funkcja sprwawdz_dane() pobiera wartości pól ( input type="text";) login oraz email i na ich podstawie generuje odpowiednie zapytanie do pliku register2.php. Zapytanie to jest wykonywane (url: zapytanie). Jako odpowiedź mamy trzy możliwości: albo jest to "login" - tzn login podany przez użytkownia jest już w bazie danych, albo jest to "email" - znaczy się ze e-mail jest w bazie, oraz "OK" - wszystko w porządku (można wysyłać formularz - $("registerForm").submit(); ) i zostanie wysłany formularz do pliku register3.php. Plik, który generuje odpowiedź na zadane żądanie ( register2.php) wygląda następująco:

<?
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
session_start();
mysql_connect ($dbhost,$dblogin,$dbhaslo) or die ("Nie masz uprawnien");
mysql_select_db ("$db");
$login = mysql_escape_string($_GET['login']);
$email = mysql_escape_string($_GET['email']);
$query = "SELECT count(*)AS Ile FROM uop_users WHERE Login='".$login."';";
$result = mysql_query($query);
$row = mysql_fetch_array($result);
if($row['Ile']) 
     echo 'login';
else {   
     $query = "SELECT count(*)AS Ile FROM uop_users WHERE e_mail='$email';";   
     $result = mysql_query($query);
     $row = mysql_fetch_array($result);
     if($row['Ile'])
          echo 'email';
     else echo 'OK';
}
?>

Nic nadzwyczjanego - dwa zapytania i tyle.

Oczywiście, można jeszcze kombinować z metodą assign klasy advAJAX:

advAJAX.assign($("registerForm"))

Kategorie

Spis treści

O autorze

Reklama

Podobne Artykuły

Nowe artykuły

AJAX - drugie starcie z fascynującą technologią.