15.12.2009
1
AJAX, jQuery
Što ćete naučiti Internet općenito
HTML
CSS
XML
XHTML
Javascript
DOM
DHTML
AJAX
jQuery
PHP
ASP.NET
Ruby On Rails
MS Silverlight
FLASH, SMIL, SVG
...
2
15.12.2009
2
AJAX Asynchronous JavaScript and XML
Zasnovan na JavaScript i HTTP zahtjevima
Nije “nova” tehnologija, već nova tehnika korištenja
AJAX - JavaScript komunicira direktno sa serverom
XMLHttpRequest objekt
Izbjegnut “reload (osvježavanje)” stranice
3
AJAX Bazirano na sljedećim web standardima:
JavaScript
XML
HTML
CSS
AJAX aplikacije su neovisne o pregledniku i o platformi
4
15.12.2009
3
AJAX XHTML, HTML, CSS
Sadržaj i stiliziranje
DOM
Klijentsko skriptiranje pristupa DOM-u, poput Javascripta, te se dinamički može mijenjati sadržaj na strani klijenta
Omogućena interaktivnost
5
AJAX XMLHttpRequest
Objekt koji služi za asinkronu razmjenu podataka sa Web serverom
XML
Služi kao format podataka koji se dobije od Web servera kao povratna informacija (iako može biti bilo koji format)
6
15.12.2009
4
AJAX komponenteXHTML i CSS
Ajax primjenjuje ove Web standarde za stiliziranje i izgled stranice, ali također se koristi i za definiranje elemenata koji će se koristiti kod povratne informacije sa servera i zapisivanja rješenja
DOM (document object model)Ajax koristi DOM za manipuliranje (dohvat i mijenjanje) određenih podataka unutar Web stranice.
XML, JSON (Javascript Object Notation), HTML, ili običan tekstAjax može koristiti bilo koju od ovih tehnologija da bi osigurao strukturu podataka koju prima ili šalje server
XMLHttpRequest objektJavascript objekt ugrađen u većinu modernih preglednika. Služi za zahtjev/odgovor između klijenta i servera
Javascript“Lightweight” programski jezik koji se koristi za povezivanje svih predhodno opisanih komponenti zajedno.
7
Klasični pristup Većina korisničkih interakcija
rezultira HTTP zahtjevom prema serveru
Server obradi podatke i vrati HTML stranicu klijentu
8
15.12.2009
5
AJAX pristup Preglednik učita “AJAX engine”
On omogućuje da se komunikacija sa serverom vrši asinkrono
Korisnik nema potrebe gledati u “prazan ekran”
9
Klasični pristup
10
15.12.2009
6
AJAX pristup
11
AJAX pristup Korisničke akcije koje bi u generirale HTTP request
pretvaraju se u Javascript pozive koje pozivaju AJAX engine
AJAX engine upravlja svim odgovorima sa servera
12
15.12.2009
7
Potencijalni problemi Javascript mora biti omogućen
“Back button” ne radi uvijek
Stranice nekad teško spremiti u “Bookmarks”
13
Primjena AJAX-a Provjera grešaka u formama Auto sugestije Drag&Drop funkcionalnosti Dinamičko pokretanje slike ili geokarte Učitavanje sadržaja koji će se prikazati tek
naknadno
14
15.12.2009
9
AJAX A = Asynchronous
Nema čekanja
Nastavak interakcije sa stranicom
Samo dio stranice se osvježava
17
18
Pokretanje HTTP zahtjeva
1. Kreiranje i konfiguracija
XMLHttpRequest objekta
2. Pokretanje zahtjeva
3. Obrada odgovora
15.12.2009
10
Kreiranje XMLHttpRequest objekta
Mozilla:
IE:
var request = new XMLHttpRequest();
var request = new
ActiveXObject("Microsoft.XMLHTTP");
19
Konfiguracija XMLHttpRequest objekta
request.open("method","URL",false)
request.setRequestHeader("header","value")
• Method je GET, POST, itd.
• URL postoje sigurnosna ograničenja
• false hoće li se zahtjev izvršiti asinkrono
20
15.12.2009
11
Pokretanje zahtjeva
request.send(content)
• content je poslan u POST zahtjevu
• content može biti prazan ili "null”
21
Obrada odgovora
request.responseText
• Odgovor kao običan tekst
request.responseXML
• Odgovor je DOM objekt
request.status request.statusText
request.getAllResponseHeaders()
request.getResponseHeader("header")22
15.12.2009
12
Primjer
23
XMLHttpRequest onreadystatechange
xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){// Neki kod}
}
0 – Zahtjev nije inicijaliziran
1 – Zahtjev je postavljen
2 – Zahtjev je poslan
3 – Zahtjev se obrađuje
4 – Zahtjev je izvršen24
15.12.2009
13
onreadystatechangexmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){document.myForm.time.value=xmlhttp.responseText;
}}
25
26
15.12.2009
15
AJAX – auto sugestija Ako u input polju ima nešto zapisano:
Definira URL (filename) koji će se poslati serveru
Dodaje parametar (q) tom URL-u sa sadržajem input polja
Dodaje random broj da bi se spriječio caching
Kreira XMLHTTP objekt te se pokreće funkcija stateChanged kad se dogodi promjena
Otvara XMLHTTP objekt sa danim URL-om
Šalje HTTP zahtjev na server
29
AJAX – auto sugestija
30
Serverski dio pogledati na:
http://www.w3schools.com/ajax/ajax_source.asp
15.12.2009
16
jQuery jQuery je JavaScript biblioteka
jQuery pojednostavljuje programiranje u Javascriptu
jQuery jednostavan za naučiti
31
jQuery HTML - odabir elemenata
HTML - događaji i funkcije
HTML - manipulacija elementima
CSS - manipulacija
JavaScript - efekti i animacije
HTML DOM - šetnja stablom i modifikacije
AJAX
32
15.12.2009
17
jQuery – učitavanje biblioteke Sve u jednoj datoteci
jquery.js
<head><script type="text/javascript" src="jquery.js"></script></head>
http://docs.jquery.com/Downloading_jQuery
33
jQuery – učitavanje biblioteke Alternativni načini učitavanja:
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script></head>
<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script></head>
34
15.12.2009
18
jQuery sintaksa jQuery sintaksa je izrađena za:
Pronalazak HTML elemenata
Izvršavanje akcija nad tim elementima
$(query).action() $ -> označava da je riječ o jQuery
(query) za pronalazak HTML elemenata
jQuery action() koji se izvrše nad elementima
35
Primjeri sintakse
$(this).hide() – sakriva trenutni element
$("p").hide() – sakriva sve paragrafe
$("p.test").hide() – sakriva paragrafe klase "test"
$("#test").hide() – sakriva element sa id="test“
CSS selektor?
36
15.12.2009
19
jQuery selektor jQuery Element Selektori
jQuery Atribut Selektori
jQuery CSS Selectori
37
jQuery Element Selektori CSS stil dohvaćanja elemenata:
$(“h1") dohvaća sve <h1> elemente
$(“h1.x") dohvaća sve <h1> elemente klase “x".
$(“h1#y") dohvaća <h1> element sa id=“y".
38
15.12.2009
20
jQuery Atribut Selektori XPath stil dohvaćanja elemenata sa atributima
$("[href]") dohvaća sve elemente sa href atributom
$("[href='#']") dohvaća sve elemente sa href vrijednosti "#"
$("[href!='#']") dohvaća sve elemente sa
href atributom vrijednosti <> "#"
$("[href$='.jpg']") dohvaća sve elemente sa href atributom koji sadrži ".jpg".
39
jQuery CSS Selectori jQuery CSS selektori se mogu koristiti da se promijeni
CSS svojstvo HTML elemenata
$(“h1.x").css("background-color",“blue")
40
15.12.2009
21
Dodatni primjeri $("ul li:first")
Prvi <li> element svakog <ul>
$("div#intro .head")
Svi elementi klase "head"unutar <div> elementa čiji je id="intro"
41
Events i jQuery Događaji (events) su dobro podržani u jQuery-u
Ponoviti što su događaji (events)!
$("button").click(function() {..neki kod... } )
42
15.12.2009
22
jQuery Vlastite jQuery skripte u eksternoj datoteci: <head>
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery.js"></script></head>
Sukob kod imenovanja
(npr. jQuery i Prototype istovremeno) $ kao “shortcut” koriste i neke druge biblioteke
noConflict()
var $jq=Jquery.noConflict()
43
jQuery Events
44
15.12.2009
23
jQuery Events
45
Efekti u jQuery Hide and Show
Toggle
Slide Functions - slideDown, slideUp, slideToggle
Fade Functions - fadeIn(), fadeOut(), fadeTo()
Vlastite animacije
46
15.12.2009
24
Hide i Show$("#hide").click(function(){
$("p").hide()
})
$("#show").click(function(){
$("p").show()
})
Sintaksa:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
Callback – nakon izvršenja može se pozvati nova funkcija
47
Hide i Show
48
15.12.2009
25
Toggle$(selector).toggle(speed,callback)
$("button").click(function(){
$("p").toggle()
})
49
Toggle
50
15.12.2009
26
slideDown, slideUp, slideToggle (selector).slideDown(speed,callback)
(selector).slideUp(speed,callback)
(selector).slideToggle(speed,callback)
51
slideDown, slideUp, slideToggle
52
15.12.2009
27
fadeIn(), fadeOut(), fadeTo() (selector).fadeIn(speed,callback)
(selector).fadeOut(speed,callback)
(selector).fadeTo(speed,opacity,callback)
53
fadeIn(), fadeOut(), fadeTo()
54
15.12.2009
28
Vlastite animacije<script type="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow")$("#box").animate({width:300},"slow")$("#box").animate({height:100},"slow")$("#box").animate({width:100},"slow")});});</script>
55
56
15.12.2009
29
HTML i jQuery Mijenjanje HTML sadržaja
(selector).html(content)
Dodavanje HTML sadržaja
(selector).append(content)
(selector).prepend(content)
(selector).after(content)
(selector).before(content)
57
CSS i jQuery (selector).css(name,value)
$("p").css("background-color","yellow")
(selector).css({properties})
$("p").css({"background-color":"yellow","font-size":"200%"})
(selector).css(name)
$(this).css("background-color")
58
15.12.2009
30
CSS i jQuery (selector).height(value)
$("#id100").height("200px")
(selector).width(value)
$("#id200").width("300px")
59
jQuery
<ul>
<li style=“background:red;”>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li style=“background:red;”>
<span>Changed</span>
Third item
</li>
</ul>
<ul>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ul>
<ul>
<li>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li>
<span>Changed</span>
Third item
</li>
</ul>
$(“li:odd”).prepend(„<span>Changed</span>‟).css({background:“red”});
60