1. © Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at Web Engineering Web Technologies III Lecture XI – 16 th December 2008 Federico M. Facca

2. Web Engineering (703512) Where are we? #DateTitleLecturer 17 th OctWeb Engineering Introduction and OverviewF. M. Facca 214 h OctCollection Requirements for Web ApplicationsF. M. Facca 321 st OctWeb Application ModelingF. M. Facca 428 th OctDeveloping Applications with WebMLF. M. Facca 54 th NovWeb Application Architectures IF. M. Facca 611 th NovWeb Application Architectures IIF. M. Facca 718 th NovTesting and Usability on the WebF. M. Facca 825 th NovMid Term ExamF. M. Facca 92 nd DecWeb Technologies IF. M. Facca 109 th DecWeb Technologies IIF. M. Facca 1116 th DecWeb Technologies IIIF. M. Facca 1213 th JanWeb 2.0 Mash-upsF. Daniel (UNITN) 1320 th JanWeb Application Development Process/ Project Management for Web Applications F. M. Facca 1427 th JanFinal ExamF. M. Facca 2

3. Web Engineering (703512) Overview Javascript for modifying HTML AJAX WRAP-UP 3

4. Web Engineering (703512) JAVASCRIPT FOR MODIFYING HTML Something we have not seen about it: page manipulation 4

5. Web Engineering (703512) Hello World document.write(“ Hello World! "); DOM treatment of the page

6. Web Engineering (703512) Document URL The URL of this document is: document.write(document.URL); 6

7. Web Engineering (703512) Form Validation function validate() …(next slide) Name (max 10 chararcters): Age (from 1 to 100): E-mail:

8. Web Engineering (703512) Form Validation (Cont.) 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 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; } } DOM Objects JavaScript Function Object Property

9. Web Engineering (703512) ASYNCHRONOUS JAVASCRIPT AND XML Introducing the “push” paradigm in Web applications 9

10. 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

11. 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

12. 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

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

14. Web Engineering (703512) Real-Life Examples of AJAX Apps Google maps –http://maps.google.com/http://maps.google.com/ Goolgle Suggest –http://www.google.com/webhp?complete=1&hl=enhttp://www.google.com/webhp?complete=1&hl=en Gmail –http://gmail.com/http://gmail.com/ Yahoo Maps (new) –http://maps.yahoo.com/http://maps.yahoo.com/ Many more… 14

15. 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

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

17. 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

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

19. Web Engineering (703512) Traditional Model Source: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaperhttp://www.openajax.org/member/wiki/Technical_Overview_Whitepaper

20. Web Engineering (703512) Source: http://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://www.adaptivepath.com/ideas/essays/archives/000385.php Ajax web application model

21. 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

22. 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.

23. 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

24. 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

25. 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

26. 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.

27. 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

28. 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

29. 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

30. Web Engineering (703512) Constructing an XMLHttpRequest For Mozilla: For Microsoft Explorer: var request = new XMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP");

31. 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

32. Web Engineering (703512) Launching the Request request.send(content ) content is the posted in a POST request content can be "null" or empty

33. 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.statusrequest.statusText request.getAllResponseHeaders() request.getResponseHeader("header")

34. Web Engineering (703512) Jokes... 2 slides ahead... An Example

35. Web Engineering (703512) Select a Joke: Joke 1 Joke 2 Joke 3 An Example (Cont.)

36. Web Engineering (703512) 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 = " Cannot load joke... ";} } What if we didn’t get yet the response in this stage? An Example (Cont.)

37. 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

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

39. 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 0 not initialized 1 1 loading 2 2 loaded 3 3 interactive 4 4 complete request.onreadystatechange = functionName

40. 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

41. 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

42. Web Engineering (703512) An Example (Cont.) function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = " Loading... "; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = " Cannot load joke! "; }

43. 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

44. Web Engineering (703512) XML+AJAX Example Country List … Select a Continent: 44

45. Web Engineering (703512) XML+AJAX Example (Cont.) Asia Africa Europe

46. 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); }

47. 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); }

48. 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

49. Web Engineering (703512) WRAP-UP That’s almost all for day… 49

50. Web Engineering (703512) Bibliography Mandatory reading –W3Schools Ajax Tutorial http://www.w3schools.com/Ajax/Default.Asp 50

51. 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/

52. 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/

53. 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 13 th January Provide (in separate zip files): –Manual –Code –Deployable application (if I cannot manage to deploy it, then I cannot evaluate it) 53

54. Web Engineering (703512) Next Lecture 54 #DateTitleLecturer 17 th OctWeb Engineering Introduction and OverviewF. M. Facca 214 h OctCollection Requirements for Web ApplicationsF. M. Facca 321 st OctWeb Application ModelingF. M. Facca 428 th OctDeveloping Applications with WebMLF. M. Facca 54 th NovWeb Application Architectures IF. M. Facca 611 th NovWeb Application Architectures IIF. M. Facca 718 th NovTesting and Usability on the WebF. M. Facca 825 th NovMid Term ExamF. M. Facca 92 nd DecWeb Technologies IF. M. Facca 109 th DecWeb Technologies IIF. M. Facca 1116 th DecWeb Technologies IIIF. M. Facca 1213 th JanWeb 2.0 Mash-upsF. Daniel (UNITN) 1320 th JanWeb Application Development Process/ Project Management for Web Applications F. M. Facca 1427 th JanFinal ExamF. M. Facca

55. Web Engineering (703512) Questions? 55