JWT 2016 luento 10 ti 19.4.2016 klo 10-11 Aulikki Hyrskykari PinniB 1096 1
Viime luennolla o Funktioista JavaScriptissä Tänään o AJAX ja JSON o Harjoitustyön tehtävänanto o Vierailuluento "Avoin data Tampereen seudulla" tietohallintoasiantuntija Joonas Dukpa, Tampereen kaupunki 2
AJAX ja JSON o Ennen web-sovellusohjelmat (palvelimella) keskustelivat selaimen kanssa staattisten sivujen välityksellä HTTP GET CSS HTML HTTP POST Client Server Database 3
Asynkroninen toiminta o Ongelma sivunpäivityspyyntö palvelimelle tuo koko sivun sivulle tarvittava uusi tieto mahdollisesti vain pieni osa sivulla selain jähmettyy odottaessaan että uuden sivun tiedot saadaan muodostetuksi ja tuoduksi selaimeen odotanko lieden vieressä, että vesi kattilassa alkaa kiehua? EN. Haluan tehdä jotain muuta sen aikaa o Ratkaisu haluan olla asynkroninen! 4
AJAX (Asynchronous JavaScript and XML) o Ajax on joukko tekniikoita: HTML, DOM, JSON/XML, XMLHttpRequest mahdollistaa vuorovaikutteisemmat web-sovellukset selainohjelma noutaa pieniä tietomääriä palvelimelta vain sivun osaan lataamatta koko verkkosivua uudelleen asiakaskone selain (client) vastauksen odottelu ei lopeta sivun muuta toimintaa Palvelin (server) 5
Tiedon välittäminen AJAXia käyttäen o Lähetetään pyyntö tiedon noutamiseksi palvelimelta o Tiedon saavuttua puretaan (jäsennellään) tieto niin että sitä voidaan käyttää o Päivitetään niiden elementtien sisällöt käyttäen hyväksi tarvittavia osia saadusta tiedosta ja DOM-puuta o Siirrettävä tieto voi olla esimerkiksi vastaus käyttäjän tiedonhakupyyntöön esim. hae seuraavat juna-aikataulut ennakointi käyttäjän mahdollisesti tulevaan tiedonhakupyyntöön esim. Google maps ennakoi kartan vierityspyyntöön noutamalla seuraavat alueet jo valmiiksi etukäteen 6
Tiedonvälityksessä käytetyt formaati o Tieto voidaan saada HTML-koodina + helppo näyttää sivulla, ei tarvetta sen kummempaan lisäkäsittelyyn - HTML-koodi tulee tuottaa jo palvelimella valmiiksi - huono siirrettävyys: soveltuu vain selain-ympäristössä käytettäväksi - tieto välitettävä samalta palvelimelta XML + joustava formaatti, hyvä siirrettävyys - runsassanainen formaatti, saattaa vaatia paljon lisäkäsittelyä - tieto välitettävä samalta palvelimelta JSON + kompakti formaatti, tietoa voi hakea muiltakin palvelimilta (JSONP) + helppo muunnos JavaScript-olioksi - tarkka formaatti, puuttuva pilkku tai lainausmerkki rikkoo koko tiedon 7
JSON (JavaScript Object Notation) o Nykyisin paljon käytetty tiedonsiirtoformaatti (merkkijono) lähes sama formaatti jota käytimme aiemmin literaaliolioiden luomiseksi literaaliolio var kirja = {aihe: 'JavaScript', julkaistu: 2011}; sama JSON-muotoisena (huomaa lainausmerkkien käyttö!) var kirjaasjsstr = '{"aihe": "JavaScript", "tekija": 2011}'; // olio // merkkijono o JavaScriptissä valmiit metodit esitysmuotojen välisiin muuntoihin var olio = JSON.parse(mjono); // konvertoidaan JSON-merkkijonosta olio var olioasjsstr = JSON.stringify(olio); // konvertoidaan oliosta JSON-merkkijono 8
Datan noutaminen palvelimelta 1. Luodaan tiedon siirrosta huolehtiva olio olio XMLHttpRequest on selaimissa valmiiksi toteutettu olio var req = new XMLHttpRequest(); 2. Sidotaan oliolle pyyntöön vastaamista kuunteleva käsittelijäfunktio vastauksen käsittelijä sidotaan käyttäen olion onreadystatechange -metodia req.onreadystatechange = tiedonkasittelija; 3. Avataan yhteys palvelimelle ja lähetetään pyyntö req.open('get', 'polku-tietoon-palvelimella', true); // req.send(); GET määrittää siirtoyhteyden tyypin (toinen mahdollinen on POST) toinen parametri osoite johon pyyntö kohdistuu (tiedosto palvelimella boolean-arvo määrittää käsitelläänkö pyyntö asynkronisesti 9
Vastauksen käsittely o XMLHttpRequest-olion oliomuuttuja readystate kertoo missä vaiheessa tiedon hakun on, kun tiedon haku on suoritettu sen arvo == 4 req.readystate == 0 //uninitialised req.readystate == 1 //loading req.readystate == 2 //loaded req.readystate == 3 //interactive req.readystate == 4 //complete oliomuuttuja status kertoo, onnistuiko haku req.status ==200 liitetty onreadystatechange-kuuntelija tarkastaa 10
Koodi yhteen koottuna req = new XMLHttpRequest(); // jos tiedon siirto on tehty loppuun if (req.readystate == 4) { // jos tiedon siirto onnistui if (req.status == 200) { // tähän noudetut tiedot kasittelevä funktio tai sen kutsu } else { // käsitellään virhetilanne, virhekoodi oliomuuttujassa req.statustext } } req.open("get", "palvelimelta-noudettavan-tiedoston-url", true); req.send(); 11
Esimerkki: Juna-aikataulujen noutaminen palvelimelta o Halutaan hakea aikataulutietoja sivulle päivittämättä koko sivua muu sivu säilyy, noudetaan vain tiedot taulukkoon sivu voisi olla monimutkainen ja noudettu tieto esim. vain yksi junamatka jokin ohjelma tai tietokantakysely muodostaisi json-tiedon palvelimella tällä kurssilla ei palvelinpuolen ohjelmointia, joten json-tieto tallennettu tiedostoksi 12
o Funktio haeuusitieto(), jota kutsutaan, kun sivulla painettaan jotain painikkeista aamu, aamupäivä, iltapäivä, ilta function haeuusitieto(mika) { // haetaan pyydetyt tiedot - normaalisti tiedot tuottaisi jokin ohjelma, tietokantakysely, // tms. mutta nyt esimerkin vuoksi palvelimelle on tallennettu neljä json-tekstitiedostoa: // "data/aikataulu1.json", "data/aikataulu2.json", "data/aikataulu3.json", "data/aikataulu4.json" // ============================================================================================== var url = "data/aikataulu" + mika + ".json"; // luodaan XMLHttpRequest-olio req = new XMLHttpRequest(); // ja sidotaan siihen kasittelijaksi funktio, joka käsitteleen haetun tiedon req.onreadystatechange = function () { // jos tiedon siirto req-olioon suoritettu if (req.readystate == 4) { // jos tiedon siirto tapahtui onnistuneesti if (req.status == 200) { tuotiedottaulukkoon(); // noudettu tieto löytyy req-olion responsetext-oliomuuttujasta } else { kirjoitaviesti("tiedon noutaminen ei onnistu (error code: "+ req.statustext + ")"); } } } } req.open("get", url, true); // avataan yhteys palvelimelle ja lähetetään req.send(); // sinne yllä muodostettu HTTPRequest -olio 13
Esimerkki noudetusta json-tiedostosta o Esimerkki yhdestä (tässä tapauksessa sivulle valmiiksi tallennetusta) JSON-merkkijonosta "data/aikataulu1.json" { "aikataulu": { "paiva": "perjantai", "pvm": "22 hutikuuta 2016", "mista": { "paikka": "Tampere", "koodi": "TRE" }, "minne": { "paikka": "Helsinki", "koodi": "HKI" }, "juna": [ { "lahtee": "04:30", "saapuu": "6.47", "kesto": "2:17", "vaihtoja": "1" },... { "lahtee": "08.07", "saapuu": "09:52", "kesto": "1:45", "vaihtoja": "0" }, { "lahtee": "08.34", "saapuu": "10:47", "kesto": "2:13", "vaihtoja": "1" } ] } } 14
Muunnokset JSON-merkkijono JavaScript-olio o JSON-olio, jolla metodi: JSON.parse(mjono) muuttaa JSON-tekstin JavaScript-olioksi (muunnos toisin päin olisi JSON.stringify(olio)) function tuotiedottaulukkoon() { // req-olion responsetext-kentassa palvelimelta noudettu JSON-muotoinen merkkijono noudettutieto = JSON.parse(req.responseText); } // nyt JSON-muotoisena tekstinä saadusta tiedosta on muodostettu // JavaScript-olio noudettutieto, jota ohjelmassa voi käyttää kuten mitä tahansa oliota // oliosta löytyy esimerkiksi taulukko // aikataulu.juna, jossa jokaisessa taulukon alkiossa aikataulu.juna[i] on yhden junavuoruon aikataulut... toteutus on hiukan rautalankaversio kun olet selvittänyt itsellesi miten se toimii, voit katsoa, miten globaaleista muuttujista pääsee eroon (versio 2) 15
Harjoitustyö Menoksi! Käy katsomassa Tampereen kaupungin sivustoa vierailijoille: http://visittampere.fi/search?type=event 16
Oma yksinkertaistettu versio sivustosta o SPA (Single Page Application) informaatiosovellus Tampereen seudun tapahtumista Tampere music academy: student concert Conservatory students play music. Vinyl club Bar Huurupiilo hosts the vinyl club. Conservatory students play music The Paladins at Tampere Hall: The temperature will rise sky high at the Tampere Hall, when The Paladins start playing at Sorsapuistosali! Warm-ups by Swing Team and Mr Breathless. Honest rock n roll, dance and dedicated people. tehtävänanto http://www.sis.uta.fi/~jwt/16/ht/ht.pdf raporttipohja http://www.sis.uta.fi/~jwt/16/ht/jwt-raporttipohja.docx 17
VisitTampere tapahtumatietojen rajapinta o Swagger-liittymä dataan: www.visittampere.fi/api-docs/ Voit kokeilla millaisia tietoja erilaisilla parametreilla saadaan noudettua. Tätä dataa käyttävä, kaupungin toteuttama Visit Tampere -palvelu 18
Käytettäviä tekniikoita o Harjoitustyössä hyödynnetään (pakolliset) kaupungin tarjoamaa rajapintaa avoimeen VisitTampere -dataan Google Maps JavaScript API -rajapintaa jquery JavaScript-kirjastoa o Lisäksi harjoitustyössä hyödynnetään seuraavia tekniikoita (jos haluat nostaa harjoitustyön pisteitä läpipääsyn ylittäviin pisteisiin) Local Storage - selaiman paikallinen muistia, HTML5 rajapinta Bootstrap - websivujen toteutuskehys (front-end framework) Firebase NoSQL pilvitietokantaa 19