AJAX –

ASYNCHRONOUS JAVASCRIPT AND XML

Što je zapravo AJAX?

 AJAX je skraćenica od Asynchronous JavaScript And 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 JavaScript XMLHttpRequest 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 datoteku koji će za početak izgledati ovako:

  

 Unesi svoje ime:   Prikaz nakon obrade AJAX-om:    

           Primjetit ćete da se na “onKeyUp” događaj poziva JavaScript funkcija pod imenom “ajaxFunction()”, a ona izgleda ovako:  { function ajaxFunction() 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!"); } return false;  } } ) xmlHttp.onreadystatechange=function(       { if(xmlHttp.readyState==4) } } document.getElementById("prikaz").inn

erHTML = 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 readyState XMLHttpRequest-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() metodu Dakle, naša ajax.php stranica izgleda ovako:

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:    

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! (:

prezentacija_ajax

Transcript prezentacija_ajax