J.Holvikivi DOM ja Ajax Jaana Holvikivi Metropolia.

Esitys aiheesta: "J.Holvikivi DOM ja Ajax Jaana Holvikivi Metropolia."— Esityksen transkriptio:

1 J.Holvikivi DOM ja Ajax Jaana Holvikivi Metropolia

2 J.Holvikivi Sisältö Client - server communication Javascriptin käyttö DOM XMLHTTP pyyntö Ajaxin toiminta Esimerkkitapauksia

3 J.Holvikivi Sivujen haku HTTP:llä Internet Käyttäjän työasema Selain: HTML, Skriptit, Plug-in Tietokanta- palvelin HTTP request (pyyntö) Palvelin HTML pages Ohjelmapalvelin CGI HTTP: HTML sivut PHP JavaASP SQL Oracle

4 J.Holvikivi 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

5 J.Holvikivi Page requests: XMLHTTPRequest User workstation Browser: Capture event/ Update page Database server XMLHTTPRequest (asynchronous) Server Application (PHP, Java, XSLT, ASP): Request readyState response SQL XML Ajax engine: Create server Request Send Monitor status Get response Process returned data Returned data

6 J.Holvikivi Ajax rakennusosat Uudet selainohjelmat Javascript & libraries XMLHTTPRequest XHTML & CSS DOM XML Palvelinpuolen ohjelmat

7 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

8 J.Holvikivi Ajaxin käyttäjät http://www.google.com/webhp?complete=1 Google suggesthttp://www.google.com/webhp?complete=1 Amazon: a9.com sivun sisältö muutettavissa; igoogle; itunes Yahoo!News Gmail Google Maps: tiles, dragging, zooming, push pins Facebook, Youtube, jne.

9 J.Holvikivi Javascript ja dokumentin rakenne

10 J.Holvikivi HTML dokumentti This is a test page Alla on taulukko solu cell 1

11 J.Holvikivi Sivun puurakenne id ’This is a test page’ ’Alla on taulukko’ data datadata

12 J.Holvikivi Dokumenttipuu Document Root: html Element: Head Element: Body Element: tr Element: title Element: td Element: pElement: table Text: "test page" Text: "taulukko" Element: img Attribute: src

13 J.Holvikivi 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

14 J.Holvikivi DOM ja Javascript document.form1.text1.value parent.location = word1 + word2 + ".html"

15 J.Holvikivi Dokumenttipuu: yleiset nimitykset Ancestor Parent / ancestor SiblingNode Child /descendantAttribute Descendant Namespace

16 J.Holvikivi 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

17 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

18 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.)

19 J.Holvikivi A Client request with AJAX user web client web server Client request munsivu3.php Server executes munsivu3.php And creates an HTML-reponse, That includes javascript Response contains HTML and Javascript To be displayed on the Browser window Javascript code sends a Server request invisibly Server responds by sending the data Javascript code updates the Web page with data The server can call the data base each time before responding

20 J.Holvikivi 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

21 J.Holvikivi User workstation Browser: Capture event XMLHTTPRequestServer PHP script: Request readyState response Create Request Send Monitor status Returned data Browser: Update page Get response Process returned data Click button HTML CSS JavaScript functions JavaScript functions Selain rakentaa sivun ja ohjaa toimintaa

22 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

23 J.Holvikivi Office Open XML File Format