A JAX i praksis By Geir Otto Olsen THInc Consulting AS

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

HTML, Javascript, CSS og DOM HTMLHTML Hypertext Markup Language, hvor hypertext refererer til hyperlinks, hvor hyper viser til at det ikke er linært, dvs. du kan gå hvorsomhelst, ingen gitt rekkefølge. C ascading S tyle S heets C ascading S tyle S heets brukes for å kontrollere hvordan htmlsidene blir presentert, og gir en bedre lesbarhet. J ava S cript J ava S cript gjør det mulig å legge på grunnlegende funksjonalitet som hendelsesstyring, animasjon osv. DOMDOM Document Object Model, som er en platform- og språk- uavhengig standard for beskriving av HTML og XML dokumenter, samt et API for spørring, traversering og manipulering av disse dokumenter.

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

Webserver Et program som aksepterer HTTP forespørsler fra web browsere (klienter), og gir HTTP svar tilbake med valgfritt datainnhold, som ofte består av web sider som HTML dokumenter og linket bilder m.m. Vendor ProductWeb Sites HostedPercent Apache 96,531, % Microsoft IIS61,023, % Google GWS9,864, % nginx 3,462, % lighttpd 2,989, % Oversee 1,847, % Others -9,756, % Total -185,474, %

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

Webspeed WebSpeed®, sammen med andre Progress® produkter, gir utviklere mulighet til raskt å lage skalerbare forretningsapplikasjoner som kan prosessere store volum av transaksjoner over internett.

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

Kommunikasjon På grunn av den økende mengden av data som beveger seg via internett, samt begrensning i visse medier når det gjelder båndbredde, vil det være nødvendig å begrense mengden av data en sender via de webapplikasjoner en benytter for at brukerne skal få en god opplevelse ved bruk – Geir Otto Olsen 

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk Hovedtema

AJAX AJAX Asynchronous Javascript and Xml, er en gruppe beslektet web utviklingsteknikker som benyttes for å lage interaktive web applikasjoner, GUI applikasjoner på web. Jesse James Garrett (introduserer av Ajax) mener følgende teknikker trengs:  XHTML og CSS for presentasjon XHTMLCSS  the Document Object Model(DOM) for dynamisk visning og interaksjon med dataDocument Object Model  XML og XSLT for utveksling, manipulering og visning av data, henholdsvis XMLXSLT  XMLHttpRequest objekt for asynkron kommunikasjon, XMLHttpRequest  JavaScript for å knytte teknologiene sammen JavaScript Det er dog ikke nødvendig at selve kommunikasjonen er asynkron, den kan også være synkron. Det er heller ikke nødvendig å benytte XML.

Ajax – hva og hvordan?  Metoder  Open(method,url,async)  setRequestHeader(label,value)  Send(content)  Properties  readyState  Onreadystatechange ): hendelse for hver readyState....  responseText ):  responseXML ):  Status ): returnerer f.eks. 200 = ok, 404 = not found  statusText ): OK, not found.... Se over

 HTML, CSS og Javascript  Webserver  WebSpeed  Kommunikasjon  Ajax  Rammeverk  Demo Hovedtema

Rammeverk Framework Response %Response count BackbaseBackbase, an Enterprise Ajax Framework for creating Rich Internet Applications Dojo ToolkitDojo Toolkit, an Open Source DHTML toolkit written in JavaScript Ext (javascript library)Ext (javascript library), a library that extends Prototype, Jquery and YUI until version 1.0. Since version 1.1 a standalone Ajax framework jQueryjQuery, a JavaScript framework that provides an Ajax framework and other utilities MootoolsMootools, a compact and modular JavaScript framework best known for its visual effects and transitions PrototypePrototype, a JavaScript framework that provides Ajax and other utilities Script.aculo.usScript.aculo.us, Used with the Prototype Framework, mainly for animations and interface development Yahoo! UI LibraryYahoo! UI Library, a set of utilities and controls, for building richly interactive web applications using techniques such as DOM scripting, DHTML and Ajax Peter van Dam sin bok Making Progress with Ajax, er en utmerket bok for å forstå hvordan ting henger i sammen opp mot Progress.

Demo • Ren HTML • Kommunikasjon med webserver • WebSpeed – SpeedScripting • Kommunikasjon med webserver og WebSpeed Messenger (POX - Plain Old XML) • Ajax • DOM, XML og Javascript • WebSpeed + AppServer = gjenbruk • TomCat + AppServer istedet for webservices • Ved å kalle TomCat( Servlet), vil en kunne gå direkte til AppServer • Sonic HTTP request reader + AppServer gir også en sterk og fleksibel arkitektur • jQuery • Den enkle verden 

Ren HTML WebBrowser (klient) Peker til WebServer (tjener) Fil login.html

HTML med CSS 

WebSpeed - Speedscripting WebServer  scripts/cgiip.exe  scripts/msgboard.wsc (som peker til cgiip.exe) med AppServer kall – eksemplifisering Og funksjonibel kode

Ajax  Javascript  Cross browser  function createRequest() {return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(”Microsoft.XMLHTTP”);}  GET og POST  GET benytter URL querystring, med dens begrensinger  POST benytter HTTP request HEADER og kan sende ubegrenset mengde  open(”GET|POST”,URL,”YES|NO”) /*metode,url,asynkront*/  Synkront og Asynkront  Asynkront krever mer med hensyn til håndtering av svar på kallet

Ajax eksempler  Basic Ajax call – GET | POST   Basic Ajax call - benytt DOM for plassering av svar   getElementById(), getElementsByTagName...  Mange tilbydere av javascript biblioteker som inneholder masse ferdigfunksjonalitet: wforms,jQuery....  Basic Ajax call – send parametre  setRequestHeader("Content-Type","application/x-www-form-urlencoded");   Using XML  setRequestHeader("Content-Type",”Text/xml");  NB! Kan ikke sende parametre på samme måte som ved application/x-www-form-url...   Eksempel med xml parametre sendt over 

jQuery rammeverk  Rammeverk for javascript, med masse ferdigkode.  “jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”    Complex layouts with jQuery  application-layout-with-uilayout application-layout-with-uilayout  / /