6. pripremno predavanje - fer.hr · 17 Otvoreno računarstvo - 6. pripremno predavanje Demistificirani XMLHttpRequest poveži objekt s URL-om i odaberi metodu zahtjeva imenuj funkciju

6. pripremno predavanjeo JavaScripto XMLHttpRequest

Otvoreno računarstvo - 6. pripremno predavanje2

6. laboratorijska vježbao Zadnja vježba

o Završno "dotjerivanje" Web aplikacije o Naglasak na:

o klijentskim tehnologijama (JavaScript)o dohvaćanju informacija s poslužitelja

bez osvježavanja stranice (XMLHttpRequest)

o Potrebne (manje) promjene ostalih datotekao promjena HTML-a i CSS-ao izrada manje PHP skripte


Cilj vježbeo Dopuniti Web aplikaciju promjenjivim elementima

na strani klijenta (DHTML, JavaScript)o iskočni okviri s dodatnim informacijama (tooltips)

o Omogućiti dohvat dodatnih podataka komunikacijom klijent-poslužitelj bez osvježavanja stranice (XMLHttpRequest)

o U Web aplikaciju uključiti vanjske, javno dostupne biblioteke određene namjene (JavaScript)


Proučiti:o Osnove osnova jezika JavaScript

o uključivanje JavaScripta u HTMLo rad s varijablamao pozivi funkcija

o Koncept DHTML-ao model DOMo rukovanje događajima (event handling)o promjena stilova

o Objekt XMLHttpRequesto slanje zahtjeva s parametrimao obrada - prosljeđivanje odgovora


Zadatak (1. dio) - tooltipo Prelaskom strelice miša preko pojedinog retka

prikazati tooltip s dodatnim informacijamao promjena HTML/JavaScript kôda kojeg generira

pretraga.phpo informacije se nalaze u JavaScript kôdu, nema ponovne

komunikacije s poslužiteljem!o registracija event handlera za događaj onmouseover

<tr onmouseover="tooltip('[email protected]')"> <td> Osoba A </td>

</tr>


Zadatak (1. dio) - vanjske biblioteke o Tri predložene biblioteke tooltipa

o možete koristiti i druge (ili ih ostvariti sami )o Uvijek postoji kratki uvod u korištenje bibliotekeo Osnovna ideja:

o preuzeti .js datoteke i uključiti ih u svoj kôdo pri aktivaciji događaja (onmouseover) pozvati

funkciju za prikaz o funkciji predati tekst i argumente prilagodbe

o Tekst se obično predaje kao HTML o (dozvoljena sva formatiranja, definiranje klasa za CSS...)o predaja teksta funkciji izravno preko argumenta ILIo izrada neke strukture (polje?) dostupne iz funkcije


Zadatak (2. dio) - detaljne informacijeo Tablica rezultata pretraživanja ima novi stupac

"Akcija", s tekstom ("Više o..."), slikom ili gumbom u svakom retkuo klikom na pojedini aktivni element (događaj onclick)

priprema se komunikacija s poslužiteljemo Objekt XMLHttpRequest

o nema osvježavanja straniceo novoj skripti na poslužitelju (detalji.php) treba poslati

parametar (id) pojedinog osnovnog elementao skripta detalji.php vrlo slična skripti pretraga.php

o HTTP zahtjev, metoda GET


Zadatak (2. dio) - obrada odgovorao Skripta detalji.php pomoću XPatha ili DOM-a

pretražuje XML po id-u, te vraća dodatne informacije o osnovnom elementu određenog id-a

o Izlaz skripte je "mali" HTML kôdo spreman za "ubacivanje" na stranicuo sadrži sve potrebne oznake, poput <table>, <div>,

definicije klasa za CSS i sličnoo Na strani klijenta, po primitku odgovora, JavaScript

prenosi dobiveni kôd u okvir za dodatne informacijeo Obavještavanje korisnika o čekanju odgovora


Promjene u postojećim datotekamao pretraga.php

o smanjiti tablicu (treba imati 3 - 5 stupaca)o dodati stupac Akcijao dodati JavaScript kôd za prikaz tooltipa za svaki redako ispod navigacije dodati okvir za dodatne podatke

(<div>)o CSS stilovi

o prilagoditi izgled i strukturu

(NOVI)

Okvir za

dodatne podatke

Brzi uvod u:o JavaScripto XMLHttpRequest


Uključivanje JavaScriptao U <head> ili <body> dijelu

o razlike u trenutku učitavanja i "garanciji" učitavanja prije nekog događaja

o Inlineo Vanjska JavaScript datoteka

<head><script type="text/javascript" src="mojJS.js"></script>

</head>


Sintaksa JavaScriptao Slična C-u/Javi/PHP-u...

o if, for, pridruživanja... o new (instanciranje objekata)

o Spajanje stringova (+)datum = godina + '-' + mjesec + '-' + dan;

