AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

Transkriptio

1 AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen periaatteen mukaisia webohjelmia Keskeisellä sijalla JavaScript-kieli ja sen XMLHttpRequest-metodi ja DOM-malli Muita mukana olevia tekniikoita CSS,XML, XHTML ja DHTML Nykyisten web-ohjelmien ongelmia Heikko interaktiivisuus, käytettävyys ja yksinkertaiset käyttöliittymät Sivujen siirtämiseen kuluu aikaa ja sisältää usein turhaa tiedonsiirtoa, sillä usein vain pieni osa sivusta muuttuu. Pieni muutos sivulla aiheuttaa turhaa viivettä, jos kaikki tiedot kulkevat aina palvelimen kautta Asynkronisuus Tähän asti kaikki esitellyt web-ohjelmat ovat olleet synkronisia. Kaikki tiedonsiirto tehdään kerralla asiakkaan ja palvelimen välillä Sivun tietojen muutokset vaativat koko sivun lähettämisen uudelleen Ajax-ohjelmassa voi tehdä sivua täydentäviä pyyntöjä eri palvelimilta käyttäen XMLHttpRequest-metodia Vain jotkin selaimet tukevat ja toteutuksissa eroja Vaikka metodin nimessä esiintyy XML, palvelimen vastaus voi olla jotakin muuta kuin XML-muotoista dataa

2 Ajax-sovelluksen sykli 1. HTTP-pyyntö 2. HTML vastaus PALVELIN SELAIN 3. JS käskyt 4. XMLHttpRequest AJAX 6. HTML,CSS metodit 5. Data Kaavion kulku 1. Esimmäinen pyyntö palvelimelle, käyttäjää pyytää sivua 2. Palvelin kokoaa sivun, johon sisältyy HTML-,CSS-koodit, sekä tarvittavat JavaScript- ja AJAX funktiot,(javascriptiä nekin) 3. Loput pyynnöt palvelimelle tehdään JavaScript koodin välityksellä käyttäen sivun latauksen yhteydessä tulleita AJAX-funktioita hyväksi. 4. AJAX osuus JavaScript koodista tekee XmlHttpRequest pyynnön palvelimella 5. Palvelin prosessoi pyynnön ja vastaa pyyntöön (usein XMLmuotoisella) dokumentilla. Vastaus sisältää vain sen datan, joka muuttaa sivun ulkoasua pyynnön mukaiseksi. Tyypillisesti vain murto-osa sivun kokonaisdatamäärästä. 6. AJAX osuus JavaScript-koodista prosessoi vastauksen ja päivittää sivua joidenkin elementtien osalta tai tekee jotain muuta ohjelmoitua toimintaa (HTML + CSS) Ongelmia ja haasteita AJAX-konsepti vaatii hyviä JavaScript-ohjelmointitaitoja Perinteisesti web-ohjelman kulkua on voitu ajateltu erillisinä sivuina ja esim ASP.NET-ratkaisussa datan tilaa on kuljetettu VIEWSTATE oliossa sivulta toiselle. Nyt ajattelu muuttuu totaalisesti ja web-ohjelmien kulku muistuttaa enemmän muita sovelluksia Back-nappi tai Bookmark-toiminto ei toimi kuten ennen. Myös web-käyttäjät joutuvat opettelemaan AJAX-sovellusten käyttöä Edut Tehokkaampi suoritus, koska ylimääräisestä datan siirrosta päästää eroon Erityisesti paljon dataa välittävissä sovelluksissa Pienemmät odotusajat pyyntöihin Käytettävyys paranee Datan siirto voidaan toteuttaa taustaajona, jolloin sivun muita toimintoja voidaan käyttää sillä aikaa Samalle sivulle voidaan tuottaa dataa eripalveluista

3 XMLHttpRequest Luonti Microsoft IE: try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); catch (e2) { xmlhttp = false; Versioriippumattomaksi koodin saa, kun testaa ensin Microsoft-tyylillä, jos se epäonnistuu jatkaa Firefox-tyylillä Firefox, mozilla: var xmlhttp = new XMLHttpRequest(); Ennen pyynnön suorittamista JavaScript koodilla kerätään pyyntöön tarvittava data käyttäjän syötteistä esimerkiksi getelementbyidmetodilla Pyynnön tekeminen 1. Kerää relevantti data käyttäjän syötteistä eli lomakkeelta. 2. Rakenna URL-data 3. Avaa yhteys palvelimelle 4. Aseta XMLHttpRequest-olioon palvelimen vastauksen käsittelevä JavaScript-funktio 5. Lähetä pyyntö function callserver() { // Puhelinnumeron haku nimen ja osoitteen perusteella // Tiedot lomakkeesta var name = document.getelementbyid( name").value; var address= document.getelementbyid( address").value; // Onko tiedot annettu, jos ei lopetetaan if ((name == null) (name == "")) return; if ((address == null) (address == "")) return; // Rakenna URL var url = "/scripts/annanumero.php?nimi=" + escape(name) + "&=osoite" + escape(address); // Avataan yhteys xmlhttp.open("get", url, true); // Asetetaan vastauksen käsittely funktioon updatenumber xmlhttp.onreadystatechange = updatenumber; // lähetetään pyyntö xmlhttp.send(null);

4 Vastauksen käsittely AJAX periaatteen mukaan kerrallaa välitettävä tietomäärä pidetään pienenä. Edellisen kalvon esimerkin vastaus sisältää vain puhelinnumeron Kun edellisellä sivulla luodun olion xmlhttp readystate-atribuutti muuttuu, updatenumber-metodi käynnistyy function updatenumber() { if (xmlhttp.readystate == 4) { var response = xmlhttp.responsetext; document.getelementbyid( phone").value = response; Tässä esimerkissä datan oletetaan olevan tavallista tekstidataa, ei XML-muotoista dataa readystate-atribuutin arvot 0: Pyyntö alustamaton (open kutsumatta) 1: Pyyntö alustettu, mutta send tekemättä. 2: Pyyntö lähetetty ja on palvelimen käsiteltävänä, Tässä vaiheessa voi mahdollisesti tarkistaa vastauksen Http-protokollan mukaisia otsikkotietoja. 3: Pyyntö käsittelyssä ja osittaista vastausdataa on saatavilla, mutta käsittely ei ole päättynyt 4: Pyynnön käsittely päättynyt vastaus valmis responsetext Vastaus tallentuu responsetext attribuuttiin responsetext voi olla mitä tahansa tekstimuotoista dataa, ei välttämättä XMLmuotoista Web 2.0 AJAX-konseptia pidetään uuden webteknologian, Web 2.0:n perustana Tulevaisuudessa yhä useampi websovellus tehdään AJAX-konseptin mukaisesti Esimerkiksi karttapalvelu Karttaa voidaan zoomata ja sinä voi liikkua, ilman, että koko web- sivu vaihtuu

5 Esimerkkejä