AJAX - Tutorijal Za Osnovno Koriscenje PDF

AJAX Asychronous JavaScript And XML
(...mali delic WEB 2.0 standarda)
Tutorijal za osnovno koriscenje AJAX-a - Vladica Savi

ta je zapravo AJAX?
AJAX je skraenica od Asynchronous JavaScript And XML.
Kratko reeno AJAX je zasnovan na JavaScript i HTTP zahtevima i njegova glavna osobina je da omogui da se na
nekom sajtu alje/prima sadraj bez ponovnog uitavanja stranice.
ta bi ve trebalo da znate pre nego ponete sa AJAX-om?
HTML / XHTML
JavaScript
Server-side scripting
AJAX nije novi jezik programiranja, ve tehnika za kreiranje boljih, brih i interaktivnijih web aplikacija. Sa AJAX-om,
va JavaScript moe da komunicira direktno sa serverom, koristei JavaScript XMLHttpRequest objekat. Pomou ovog
objekta, va JavaScript moe da razmenjuje podatke sa web serverom, bez ponovnog uitavanja stranice.
AJAX koristi asinhroni transfer podataka (HTTP zahtevi) izmeu pretraivaa i servera, omoguujui web aplikaciji da
obrauje samo one podatke koji su zaista potrebni umesto itavih stranica.
AJAX je zasnovan na sledeim web standardima:
JavaScript
XML
HTML
CSS
Web standardi koji se koriste u AJAX-u su dobro definisani i podrani od svih velikih web browsera.
AJAX prednosti
Web aplikacije imaju mnogo prednosti nad desktop aplikacijama, osnovna je da one lako mogu da dopru do vie
korisnika, lake su za instaliranje i obezbeivanje podrke, i lake za razvijanje.
Sa AJAX-om, internet aplikacije mogu da budu bogatije i bre za korienje nego to su bile do sada.
AJAX koristi HTTP zahteve
U "klasicnom" programiranju, ako elite da dobijete bilo kakvu informaciju iz baze podataka ili fajla nekog koji se
nalazi na serveru, ili poaljete serveru informacije o korisniku, vi trebate da napravite HTML formu i preko GET ili
POST metode dobijete ili poaljete podatke serveru. Sto bi znacilo da nakon sto se posalje/dobije informacija od
servera da se onda da uita opet cela strana kako bi rezultati bili vidljivi i samim tim poto server vraa novu stranicu
svaki put kada korisnik poalje neke podatke, tradicionalne web aplikacije znaju da budu spore.
Pomocu AJAX-a JavaScript komunicira direktno sa serverom, kroz JavaScript XMLHttpRequest objekat. Pomou HTTP
zahteva, web stranica alje zahtev serveru, i dobije odgovor od njega - bez ponovnog uitavanja web stranice, i
korisnik gotovo da i nee primetiti da je skript poslao zahtev za stranicom, ili da je u pozadini poslao podatke na
server.
XMLHttpRequest Objekat
Koristei XMLHttpRequest objekat, web programer moe da aurira stranicu sa podacima sa servera nakon to se
stranica uitala sto je opet jedan veliki plus!
Napomena
Kada radimo sa XMLHttpRequest-om trebamo voditi racuna i koji browser je u pitanju. Veliki broj browsera
podrzava XMLHttpRequest ( Internet Explorer (...sve verzije novije od 5.0 verzije), Firefox, Opera (sto bi ukratko
znacilo skoro svi)) ali je malo drugacije slanje XMLHttpRequest-a svakom od njih.
A sad, da ponemo neto konkretnije nakon to smo se upoznali teorijski sa AJAX-om...
Pokazau vam kako AJAX nije neka babaroga koje se treba plaiti, i da je zapravo relativno lako koristiti ga.
Napraviemo malu web aplikacijicu koja nee imati neki kompleksan zadatak, ve ce biti mali primer kako jednostavno
da poaljete serveru neto na obradu i da server vrati obraen podatak, i to bez ponovnog ucitavanja (osveavanja)
cele strane...
Napravicemo HTML formu u kojoj emo imati jedno tekstualno polje u koje emo unositi tekst, neko ime recimo i
skriptu koja ce nam vratiti podatak o tome sta smo uneli u to tekstualno polje, i md5()-ovan oblik toga recimo...vi
naravno moete staviti bilo ta drugo, ali ovde sam hteo da samo pokaem kako lako sve to implementirati.
Dakle, napraviemo HTML fajl koji e za pocetak 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>
Primetiete da se na "onKeyUp" dogaaj poziva JavaScript funkcija pod imenom "ajaxFunction()", 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");
}
catch (e)
{
alert("Tvoj browser ne podrzava AJAX!");
return false;
}
}
}
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);
}
ta moemo da primetimo u ovoj skripti? Pa, najpre odreujemo koji browser korisnik ima i da li njegov browser
podrava AJAX i na osnovu toga kreiramo XMLHttpRequest objekat, i da nakon to to uradimo, ukoliko browser
podrzava AJAX sledi provera stanja XMLHttpRequest objekta:
{
{
}
}
xmlHttp.onreadystatechange - uva funkciju koja e da procesuira podatke koje dobija od servera.

