09 -web_technologies_iii

09 -web_technologies_iii
© Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at Web Engineering Web Technologies III Lecture XI – 16th December 2008 Federico M. Facca
Web Engineering (703512) Where are we? # Date Title Lecturer 1 7th Oct Web Engineering Introduction and Overview F. M. Facca 2 14h Oct Collection Requirements for Web Applications F. M. Facca 3 21st Oct Web Application Modeling F. M. Facca 4 28th Oct Developing Applications with WebML F. M. Facca 5 4th Nov Web Application Architectures I F. M. Facca 6 11th Nov Web Application Architectures II F. M. Facca 7 18th Nov Testing and Usability on the Web F. M. Facca 8 25th Nov Mid Term Exam F. M. Facca 9 2nd Dec Web Technologies I F. M. Facca 10 9th Dec Web Technologies II F. M. Facca 11 16th Dec Web Technologies III F. M. Facca 12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN) 13 20th Jan Web Application Development Process/ Project Management for Web Applications F. M. Facca 14 27th Jan Final Exam F. M. Facca 2
Web Engineering (703512) Overview • Javascript for modifying HTML • AJAX • WRAP-UP 3
Web Engineering (703512) JAVASCRIPT FOR MODIFYING HTML Something we have not seen about it: page manipulation 4
Web Engineering (703512) Hello World <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> DOM treatment of the page
Web Engineering (703512) Document URL <html> <body> The URL of this document is: <script type="text/javascript"> document.write(document.URL); </script> </body> </html> 6
Web Engineering (703512) Form Validation <html> <head> <script type="text/javascript"> function validate() …(next slide) </script> </head> <body> <form action="tryjs_submitpage.htm" onsubmit="return validate()"> Name (max 10 chararcters): <input type="text" id="fname“ size="20"><br /> Age (from 1 to 100): <input type="text" id="age" size="20"><br /> E-mail: <input type="text" id="email" size="20"><br /> <input type="submit" value="Submit"> </form> </body> </html>
Web Engineering (703512) Form Validation (Cont.) <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; submitOK="true"; if (fname.length>10){ alert("The name must be less than 10 characters"); submitOK="false"; } if (isNaN(age)||age<1||age>100) { alert("The age must be a number between 1 and 100"); submitOK="false"; } if (at==-1) { alert("Not a valid e-mail!"); submitOK="false"; } if (submitOK=="false") { return false; } } </script> DOM Objects JavaScript Function Object Property
Web Engineering (703512) ASYNCHRONOUS JAVASCRIPT AND XML Introducing the “push” paradigm in Web applications 9
Web Engineering (703512) Where Were We Before AJAX? • Static pages give the illusion of interactivity through standard form submissions. • Form submissions result in full page loads. 10
Web Engineering (703512) So, What’s The Problem? • Many actions only manipulate small portions of the page but the entire page must be reloaded. • Server responses contain the entire page content rather than just the portion being updated. • Loading entire pages typically results in several additional HTTP requests for images, style sheets, scripts, and any other content that may be on the page. 11
Web Engineering (703512) AJAX - Asynchronous JavaScript and XML • An interface that allows for the HTTP communication without page refreshment. • Web pages are loaded into an object within the script (e.g., JavaScript) execution and integrated with the page content. • Thus, the Web page can communicate with the server without refreshing the whole page. 12
Web Engineering (703512) Why Use Ajax • Enhance user experience – Increases usability, speed, interactivity – Makes it possible to update portions of a web page without reloading the entire page – Asynchronous—user does not have to wait for server to respond
Web Engineering (703512) Real-Life Examples of AJAX Apps • Google maps – http://maps.google.com/ • Goolgle Suggest – http://www.google.com/webhp?complete=1&hl=en • Gmail – http://gmail.com/ • Yahoo Maps (new) – http://maps.yahoo.com/ • Many more… 14
Web Engineering (703512) Ajax Example: Google Suggest • Uses data about the overall popularity of various searches to help rankings • Does not base suggestions on an individual’s personal search history
Web Engineering (703512) Why Use Ajax? • Ajax applications usable on many different – Operating systems – Browsers – Computer architectures • The web standards that Ajax uses (XHTML, CSS, JavaScript, XML) are well defined, and supported by all major browsers.
Web Engineering (703512) How Does Ajax Work • JavaScript communicates directly with the server, using the XMLHttpRequest object (or ActiveXObject, IE 5 & 6) • Data retrieved from the server can be in a variety of formats: XML, HTML, text files
Web Engineering (703512) HTTP Requests: Traditional Model • Traditional JavaScript: – Make html form • use GET or POST to communicate with the server – User clicks “Submit” button to send or receive information – User waits • for the server to respond • for a new page to load with the results
Web Engineering (703512) Traditional Model Source: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaper
Web Engineering (703512) Source: http://www.adaptivepath.com/ideas/essays/archives/000385.php Ajax web application model
Web Engineering (703512) • JavaScript communicates directly with the server, via the JavaScript XMLHttpRequest object (or ActiveXObject, IE 5 & 6) • With XMLHttpRequest, the web page can make a request/get a response from web server without reloading • The user can remain on the same page, not noticing that scripts request pages or send data to a server in the background HTTP Requests: Using Ajax
Web Engineering (703512) XMLHttpRequest • API that JavaScript and other web browser scripting languages use to transfer XML and other data between a web page’s client and server side • Data returned from XMLHttpRequest calls is often provided by back-end databases.
Web Engineering (703512) XMLHttpRequest Object History • Microsoft Internet Explorer version 5 – ActiveX object • Mozilla 1.0 added it as a native object with a compatible API. • Apple added it to Safari in version 1.2
Web Engineering (703512) What Technologies Does Ajax Use? • a combination of: – XHTML (or HTML) – Cascading Style Sheets (CSS) – Document Object Model manipulated using JavaScript to display and interact dynamically with the information presented – The XMLHttpRequest object to exchange data asynchronously with the web server
Web Engineering (703512) JavaScript • Define an object for sending HTTP requests • Initiate request – get request object – designate a response handler function – initiate a GET or POST request – send data • Handle response – wait for readyState of 4 and HTTP status of 200 – extract return text with responseText or responseXML – do something with result • E.g., use innerHTML to insert result into designated element
Web Engineering (703512) Ajax Fundamentals • Ajax uses a three-step process: 1. Request a URL from JavaScript code on the client. 2. Handle the URL on the server and write to the response. 3. After the response is complete, integrate the response into the DOM (Document Object Model). – In an Ajax request we don't refresh the entire page; instead, we update only part of the page.
Web Engineering (703512) The Server side • Did we reduce the load on the server? • Ajax newcomers sometimes mistakenly believe that Ajax, because it provides a more responsive user interface, reduces server-side traffic. • In fact, Ajax applications typically have more server- side traffic because each Ajax request involves a trip to the server. – Because those requests are asynchronous, however, Ajax creates the perception of a more responsive UI, though it typically does not reduce the load on the server. 27
Web Engineering (703512) So, How Does It Work? • JavaScript is used to: – Create and control instances of the XMLHttpRequest (XHR) object. – Provide handlers for responses. – Manipulate the DOM. • The XMLHttpRequest object: – Allows scripts to perform HTTP client functionality. – Supports GET and POST operations. 28
Web Engineering (703512) Launching HTTP Requests • Typically, 3 steps are required: 1. Construct and configure an XMLHttpRequest object 2. Launch the request 3. Process the response 29
Web Engineering (703512) Constructing an XMLHttpRequest For Mozilla: For Microsoft Explorer: var request = new XMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");
Web Engineering (703512) Configuring an XMLHttpRequest 31 request.open("method","URL",false) request.setRequestHeader("header","value") • method is GET, POST, etc. • URL must be in the domain of the current (or a relative URL), for security reasons • The false will be discussed later
Web Engineering (703512) Launching the Request request.send(content ) • content is the posted in a POST request • content can be "null" or empty
Web Engineering (703512) Reading the Response request.responseText • The response as flat text request.responseXML • The response as a (DOM) Document object • Available if response Content-Type is text/XML request.status request.statusText request.getAllResponseHeaders() request.getResponseHeader("header")
Web Engineering (703512) <html> <head> <title>Jokes</title> <script type="text/javascript"> ... 2 slides ahead ... </script> </head> An Example
Web Engineering (703512) <body onload="init(); setJoke()"> <h1>Select a Joke:</h1> <p><select onchange="setJoke(value)"> <option value="1" selected="selected">Joke 1</option> <option value="2">Joke 2</option> <option value="3">Joke 3</option> </select></p> <div id="jokediv"></div> </body> </html> An Example (Cont.)
Web Engineering (703512) <script type="text/javascript"> var jDiv; function init() { jDiv = document.getElementById("jokediv");} function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",false); request.send(null); if(request.status==200){jDiv.innerHTML=request.responseText;} else {jDiv.innerHTML = "<i>Cannot load joke...</i>";} } </script> What if we didn’t get yet the response in this stage? An Example (Cont.)
Web Engineering (703512) Example (Cont.) • Our examples use “false" in the third parameter of open(). – This parameter specifies whether the request should be handled asynchronously. • True means that the script continues to run after the send() method, without waiting for a response from the server. 37
Web Engineering (703512) Asynchronous Requests • Reading of a Web page can take a long time during which the browser is blocked • Solution: launch the request asynchronously • That is, the execution continues after send is called without waiting for it to complete • When the request is completed, a predefined function is called 38 request.open("method","URL",true)
Web Engineering (703512) XMLHttpRequest States • The XMLHttpRequest goes through several states: • In the request configuration, you can define a function to call upon state change: 39 0 not initialized 1 loading 2 loaded 3 interactive 4 complete request.onreadystatechange = functionName
Web Engineering (703512) XMLHttpRequest States (Cont.) • Use request.readyState to get the current state of the request • Use request.abort() to stop the request 40
Web Engineering (703512) var request; function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); } Asynchronous Example
Web Engineering (703512) An Example (Cont.) function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = "<i>Loading...</i>"; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = "<i>Cannot load joke!</i>"; } }
Web Engineering (703512) Integrating AJAX and XML using DOM • The next example shows how XML data can be parsed and added into the content of your page 43
Web Engineering (703512) XML+AJAX Example <html> <head><title>Country List</title> <script type="text/javascript"> … </script> </head> <body onload="init();loadCountries()"> <h1>Select a Continent:</h1> 44
Web Engineering (703512) XML+AJAX Example (Cont.) <p> <select id="continenetList“ onchange="loadCountries()"> <option value="asia">Asia</option> <option value="africa">Africa</option> <option value="europe">Europe</option> </select> </p> <p><select size="10" id="countryList"></select></p> </body> </html>
Web Engineering (703512) XML+AJAX Example (Cont.) function init() { continents = document.getElementById("continenetList"); countries = document.getElementById("countryList"); } function loadCountries() { var xmlURL = "countries-"+continents.value+".xml"; var request = new XMLHttpRequest(); request.onreadystatechange = updateCountries (); request.open("GET",xmlURL,true); request.send(null); }
Web Engineering (703512) XML+AJAX Example (Cont.) function updateCountries() { if(request.readyState==4) { while(countries.length>0){countries.remove(0);} if(request.status==200) { var names = request.responseXML.getElementsByTagName("name"); for(var i=0; i<names.length; ++i) { option = document.createElement("option"); option.text=option.value= names[i].firstChild.nodeValue; countries.appendChild(option); } } } }
Web Engineering (703512) AJAX: Potential Drawbacks • "Back" function of browser might not work as expected • Bookmarking a particular state of the application • Navigation may be difficult • User might not notice when small parts of the page change • Search engine tracking • If user disables JavaScript • Many web analytics programs may not track Ajax actions as they do page reloads
Web Engineering (703512) WRAP-UP That’s almost all for day… 49
Web Engineering (703512) Bibliography • Mandatory reading – W3Schools Ajax Tutorial http://www.w3schools.com/Ajax/Default.Asp 50
Web Engineering (703512) The Eclipse Web Tools Platform (WTP) • Extends the Eclipse platform with tools for developing Web and Java EE applications. • Includes source and graphical editors for a variety of languages, – wizards and built-in applications to simplify development, – tools and APIs to support deploying, running, and testing apps. – built in CVS support • http://www.eclipse.org/webtools/
Web Engineering (703512) AJAX Toolkit Framework (ATF) • Currently developmental • Goal: build extensible frameworks containing features for developing, deploying, debugging and testing AJAX applications. • Tools will include: – enhanced JavaScript editing features such as edit-time syntax checking – an embedded Mozilla web browser – an embedded DOM browser – an embedded JavaScript debugger – additional AJAX development tooling • http://www.eclipse.org/atf/
Web Engineering (703512) Assignments • It’s a compulsory team assignment – Up to 12 points (as always extras are possible) • You have to implements the system you modeled in the previous assignment • Suggested technology: Jsp + Java Bean • Deadline 13th January • Provide (in separate zip files): – Manual – Code – Deployable application (if I cannot manage to deploy it, then I cannot evaluate it) 53
Web Engineering (703512) Next Lecture 54 # Date Title Lecturer 1 7th Oct Web Engineering Introduction and Overview F. M. Facca 2 14h Oct Collection Requirements for Web Applications F. M. Facca 3 21st Oct Web Application Modeling F. M. Facca 4 28th Oct Developing Applications with WebML F. M. Facca 5 4th Nov Web Application Architectures I F. M. Facca 6 11th Nov Web Application Architectures II F. M. Facca 7 18th Nov Testing and Usability on the Web F. M. Facca 8 25th Nov Mid Term Exam F. M. Facca 9 2nd Dec Web Technologies I F. M. Facca 10 9th Dec Web Technologies II F. M. Facca 11 16th Dec Web Technologies III F. M. Facca 12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN) 13 20th Jan Web Application Development Process/ Project Management for Web Applications F. M. Facca 14 27th Jan Final Exam F. M. Facca
Web Engineering (703512) Questions? 55

Check these out next

09 -web_technologies_iii

Recommandé

Contenu connexe

Présentations pour vous(20)

Similaire à 09 -web_technologies_iii(20)

Plus de STI Innsbruck(19)

Dernier(20)

09 -web_technologies_iii