1 / 55

Web Engineering

Web Technologies III Lecture XI – 16 th December 2008 Federico M. Facca. Web Engineering. Where are we?. Overview. Javascript for modifying HTML AJAX WRAP-UP. Something we have not seen about it: page manipulation. JavaScript FoR Modifying HTML. Hello World. <html> <body>

senta
Download Presentation

Web Engineering

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Technologies III Lecture XI – 16th December 2008 Federico M. Facca Web Engineering

  2. Where are we?

  3. Overview • Javascript for modifying HTML • AJAX • WRAP-UP

  4. Something we have not seen about it: page manipulation JavaScriptFoR Modifying HTML

  5. Hello World <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> DOM treatment of the page

  6. Document URL <html> <body> The URL of this document is: <script type="text/javascript"> document.write(document.URL); </script> </body> </html>

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

  8. Form Validation (Cont.) <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; varfname=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") { returnfalse; } } </script> DOM Objects JavaScript Function Object Property

  9. Introducing the “push” paradigm in Web applications Asynchronous JavaScript And XML

  10. Where Were We Before AJAX? • Static pages give the illusion of interactivity through standard form submissions. • Form submissions result in full page loads.

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

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

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

  15. 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. 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. 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. 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. Traditional Model Source: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaper

  20. Ajax web application model Source: http://www.adaptivepath.com/ideas/essays/archives/000385.php

  21. HTTP Requests: Using Ajax • 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

  22. 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. 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. 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. 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. Ajax Fundamentals • Ajax uses a three-step process: • Request a URL from JavaScript code on the client. • Handle the URL on the server and write to the response. • 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. 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.

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

  29. Launching HTTP Requests • Typically, 3 steps are required: • Construct and configure an XMLHttpRequest object • Launch the request • Process the response

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

  31. Configuring an XMLHttpRequest request.open("method","URL",false) • 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 request.setRequestHeader("header","value")

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

  33. 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")

  34. An Example <html> <head> <title>Jokes</title> <script type="text/javascript"> ... 2 slides ahead ... </script> </head>

  35. An Example (Cont.) <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>

  36. An Example (Cont.) <script type="text/javascript"> varjDiv; function init() { jDiv = document.getElementById("jokediv");} functionsetJoke(value) { request = newXMLHttpRequest(); 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?

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

  38. 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 request.open("method","URL",true)

  39. XMLHttpRequest States • The XMLHttpRequest goes through several states: • In the request configuration, you can define a function to call upon state change: 0 not initialized 1 loading 2 loaded 3 interactive 4 complete request.onreadystatechange = functionName

  40. XMLHttpRequest States (Cont.) • Use request.readyState to get the current state of the request • Use request.abort() to stop the request

  41. Asynchronous Example var request; function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); }

  42. An Example (Cont.) functionupdateJokeDiv() { 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>"; } }

  43. Integrating AJAX and XML using DOM • The next example shows how XML data can be parsed and added into the content of your page

  44. XML+AJAX Example <html> <head><title>Country List</title> <script type="text/javascript"> … </script> </head> <body onload="init();loadCountries()"> <h1>Select a Continent:</h1>

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

  46. XML+AJAX Example (Cont.) function init() { continents = document.getElementById("continenetList"); countries = document.getElementById("countryList"); } functionloadCountries() { varxmlURL = "countries-"+continents.value+".xml"; varrequest = newXMLHttpRequest(); request.onreadystatechange = updateCountries (); request.open("GET",xmlURL,true); request.send(null); }

  47. XML+AJAX Example (Cont.) functionupdateCountries() { if(request.readyState==4) { while(countries.length>0){countries.remove(0);} if(request.status==200) { var names = request.responseXML.getElementsByTagName("name"); for(vari=0; i<names.length; ++i) { option = document.createElement("option");option.text=option.value= names[i].firstChild.nodeValue;countries.appendChild(option); } } } }

  48. 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. That’s almost all for day… WRAP-up

  50. Bibliography • Mandatory reading • W3Schools Ajax Tutorialhttp://www.w3schools.com/Ajax/Default.Asp

More Related