xmlHttp.readyState==4 - stanje 4 predstavlja stanje kada je zavrena obrada poslatih podataka preko ajax-a. U
naem sluaju dodeliemo naem HTML elementu iji je id "prikaz" tekst koji e nam vratiti skripta koja obrauje
eljene podatke.
Inae, mogue vrednosti readyState XMLHttpRequest-a su:

0 Zahtev nije inicijalizovan
1 Zahtev je podeen
2 Zahtev je poslat
3 Zahtev se obrauje
4 Zahtev je zavren
U promenjivoj sta_kucamo smetamo tekst koji je u tekstbox-u pod imenom "ime" i to prosleujemo preko GET
metode naoj skripti na serveru, u mom sluaju pod imenom "obradi.php" (u promenjivoj "url").
Da bi poslali zahtev na server mi koristimo open() i send() metode.
Metoda open() ima tri argumenta, prvi argument definie koji metod slanja podataka koristimo (GET ili POST), drugi
argument predstavlja URL skripte na serveru koja obrauje podatke koje aljemo, i trei argument kae da zahtev
bude obavljen asinhrono.
xmlHttp.send(null);
Da bi zahtev za obradu serveru konano bio poslat moramo da iskoristimo i send() metodu.
I znai naa demo.php strana izgleda ovako:

<html>
<body>
<script type="text/javascript">
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");
}
catch (e)
{
alert("Tvoj browser ne podrzava AJAX!");
return false;
}
}
}
{
{
}
}
var sta_kucamo = (document.moja_forma.ime.value);
var url="obradi.php?tekst="+sta_kucamo;
xmlHttp.send(null);
}
</script>
<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>
Na pocetku smo rekli da e naa skripta na serveru da obradi podatke koje joj poaljemo i vrati nam ih da vidimo kako
ona moe da izgleda:
<?php
echo "MD5-ovan oblik gore unetog teksta je: '". md5($_GET["tekst"])."'";
?>
Ovu php skriptu emo sauvati pod imenom "obradi.php" i postaviti u istom folderu gde i gore pomenutu skriptu
demo.php i to je to, kad zavrite ovako bi trebalo da izgleda:
http://vladicasavic.iz.rs/ajax/demo.php
Ukoliko imate neki komentar posalji mozete me kontaktirati na vladicasavic@yahoo.com ili http://vladicasavic.iz.rs
Pozdrav svima koji stignu do dna ove strane, Vladica Savi.

AJAX - Tutorijal Za Osnovno Koriscenje PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AJAX - Tutorijal Za Osnovno Koriscenje PDF

Uploaded by

Copyright:

Available Formats

AJAX Asychronous JavaScript And XML

(...mali delic WEB 2.0 standarda)

Tutorijal za osnovno koriscenje AJAX-a - Vladica Savi

ta bi ve trebalo da znate pre nego ponete sa AJAX-om?

AJAX je zasnovan na sledeim web standardima:

Dakle, napraviemo HTML fajl koji e za pocetak izgledati ovako:

xmlHttp.onreadystatechange - uva funkciju koja e da procesuira podatke koje dobija od servera.

Inae, mogue vrednosti readyState XMLHttpRequest-a su:

Da bi poslali zahtev na server mi koristimo open() i send() metode.

I znai naa demo.php strana izgleda ovako:

You might also like