AJAX – Asynchronous JavaScript And XML

AJAX – AsynchronousJavaScriptAnd XML

Što je zapravo AJAX? • AJAX je skraćenica od AsynchronousJavaScriptAnd XML • AJAX je zasnovan na JavaScript i HTTP zahtjevima

Što biste trebali znati prije početka korištenja AJAX-a? • HTML/XHTML • JavaScript • Server-side scripting • AJAX nije novi jezik programiranja, nego tehnika za kreiranje boljih i bržih web aplikcija • AJAX koristi asinkroni transfer podataka (HTTP zahtjevi) između pretraživača i servera

Na čemu se zasniva AJAX? • JavaScript • XML • HTML • CSS • S AJAX-om, internet aplikacije mogu biti bogatije i brže nego što su bile prije • Web aplikacije imaju različite prednosti,a osnovna je da lako dopru do više korisnika, lakše su za instaliranje i osiguravanje podrške, a također i lakše za razvijanje

AJAX koristi HTTP zahtjeve • U “klasičnom” programiranju, ako želite dobiti bilo kakvu informaciju iz baze podataka, trebate napraviti HTML formu i preko GET ili POST metode dobijete ili pošaljete podatke serveru • Pomoću AJAX-a JavaScript komunicira direktno sa serverom kroz JavaScriptXMLHttpRequest objekt.

XMLHttpRequest objekt Koristeći ovaj objekt, web programer može ažurirati stranicu s podacima sa servera nakon što se stranica učitala, što je opet jedan veliki plus. • Kad se radi s ovim objektom, treba voditi računa i o browseru, jer ga veliki broj browsera podržava.

Ajax nije ‘babaroga’ koje se treba bojati  • Za primjer, napravit ćemo malu web aplikaciju koja neće imati neki kompleksan zadatak, nego će biti mali primjer kako jednostavno serveru poslati nešto na obradu • Napravit ćemo HTML formu u kojoj ćemo imati jedno tekstualno polje, neko ime i skriptu koja će nam vratiti podatak o tome što smo to unijeli u tekstualno polje i, recimo, md5()-ovani oblik toga

Napravit ćemo HTML datotekukoji će za početak izgledati ovako: • <html> • <body> • <formname="moja_forma"> • Unesi svoje ime: • <inputtype="text" onKeyUp="ajaxFunction();" name="ime" /> • Prikaz nakon obrade AJAX-om: • <spanid="prikaz" /> • </form> • </body> • </html>

Primjetit ćete da se na “onKeyUp” događaj poziva JavaScript funkcija pod imenom “ajaxFunction()”, a ona izgleda ovako: • functionajaxFunction() • { • var xmlHttp; • try • { • // Firefox, Opera 8.0+, Safari i ostali "NORMALNI" browseri • xmlHttp=new XMLHttpRequest(); • } • catch (e) • { • // IE - (Imbecil Engine (Internet Explorer)) • try • { • xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); • } • catch (e) • { • try • { • xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

Primjetit ćete da se na “onKeyUp” događaj poziva JavaScript funkcija pod imenom “ajaxFunction()”, a ona izgleda ovako: • } • catch (e) • { • alert("Tvoj browser ne podrzava AJAX!"); • returnfalse; • } • } • } • xmlHttp.onreadystatechange=function() • { • if(xmlHttp.readyState==4) • { • document.getElementById("prikaz").innerHTML = xmlHttp.responseText; • } • } • var sta_kucamo = (document.moja_forma.ime.value); • var url="obrada.php?tekst="+sta_kucamo; • xmlHttp.open("GET",url,true); • xmlHttp.send(null); • }

Najprije moramo odrediti koji browser korisnik koristi i podržava li on AJAX i na osnovu toga kreiramo XMLHttpRequest objekt i nakon toga, ukoliko browser podržava Ajax, slijedi provjera tog objekta: • xmlHttp.onreadystatechange=function() • { • if(xmlHttp.readyState==4) • { • document.getElementById("prikaz").innerHTML = xmlHttp.responseText; • } • }

xmlHttp.onreadystatechange – čuva funkciju koja će procesuirati podatke dobivene od servera • xmlHttp.readyState==4 – stanje 4 predstavlja završetak obrade podataka poslanih preko Ajax-a • našem slučaju dodijelit ćemo našem HTML elementu čiji je id "prikaz" tekst koji će nam vratiti skripta koja obrađuje željene podatke.

Moguće vrijednosti readyStateXMLHttpRequest-a su: • 0 – zahtjev nije inicijaliziran • 1 – zahtjev je podešen • 2 – zahtjev je poslan • 3 – zahtjev se obrađuje • 4 – zahtjev je završen • U promjenjivoj šta_kucamo smještamo tekst koji je u textbox-u pod imenom “ime” i to šaljemo preko GET metode našoj skripti na serveru, u ovom slučaju pod imenom “obrada.php”

xmlHttp.open (“GET”,url,true) • Metoda OPEN ima tri argumenta: • -definiranje metode slanja podataka koju koristimo • -predstavljanje URL na serveru • -obaviti zahtjev asinkrono

xmlHttp.send(null) - Kako bi zahtjev za obradu konačno bio poslan serveru, moramo koristiti i send() metoduDakle, naša ajax.php stranica izgleda ovako: • <html> • <body> • <scripttype="text/javascript"> • functionajaxFunction() • { • var xmlHttp; • try • { • // Firefox, Opera 8.0+, Safari i ostali "NORMALNI" browseri • xmlHttp=new XMLHttpRequest(); • } • catch (e) • { • // IE - (Imbecil Engine (Internet Explorer)) • try • { • xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); • } • catch (e) • { • try • { • xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); • } • catch (e) • {

xmlHttp.send(null) - Kako bi zahtjev za obradu konačno bio poslan serveru, moramo koristiti i send() metoduDakle, naša ajax.php stranica izgleda ovako: • alert("Tvoj browser ne podrzava AJAX!"); • returnfalse; • } • } • } • xmlHttp.onreadystatechange=function() • { • if(xmlHttp.readyState==4) • { • document.getElementById("prikaz").innerHTML = xmlHttp.responseText; • } • } • var sta_kucamo = (document.moja_forma.ime.value); • var url="obradi.php?tekst="+sta_kucamo; • xmlHttp.open("GET",url,true); • xmlHttp.send(null); • } • </script> • <formname="moja_forma"> • Unesi svoje ime: • <inputtype="text" onKeyUp="ajaxFunction();" name="ime" /> • Prikaz nakon obrade AJAX-om: • <spanid="prikaz" /> • </form> • </body> • </html>

Na početku smo rekli kako će naša skripta na serveru obraditi podatke koje joj pošaljemo i vratiti nam ih, kako bismo vidjeli kako ona može izgledati: • <?php • echo "MD5-ovan oblik gore unesenog teksta je: '". md5($_GET["tekst"])."'"; • ?>

Ovu php skriptu ćemo sačuvat pod imenom “obradi.php” i postaviti u istom folderu gdje i već spomenutu skriptu “demo.php”, i to je to  • Hvala na pažnj! (:

AJAX – Asynchronous JavaScript And XML