Kratak tutorial o Ajax-u.
Tutorial sam preuzeo sa ove stranice, samo sam preveo na srpski i ispravio greške, koje sam uocio.
Uzećemo za primer ZIP kod, kad se ukuca ZIP kod da automatski prikaže grad koji pripada tom kodu.
Prvi korak:
Prvo kreiramo običnu HTML formu za prikaz potrebnih polja, kod preuzmite odavde.
Drugi korak:
Dodajemo dogadjaj, onblur=”updateCityState();”, on se okida svaki put kada polje ZIP code izgubi fokus.
Funkcija updateCityState će biti zadužena da pita server koja država i grad su za određeni server, za sada ta funkcija ne radi ništa, kasnije ćemo dodati. Kod se nalazi ovde.
Treći korak:
Treba da kreiramo XMLHttpRequest objekat. Zbog različitih varijacija urazličitim WEB browser – ima, kreiranje ovog objekta je nešto komplikovanije, nego što bi trebalo da bude. Najbolji načinda kreiramo XMLHttpRequest objekat je da koristimo funkciju getHTTPObject(). Ta funkcija ima prekompajlirane direktive, koja omogućava da kreiranje objekta bude kompatibilno u različitim browser-ima. Negde ovde je kod
Četvrti korak:
Ovo je poslednji korak, ovog najjednostavnijeg AJAX koda. Prvo ćemo postaviti URL za serversku stranu skripte, da bude getCityState.php?param=, ovaj URL će sadržati ZIP kod, dodat, tako da će ZIP kod biti prosleđen kao HTTP GET parametar nazvan param. To znači da ako korisnik ukuca ZIP kod 17534, rezultat će biti getCityState.php?param=17534. Pre nego što pošaljemo HTTP request, moramo postaviti onreadystatechange osobinu da bude ime nađe nove funkcije handleHttpResponse(). To znači da svaki put kada se HTTP ready state promeni, naša funkcija handleHttpResponse() će biti pozvana.
Naša nova funkcija handleHttpResponse() čeka da bude pozvana, i kada je pozvana, proverava da li je readState jednako 4. Ukoliko je jednako 4, to znači da je zahtev gotov.
Kada je zahtev gotov onda uzimamo odgovor (responseText), otpakujemo ga i postavljamo polja za državu i grad.
Više o readyState možete nać ovde.
Kod možete preuzeti odavde u originalnoj verziji postala je greška, umesto <form action=”post”>, treba da stoji <form action=”getCityState.php”>, a taj getCityState.php izgleda ovako:
<?php
echo “Buzzard Puckey,NM”;
?>
Posted on Sunday, June 24th, 2007
Under: Ajax | No Comments »