Witaj, Gościu O nas | Kontakt | Mapa
Wortal Forum PHPEdia.pl Planeta Kubek IRC Przetestuj się!
Kategorie

Kategorie

Kategoria wyżej
O autorze

O autorze

Tomasz (TomASS) Łosek
Reklama

Reklama

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

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"))
Informacje na podobny temat:
Wasze opinie
Wszystkie opinie użytkowników: (8)
pff
Wtorek 06 Styczeń 2009 10:36:32 am - prz3kus

Po co dodawać coś co działa tylko pod IE zal

nie działa :(
Niedziela 04 Listopad 2007 4:50:39 pm - taoo

Mi to nie działa ani pod IE ani pod FX

Register3.php
Poniedziałek 25 Czerwiec 2007 11:07:48 pm - Ewka

Skąd mam wziąść ten register3.php?

Czy ten register3.php ...
Piątek 01 Czerwiec 2007 12:28:47 pm - FliSs_tCv <mat_flisikowski_at_tcz.pl>

Czy ten register3.php nalezy samemu napisac czy jak bo chyba nie rozumiem prykładu moze mi ktos wytłumaczyc ?

nie działa w operze i firefoxie
Poniedziałek 20 Listopad 2006 6:51:36 pm - cartman_ <maciuhr_at_o2.pl>

w IE działa idealnie, w operze daje komunikat że login juz istnieje ale i tak submituje się na stronę podaną w polu action (!) w firefoxie nawet nie daje komunikatu, że login juz istnieje tylko sie submituje...... dlaczego?

Jak?
Środa 15 Listopad 2006 5:37:39 pm - tomass <tlosek_at_interia.pl>

Pewnie, że można po Hiszpanii lub Włoszech jeździć bez klimatyzacji, ale po co? Jak tak jest wygodniej? Ciekaw jestem jak byś zrobił coś takiego nie używając AJAXa?

Technologia buehehe
Środa 09 Sierpień 2006 10:46:33 am - Mikoj <mikoj_at_tlen.pl>

AJAX - drugie starcie z fascynującą technologią OMG
http://en.wikipedia.org/wiki/AJAX
czytaj "Ajax is not a technology in itself"
Wiec fajny tytuł :) Tak dalej...

agrrrrr
Poniedziałek 31 Lipiec 2006 7:02:33 pm - emp

czemu takie bezsensowne te przyklady z ajaxem... 90% przykladow na necie zajaxem mozna zrobic bez niego :/ jakby nie mozna bylo zrobic normalnych przykaldow :/

Mentax.pl    NQ.pl- serwery z dodatkiem świętego spokoju...   
O nas | Kontakt | Mapa serwisu
Copyright (c) 2003-2017 php.pl    Wszystkie prawa zastrzeżone    Powered by eZ publish Content Management System eZ publish Content Management System