Predavanje AJAX, jQuery Datoteka

31 Pages·2009·2.57 MB·Croatian

15.12.2009
AJAX, jQuery
Što ćete naučiti
 Internet općenito  AJAX
 HTML  jQuery
 CSS  PHP
 ASP.NET
 XML
 Ruby On Rails
 XHTML
 MS Silverlight
 Javascript
 FLASH, SMIL, SVG
 DOM
 ...
 DHTML
2
1
15.12.2009
AJAX
 Asynchronous JavaScript and XML
 Zasnovan na JavaScript i HTTPzahtjevima
 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
2
15.12.2009
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
3
15.12.2009
AJAX komponente
XHTML 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 tekst
Ajax može koristiti bilo koju od ovih tehnologija da bi osigurao strukturu podataka koju prima
ili šalje server
XMLHttpRequest objekt
Javascript 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
4
15.12.2009
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
5
15.12.2009
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
6
15.12.2009
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
7
15.12.2009
15
Primjer – Google Calendar
16
8
15.12.2009
AJAX
 A = Asynchronous
 Nema čekanja
 Nastavak interakcije sa stranicom
 Samo dio stranice se osvježava
17
Pokretanje HTTP zahtjeva
1. Kreiranje i konfiguracija
XMLHttpRequest objekta
2. Pokretanje zahtjeva
3. Obrada odgovora
18
9
15.12.2009
Kreiranje XMLHttpRequest objekta
 Mozilla:
var request = new XMLHttpRequest();
 IE:
var request = new
ActiveXObject("Microsoft.XMLHTTP");
19
Konfiguracija XMLHttpRequest objekta
request.open("method","URL",false)
• Method je GET, POST, itd.
• URL postoje sigurnosna ograničenja
• false hoće li se zahtjev izvršiti asinkrono
request.setRequestHeader("header","value")
20
10