DOM ja Ajax Jaana Holvikivi Metropolia J.Holvikivi Sisältö • • • • • • Client - server communication Javascriptin käyttö DOM XMLHTTP pyyntö Ajaxin toiminta Esimerkkitapauksia J.Holvikivi Sivujen haku HTTP:llä Käyttäjän työasema Selain: HTML, Skriptit, Plug-in HTTP request (pyyntö) Palvelin HTML pages HTTP: HTML sivut Internet Ohjelmapalvelin Tietokantapalvelin SQL Oracle J.Holvikivi CGI PHP ASP Java Javascript, käyttö • Javascript ladataan aina palvelimelta asiakkaalle – Erillisenä tiedostona – tai HTML-koodin sisällä • Javascript suoritetaan asiakkaan selaimessa – Palvelimen kuorma vähenee – Toiminta nopeaa, esim. lomakkeen syötteen tarkistukset (numeric fields, dates, required fields) • Javascript osaa käsitellä HTML sivun rakennetta (document); DOM J.Holvikivi Page requests: XMLHTTPRequest Ajax engine: •Create server Request •Send •Monitor status •Get response •Process returned data XMLHTTPRequest (asynchronous) Returned data Browser: Capture event/ Update page Server Application (PHP, Java, XSLT, ASP): •Request •readyState •response Database server User workstation SQL J.Holvikivi XML Ajax rakennusosat • • • • • • • Uudet selainohjelmat Javascript & libraries XMLHTTPRequest XHTML & CSS DOM XML Palvelinpuolen ohjelmat J.Holvikivi What do we get with Ajax? • Interactivity in Web user interface – Scrolling and zooming maps without Java applets – Interaction on forms (automatic completion, checking of input, getting assistance, hints, tips) – Update checking (mails) – Customization of pages on-the -fly • Imagination and creativity J.Holvikivi Ajaxin käyttäjät • http://www.google.com/webhp?complete=1 Google suggest • Amazon: a9.com sivun sisältö muutettavissa; igoogle; itunes • Yahoo!News • Gmail • Google Maps: tiles, dragging, zooming, push pins • Facebook, Youtube, jne. J.Holvikivi Javascript ja dokumentin rakenne J.Holvikivi HTML dokumentti <html> <head> <title>This is a test page</title> </head> <body id="runko"> <p>Alla on taulukko</p> <table> <tr> <td> solu </td> <td> cell </td> </tr> <tr> <td> <img src="kuva.gif"/> </td> <td> 1 </td> </tr> </table> </body> </html> J.Holvikivi Sivun puurakenne <html> <head> <title> ’This is a test page’ <body> id <p> <table> ’Alla on taulukko’ <tr> <td> data J.Holvikivi <tr> <td> <td> data data <td> Dokumenttipuu Document Root: html Element: Body Element: Head Element: title Element: table Text: "test page" Element: tr Element: p Text: "taulukko" Element: td Element: img J.Holvikivi Attribute: src Document Object Model (DOM) • Ohjelmointikielet osaavat käyttää sitä sivun osien käsittelyyn (php, java, c#, c++, Javascript…) • Selaimet tulkitsevat sivurakenteen (Firefox, IE, Safari) • XHTML -dokumentti rakentuu noodien muodostamaksi puuksi • Ohjelmat osaavat navigoida puurakenteessa ja etsiä sieltä informaatiota • Puurakenne vie paljon tilaa muistissa, eli suurten dokumenttien käsittely on tehotonta • DOM mahdollistaa noodien lisäykset, poistot, siirrot, ja sisällön muuttamisen J.Holvikivi DOM ja Javascript • document.form1.text1.value <form name="form1"> <input type="text" name="text1"> </form> • <a href="http://www.evtek.fi" onMouseOver = "window.status='Click here '; " > • parent.location = word1 + word2 + ".html" J.Holvikivi Dokumenttipuu: yleiset nimitykset Ancestor Parent / ancestor Node Attribute Sibling Child /descendant Descendant J.Holvikivi Namespace Ominaisuudet (properties) • • • • • • x.innerHTML - elementin sisältö (teksti) x.nodeName - nimi x.nodeValue - arvo x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attribute nodes of x J.Holvikivi Puun prosessointi • Aloitus juurisolmusta (root node; document-object) • Metodit, joilla navigoidaan, esim. – – – – – getElementByID(id) getElementsByName(nimi) getElementsByTagName(taginnimi) appendChild(node) - insert a child node to x removeChild(node) - remove a child node from x J.Holvikivi Yhteenveto: Ajax • • • • Javascript CSS XMLHttpRequest-object DOM • Ajax (Asynchronous Javascript + XML) tarkoittaa uusien, kätevien tekniikoiden käyttöä asiakaspuolella • XMLHttpRequest -object, kommunikoi palvelimen kanssa asynkronisesti ilman käyttäjän väliintuloa • Ajax sisältyy selaimen toimintoihin! – Ei tarvita erillisiä asennuksia (Java, tms.) J.Holvikivi A Client request with AJAX Server executes munsivu3.php And creates an HTML-reponse, That includes javascript Client request munsivu3.php Response contains HTML and Javascript To be displayed on the Browser window user web client Javascript code sends a web server Server request invisibly Server responds by sending the data Javascript code updates the Web page with data J.Holvikivi The server can call the data base each time before responding Ajax request • Client requests an event handler e.g. onclick=startaReq(); • XMLHttpRequest-object is created on client • Callback handler is registered • Start of request – httpReq.open(”GET”, stringA, true); • Sending request – httpReq.send(null); • Server executes the request and returns data to the client • Client takes either text or xml response – httpReq.responseText – httpReq.responseXML J.Holvikivi Selain rakentaa sivun ja ohjaa toimintaa HTML XMLHTTPRequest CSS JavaScript functions •Create Request •Send •Monitor status Server PHP script: •Request •readyState •response Returned data Browser: Capture event Browser: Update page Click button User workstation Get response •Process returned data JavaScript functions J.Holvikivi Case : Microsoft .NET • • • • Microsoft .NET julkistettiin vuoden 2001 lopulla, v.2008 .NET Framework 3.5 kehitysympäristö, painopiste internet-ratkaisuissa. .NET (dotnet) basic facts: – Visual Studio .NET • C++, C#, Visual Basic, CLR (Common Language Runtime) – osana XP, 2003 ja Vista käyttöjärjestelmiä – ADO data base interface toteuttaa XML:n – ASP.NET – DOM-tuki J.Holvikivi Office Open XML File Format J.Holvikivi
© Copyright 2026 Paperzz