Što ćete naučiti - FESB eLearning...15.12.2009 15 AJAX –auto sugestija Ako u input polju ima...

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

8

15

Primjer – Google Calendar

16

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

14

AJAX – auto sugestija

27


28

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


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;”>


Third item

</li>

</ul>

<ul>

<li>

First item

</li>

<li>

Second item

</li>

<li>

Third item

</li>

</ul>

<ul>

<li>


First item

</li>

<li>

Second item

</li>

<li>


Third item

</li>

</ul>

$(“li:odd”).prepend(„<span>Changed</span>‟).css({background:“red”});

60

15.12.2009

31

jQuery & AJAX

jQuery poziva higher level

.loadAJAX funkciju

61

Š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

...

62

Što ćete naučiti - FESB eLearning...15.12.2009 15 AJAX –auto sugestija Ako u input polju ima...

Documents

Transcript of Što ćete naučiti - FESB eLearning...15.12.2009 15 AJAX –auto sugestija Ako u input polju ima...