o Varijableo globalne i lokalneo tip nije određen pri deklaraciji, ovisan o vrijednosti

varijable, promjenjivvar id = 5;

o Funkcije function ispisi (mojTekst) { alert(mojTekst); return true;

}


Događaji (events)o Događaji se odnose na elemente HTML-a

(odlomke teksta, linkove, gumbe, obrasce...)o Događaje okidaju:

o miš (onclick, onmouseover, ondblclick...)o tipkovnica (onkeypress, onkeyup...)o HTML objekti i obrasci (onload, onresize, onsubmit...)

o Povezivanje događaja na nekom elementu s naredbama/funkcijama koje treba izvršiti<a href="link.html" onclick="promijeni()">


DOM: važna svojstva i metodeo Pristupanje elementima (W3C)

o jednom elementu s definiranim atributom iddocument.getElementById()

o svim elementima s definiranim atributom namedocument.getElementsByName()

o svim elementima iste oznakedocument.getElementsByTagName()

nav = document.getElementById("navigacija");

o Dobro je provjeriti je li element pronađeno ne želimo raditi s null vrijednostima i dobivati JS

pogreške


DHTML: važna svojstva i metodeo Dinamička promjena svojstava elemenata

o promjena sadržaja elementadocument.getElementById('naslov').innerHTML = 'Novi naslov';

o promjena izgledadocument.getElementById('naslov').style.color = 'red';

o promjena vidljivostidocument.getElementById('naslov').style.visibility = 'hidden';

document.getElementById('naslov').style.display = 'none';

o promjena naziva gumbadocument.getElementById('gumb').value = 'Novi';


XMLHttpRequest (AJAX)1. Instanciranje objekta2. Povezivanje s URL-om

o odabir metode HTTP zahtjeva3. Slanje zahtjeva4. Čekanje odgovora poslužitelja (asinkrono!)

o "život" stranice za vrijeme čekanja normalno nastavljen5. Ako je odgovor OK, poziv funkcije

za parsiranje odgovora6. (najčešće) Prikaz rezultata unutar Web stranice


Demistificirani XMLHttpRequest

poveži objekt s URL-om i odaberi metodu zahtjeva

imenuj funkciju koja će se izvršiti po promjeni stanja

zahtjeva

pošalji zahtjev (u metodi POST, ovdje se dodaju

parametri)

if (window.XMLHttpRequest) {var xmlHttp = new XMLHttpRequest();

} else {

var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”):}xmlHttp.open(“GET”, “http://www.primjer.hr”);xmlHttp.onreadystatechange = promijeniStranicu;xmlHttp.send(null);

provjeri tip Web preglednika, instanciraj objekt


funkcija koja se izvršava pri

promjeni stanja zahtjeva

provjeri je li dovršeno primanje odgovora

provjeri je li odgovor OK

Demistificirani XMLHttpRequest

function promijeniStranicu() {if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {var odgovor = xmlHttp.responseText;alert (“Dobio sam ” + odgovor);

} else {

alert ("Nešto loše se dogodilo"); }}

}

XML zbog DOM parsiranja treba primiti

s .responseXML


Slanje parametara, primanje podatakao Za metodu GET, parametri se šalju unutar URL-a

o npr. http://www.fer.hr/detalji.php?id=523&show=simple)

o Za metodu POST, parametri se pišu jednako kao i za GET, no šalju se prilikom poziva funkcije send o npr. req.send("id=523&show=simple");

o Primanje podatakao req.responseText -> obično ga se "preseli" u neki <div>o req.responseXML -> obično ga se transformira DOM-om


Upucavanje nevolja (troubleshooting)o Čudne sintaksne pogreške vezane za stringove

o pomiješali ste jednostruke (') i dvostruke navodnike (")o pazite na navodnike unutar navodnika

o <tr onmouseover="alert('Čiča "Gliša"');">o escape znakovi (\", \')o stavljanje teksta u varijablu (jedna razina navodnika manje) o promjena HTML navodnika u jednostruke

o Prelazak u "novi redak" ne radi. Čak ni \n ne radi.o HTML kôd -> <br /> ili </div>

o XMLHttpRequest mi ne vraća ništa ili nešto krivoo probajte u preglednik upisati izravni URL

(......detalji.php?id=24), zbog lakšeg debugiranja


Pomoćni alatio Vrlo, vrlo korisni

o JavaScript debuggerio Programi za praćenje prometa protokola HTTP

o Chrome, IE8/9, Safari:o Ugrađeni alati (Developer tools)

o Firefox:o DOM Inspectoro Error Consoleo Firebug

Otvoreno računarstvo - 6. pripremno predavanje

Pitanja?

o Probleme i pitanja možete i naknadno postaviti u forumu na stranicama predmeta

Documents

6. pripremno predavanje - fer.hr · 17 Otvoreno računarstvo - 6. pripremno predavanje Demistificirani XMLHttpRequest poveži objekt s URL-om i odaberi metodu zahtjeva imenuj funkciju