Real-time kontrola e-mailovej adresy AJAX-om

Zvládnuť overenie e-mailovej adresy a jej kontrolu prostredníctvom regulárnych výrazov je dnes už otázka zopár kliknutí. Na internete sa povaľuje množstvo opensource funkcií, ktoré túto kontrolu zabezpečia. Vzhľadom na to, že samotný prínos kontroly zadanej e-mailovej adresy je minimálny (Odfiltruje to spambota? Užívateľa, ktorý nechce zadať funkčný email? Pomôže to niečomu? Nie.), je dobré túto funkciu spraviť aspoň efektívnou. Tomu môže napomôcť ajax, ktorý okamžite po napísaní odošle požiadavku na server a ten pomocou PHP funkcie overí, či je email OK. Prostredníctvom AJAXu, výstup kontroly, môžeme hneď zobraziť.
Okrem toho, že celý registračný formulár vďaka tomu pôsobí živšie a interaktívnejšie, je to aj veľmi vhodná príležitosť naučiť sa základy AJAXu na veľmi jednoduchom príklade.

PHP Funkcia

Na úvod len uvádzam jednu z tých opensourcových funkcií na overenie emailu, akých je na internete plno. Zdroj: http://swik.net/…address/deo6. Samozrejme, sú aj jednoduchšie a určite aj lepšie, ale ako príklad postačuje.

<?
 
function isEmailValid($email) {
 
          // First, we check that there's one @ symbol, and that the lengths are right
          if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
            // Email invalid because wrong number of characters in one section, or wrong number of @ symbols.
 
                return false;
          }
          // Split it into sections to make life easier
          $email_array = explode("@", $email);
          $local_array = explode(".", $email_array[0]);
          for ($i = 0; $i < sizeof($local_array); $i++) {
             if (!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$", $local_array[$i])) {
 
                return false;
            }
          }
          if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) { // Check if domain is IP. If not, it should be valid domain name
            $domain_array = explode(".", $email_array[1]);
            if (sizeof($domain_array) < 2) {
 
                return false; // Not enough parts to domain
            }
            for ($i = 0; $i < sizeof($domain_array); $i++) {
              if (!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$", $domain_array[$i])) {
 
                return false;
              }
            }
          }
          return true;
        }
?>

AJAX – základy

AJAX v zásade nie je nič iné ako niekoľko javascriptových funkcií. Základ tvorí funkcia XMLHttp, ktorej použitie sa líši v Internet Exploreri a v normálnych browseroch, takže jej použitie treba zaobaliť do definovanej funkcie, ktorá rozlíši, či užívateľ používa IE alebo niečo iné. XMLHttp vyvolá asynchrónnu požiadavku na server. V praxi to vyzerá asi tak, že na to, aby server vykonal nejakú štandardnú PHP funkciu nie je nutný refresh stránky, či odoslatie formuláru, ale postačí nejaký javascriptový event – onclick, onchange a pod. Javascriptová funkcia môže vyzerať takto:

function getHTTPObject(){
 
        if (window.ActiveXObject)
        return new ActiveXObject("Microsoft.XMLHTTP");
        else if (window.XMLHttpRequest)
        return new XMLHttpRequest();
 
        else {
 
                alert("Your browser does not support AJAX.");
                return null;
 
        }
 
}

Samotné použitie je potom relatívne jednoduché, avšak predsa budeme potrebovať ešte zopár funkcií.

function doWork(file,js_id){
 
        httpObject = getHTTPObject();
 
           /* všimnite si parameter "GET". Tu sa zapíše akou metódou má byť PHP funkcii poslaná premenná. V tomto prípade je to GET, ale môže sa použiť aj POST. */
 
        if (httpObject != null) {
 
                httpObject.open("GET", file+document.getElementById(js_id).value, true);
 
                 /* tu budeme volať ďalšiu javascriptovú funkciu - setOutputText (kód viď. nižšie) */
 
                httpObject.onreadystatechange = setOutputText;
 
                httpObject.send(null);
 
        }
 
}

Premenná file je názov PHP súboru, ktorý sa ma asynchrónne zavolať a je v ňom kód funkcie, ktorá sa má vykonať. V našom prípade tam bude uložená PHP funkcia na kontrolu emailu a jej samotné zavolanie. Do premennej môže byť dosadené napríklad „subor.php?pre­menna=“, pričom javascriptom potom do doplníme obsah GET premennej. Samotná požiadavka na server bude takáto „subor.php?pre­menna=email@e­mail.sk“.
Ten obsah „email@email.sk“ zoberieme z HTML elementu – teda input textu, kam užívateľ zadal email. Na to slúži javascriptová premenná js_id, čo je ID HTML elementu, odkiaľ chceme brať data.

Asynchrónne zobrazenie výstupu PHP funkcie

Vysvetlili sme si ako zavolať PHP funkciou AJAXom, ostáva už len zobraziť výsledok práce tejto funkcie.

function setOutputText() {
 
            /* táto podmienka je splnená, v prípade, že request dopadol dobre */
        if(httpObject.readyState == 4){
                                document.getElementById('email_result').innerHTML = httpObject.responseText;
        }
 
            /* httpObject.responseText = výstup PHP funkcie. Čokoľvek čo PHP funkcia vráti, sa dostáva do tejto premennej */
}

Pokiaľ bude splnená podmienka, vložíme do HTML elementu s ID „email_result“ výstup funkcie. Samozrejmosťou je, že takýto HTML element máme v našom zdrojovom kóde niekde vytvorený. Môže to byť span, div, či čokoľvek iné.
Pokiaľ PHP funkcia isEmailValid vráti „true“, vypíšeme hlášku, že e-mail je v poriadku. Tento výstup potom ajax vypíše do zvoleného HTML elementu. Pokiaľ email v poriadku nie je, vypíšeme naopak chybovú hlášku.

A to je asi tak všetko. AJAXom sa dajú robiť zaujímavé veci, pravidlom však je, že všetkého veľa škodí a ani prehnane AJAXové stránky nie sú bohviečo. Hlavne nezabúdajte na prístupnosť, nie každý prehliadač podporuje AJAX a sú aj ľudia ktorí surfujú z mobilov, iphonov a pod. Takže AJAX ako efektívna vychytávka = ÁNO, ale AJAX ako podmienka funkčnosti stránky = rozhodne NIE.

Tomáš Mašek