09_-_Web_Technologies_III - Teaching-WIKI
advertisement
Web Engineering
Web Technologies III
Lecture XI – 16th December 2008
Federico M. Facca
© Copyright 2008
STI - INNSBRUCK www.sti-innsbruck.at
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
Web Engineering (703512)
2
Overview
• Javascript for modifying HTML
• AJAX
• WRAP-UP
Web Engineering (703512)
3
Something we have not seen about it: page manipulation
JAVASCRIPT
FOR MODIFYING HTML
Web Engineering (703512)
4
Hello World
<html>
<body>
<script type="text/javascript">
document.write(“<h1>Hello
World!</h1>");
</script>
</body>
</html>
Web Engineering (703512)
DOM treatment
of the page
Document URL
<html>
<body>
The URL of this document is:
<script type="text/javascript">
document.write(document.URL);
</script>
</body>
</html>
Web Engineering (703512)
6
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>
Web Engineering (703512)
DOM Objects
JavaScript Function
Object Property
Introducing the “push” paradigm in Web applications
ASYNCHRONOUS
JAVASCRIPT AND XML
Web Engineering (703512)
9
Where Were We Before AJAX?
• Static pages give the illusion of interactivity through
standard form submissions.
• Form submissions result in full page loads.
Web Engineering (703512)
10
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.
Web Engineering (703512)
11
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.
Web Engineering (703512)
12
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…
Web Engineering (703512)
14
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)
Ajax web application model
Source: http://www.adaptivepath.com/ideas/essays/archives/000385.php
Web Engineering (703512)
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
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.
2.
3.
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.
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 serverside 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.
Web Engineering (703512)
27
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.
Web Engineering (703512)
28
Launching HTTP Requests
• Typically, 3 steps are required:
1. Construct and configure an XMLHttpRequest object
2. Launch the request
3. Process the response
Web Engineering (703512)
29
Constructing an XMLHttpRequest
For Mozilla:
var request = new XMLHttpRequest();
For Microsoft Explorer:
var request = new
ActiveXObject("Microsoft.XMLHTTP");
Web Engineering (703512)
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")
Web Engineering (703512)
31
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)
An Example
<html>
<head>
<title>Jokes</title>
<script type="text/javascript">
... 2 slides ahead ...
</script>
</head>
Web Engineering (703512)
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>
Web Engineering (703512)
An Example (Cont.)
<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>
Web Engineering (703512)
What if we didn’t get yet the
response in this stage?
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.
Web Engineering (703512)
37
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
request.open("method","URL",true)
• When the request is completed, a predefined
function is called
Web Engineering (703512)
38
XMLHttpRequest States
• The XMLHttpRequest goes through several states:
0 not initialized
1 loading
3 interactive
2 loaded
4 complete
• In the request configuration, you can define a
function to call upon state change:
request.onreadystatechange = functionName
Web Engineering (703512)
39
XMLHttpRequest States (Cont.)
• Use request.readyState to get the current state of
the request
• Use request.abort() to stop the request
Web Engineering (703512)
40
Asynchronous Example
var request;
function setJoke(value) {
request = new XMLHttpRequest();
request.open("GET","joke"+value+".txt",true);
request.onreadystatechange = updateJokeDiv;
request.send(null);
}
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
Web Engineering (703512)
43
XML+AJAX Example
<html>
<head><title>Country List</title>
<script type="text/javascript">
…
</script>
</head>
<body onload="init();loadCountries()">
<h1>Select a Continent:</h1>
Web Engineering (703512)
44
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)
That’s almost all for day…
WRAP-UP
Web Engineering (703512)
49
Bibliography
• Mandatory reading
– W3Schools Ajax Tutorial
http://www.w3schools.com/Ajax/Default.Asp
Web Engineering (703512)
50
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)
Web Engineering (703512)
53
Next Lecture
#
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)
54
Questions?
Web Engineering (703512)
55
