Home > AJAX > AJAX How to

AJAX How to

Prosinac 18th, 2008

AJAX How To ajax_logo

Mirza nam u ovom clanku donosi kratki pregled o AJAX-u, nacin rada, kratkti pregled ove “tehnologije”.

Ovo ce vam pomoci da napravite prvi korak u ovom podrucju.

Ajax (Asynchronous Javascript And XML) nije nista novo revolucionarno, vec je nesto sto je postojalo vec par godina, medjutim niko nije koristio JavaScript vise manje na taj nacin do ove godine. Radi se strucnije receno o asinhronoj komunikaciji izmedju servera i klijenta pomocu XMLHttpRequest-a. To nije nova tehnologija nego samo zbir vise tehnologija i bazira sa na sposobnosti JavaScripta da koristi i kontrolise XMLHttpRequest odnosno jednostavno receno komunikaciju kroz HTTP protokol.

Sve u svemu, radi se o JavaScripts koje imaju mogucnost da komuniciraju preko HTTP protokola sa drugim stranicama. U praksi to moze npr. da znaci ovo:

1. Korisnik dodje na stranicu i mora se registrovati

2. Ispuni sva polja (username, password, email…) i klikne na “Registruj me”

3. To starta JavaScript koji post ili get metodom pozove stranicu http://www.domena.com/registracija sa svim vrijednostima iz polja (username, password, email …) BEZ da se neka nova stranica ucitava, vec se sve desava na istoj.

4. Stranica http://www.domena.com/registracija provjeri sve upisane vrijednosti i unese ih u bazu ako su u redu, odnosno vrati neku rezultat na javascript

5. JavaScript provjeri rezultat, i na osnovu rezultata odradi nesto

Prednost:

- radi u svakom modernom browseru

- sve ide puno brze, jer se ne mora nova stranica ucitavati, nego se samo vraca i ocjenjuje rezultat.

- puno je interaktivnija stranica

- nudi mogucnost da stranica bude vise “user-friendly”

Mane:

- user mora imati aktiviranu JavaScript podrsku u browseru

- ako se konstantno dok npr. user pise na stranici u pozadini poziva neka druga stranica, to moze biti veliko opterecenje za server odnosno traffic.

Jedan jednostavan primjer sa prototype.js bi izgledao ovako. User upise svoj zeljeni username pri registraciji. Pored polja se nalazi button na koji on moze kliknuti ako hoce da provjeri da li je username vec zauzet. Za ove primjere koristim veoma finu implementaciju Ajax-a koja se zove “prototype.js”. Mozete je skinuti sa http://prototype.conio.net/.

programski kod:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
<!-- FORMULAR -->
<input type="text" name="username" id="username" value="" />
<input type="text" name="checkusername" value="Provjerite Username"  onclick="provjeriUsername()" />
<span id="rezultatprovjere"></span>

<!-- JAVASCRIPT -->

<script type="text/javascript" src="prototype.js" />
<script type="text/javascript">

  function provjeriUsername() {

    // npr. provjeri da li je username polje prazno
    if($('username').value.length == 0) {
        alert("Username prekratak");
    } else {

        // prikazi neku poruku dok user ceka
        $('rezultatprovjere').innerHTML = 'Sacekajte momenat...';

        // ova stranica vraca kao rezultat 1 (slobodno) ili 0 (zauzeto)
        var url  = 'http://www.domena.com/provjeri_username.php';
        var parametri = 'action=provjeri_username&username=' + $F('username')
        var myAjax = new Ajax.Request(
          url, {method: 'get', parameters: parametri onComplete: pokaziRezultat});
    }
  }

  // ova funkcija prikazuje rezultat
  function pokaziRezultat(rezultat) {
      if (rezultat.responseText == 1) {
          $('rezultatprovjere').innerHTML = 'Ovaj username nije zauzet';
      } else {
          $('rezultatprovjere').innerHTML = 'Ovaj username je vec zauzet';
      }
  }
} 

</script>

Sta se desava ovdje? Klik na button “Provjerite Username” starta JavaScript funkciju provjeriUsername(). Ta funkcija:

1. provjerava da li je “username” polje prazno

2. ako nije poziva odredjenu stranicu sa upisanim username-om

3. nakon sto se rezultat vrati, poziva funkciju pokaziRezultat() sa rezultatom

4. zavisno od rezultata (1 ili 0) funkcija prikazuje rezultat na stranici.

I to je to … http://www.domena.com/provjeri_username.php provjerava da li je ovaj username vec zauzet i vraca 1 ili 0 kao rezultat. Taj file moze ovako izgledati, i ne mora biti PHP, moze biti i bilo koji drugi jezik, gore navedeni JavaScript ostaje isti.

programski kod:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
<?php

$username = $_GET['username'];

// ne zaboravite provjeriti sintaksu username-a ...
// ja cu to ovdje izostaviti 

$user = mysql_query('
    SELECT username
    FROM korisnici
    WHERE username = "'.$username.'"
'));

// vraca rezultat
if (mysql_num_rows($user) > 0) {
    echo 0;
} else {
    echo 1;
}
?>

Kao sto vidite rezultat se vraca sa normalnom echo() odnosno print() komandom. To sto vratite je najbobicniji HTML. Vi mozete vratiti kao rezultat sta zelite … arraye, citave html stranice ili bilo sta drugo sto mozete prikazati u okviru HTML stranice, jer sve sto JavaScript vidi je ustvari najobicniji tekst.

Kao sto rekoh, nema velike nauke. Na vama je sta ce te uraditi sa JavaScripts. Evo par primjera, sta su ljudi napravili … Granica nema, samo je u pitanju kreativnost …

Dva fina “auto-completion” primjera … Google suggest stvarno nije velika stvar, iako je istina nevjerovatno brz za toliku kolicinu podataka:

Google suggest: http://www.google.com/webhp?complete=1&hl=en

ili www.gmail.com ili

Scriptaculous:

http://script.aculo.us/demos/ajax/autocompleter_customized

M.

Popularity: 6% [?]

AJAX , , ,

  1. Trenutno nema komentara.
  1. No trackbacks yet.