prezentacija_ajax

Report
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:










<html>
<body>
<form name="moja_forma">
Unesi svoje ime:
<input type="text" onKeyUp="ajaxFunction();"
name="ime" />
Prikaz nakon obrade AJAX-om:
<span id="prikaz" />
</form>
</body>
</html>
Primjetit ćete da se na “onKeyUp” događaj
poziva JavaScript funkcija pod imenom
“ajaxFunction()”, a ona izgleda ovako:

function ajaxFunction()

{

{


var xmlHttp;
xmlHttp=new
ActiveXObject("Msxml2.XMLHTTP");

try

}

{

catch (e)

// Firefox, Opera 8.0+, Safari i ostali
"NORMALNI" browseri

{

try

xmlHttp=new XMLHttpRequest();

{

}


catch (e)
xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");

{

// IE - (Imbecil Engine (Internet
Explorer))

try
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;

}

}

}

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.onreadystatechange=function(

)

{

if(xmlHttp.readyState==4)

{
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:

<html>

<body>

try

<script type="text/javascript">

{

function ajaxFunction()


{
xmlHttp=new
ActiveXObject("Msxml2.XMLHTTP");

var xmlHttp;

}

try

catch (e)

{

{

// Firefox, Opera 8.0+, Safari i ostali
"NORMALNI" browseri

try

{

xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// IE - (Imbecil Engine (Internet
Explorer))
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:

alert("Tvoj browser ne podrzava
AJAX!");

var
url="obradi.php?tekst="+sta_kucamo;

return false;

xmlHttp.open("GET",url,true);

}

xmlHttp.send(null);

}

}

}

</script>


xmlHttp.onreadystatechange=function( 
)

{


if(xmlHttp.readyState==4)

{

document.getElementById("prikaz").inn 
erHTML = xmlHttp.responseText;

<form name="moja_forma">
Unesi svoje ime:
<input type="text"
onKeyUp="ajaxFunction();" name="ime"
/>
Prikaz nakon obrade AJAX-om:
<span id="prikaz" />

}

</form>

}

</body>

var sta_kucamo =
(document.moja_forma.ime.value);

</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! (:

similar documents