Escolar Documentos
Profissional Documentos
Cultura Documentos
Motivation
8 Diagrams from Ajax in Action by Dave Crane et al, Manning Press. See recommended books in next lecture.
Google Home Page
(formerly Google Suggest)
11
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else {
return(null);
}
}
POST data
( l
(always nullll for
f GET requests)
t ) Don't wait
ait for response
(Send request asynchronously)
15
Handle Response
function handleResponse(request) {
if (request
(request.readyState
readyState == 4) {
alert(request.responseText);
}
} Response from server is complete
(handler gets invoked multiple times –
ignore the first three)
16
First-class Functions in JavaScript
• JavaScript lets you pass functions around
function doSomethingWithResponse() { code }
request.onreadystatechange = doSomethingWithResponse;
– This is somewhat similar to function pointers in C/C++
• Java does not permit this
• JavaScript allows anonymous functions
var request
q = g
getRequestObject();
q j ();
request.onreadystatechange =
function() { code-that-uses-request-variable };
doOperation(square, 5); 25
doOperation(triple 10); 30
doOperation(triple,
functions[0](10); 100
functions[1](20); 60
18
Anonymous Functions:
Examples
function square(x) { return(x * x); }
square(10); 100
(function(x) { return(x * x); })(10); 100
function makeMultiplier(n) {
return(function(x) { return(x * n); });
}
var factor = 5;
;
var f = makeMultiplier(factor);
f(3); 15
factor = 500;
f(3); 15
19
function sendRequest() {
request = getRequestObject();
request.onreadystatechange = handleResponse;
request.open("GET", "...", true);
request send(null);
request.send(null);
}
p () {
function handleResponse()
if (request.readyState == 4) {
alert(request.responseText);
}
21
Corrected Approach
(Local Request Variable)
function getRequestObject() { ... }
function sendRequest() {
var request
q = g
getRequestObject();
q j
request.onreadystatechange =
function() { handleResponse(request); };
request open("GET"
request.open( GET , "...", true);
request.send(null);
}
function handleResponse(request) {
...
}
22
Complete JavaScript Code
(show-message
(show message.js)
js)
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else {
return(null);
t ( ll)
}
}
function sendRequest() {
var request = getRequestObject();
request.onreadystatechange =
function() { handleResponse(request); };
request open("GET"
request.open( GET , "message-data
message data.html
html", true);
request.send(null);
}
function handleResponse(request) {
if (request.readyState == 4) {
alert(request.responseText);
}
23 }
HTML Code
• Use xhtml, not HTML 4
– In
I order
d to manipulate
i l it i with
i h DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">...</html>
• <?xml
?xml version="1
version 1.00" encoding
encoding="UTF-8"?>
UTF 8 ?
<!DOCTYPE html ...>
<html xmlns="http://www.w3.org/1999/xhtml">...</html>
– XHTML specification recommends using it
– But... Internet Explorer will switch to quirks-mode (from
standards-mode) if DOCTYPE is not first line.
• Many recent style sheet formats will be ignored
• So omit XML header
• Needs separate end tags in some places
Don't do this.
– Scripts will not load if you use <script .../>
Do this instead.
25
instead of <script...></script>
HTML Code
(show-message
(show message.html)
html)
<!DOCTYPE html PUBLIC "..."
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax: Simple Message</title>
<script src="show-message.js"
type="text/javascript"></script>
</head>
<body>
<center>
<table border="1" bgcolor="gray">
<tr><th><big>Ajax: Simple Message</big></th></tr>
</table>
<p/>
<input type="button" value="Show Message"
onclick= sendRequest() />
onclick="sendRequest()"/>
</center></body></html>
26
HTML Code (message-data.html)
Some random message
28
© 2009 Marty Hall
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else
l {
return(null);
}
}
No changes from previous example.
This code stays the same for entire section.
32
Initiate Request
function ajaxAlert(address) {
var request = getRequestObject();
request.onreadystatechange =
function() { showResponseAlert(request); };
request.open("GET", address, true);
request.send(null);
}
Relative URL of server-side resource.
(In this example, we will pass in the address of a JSP page.)
33
Handle Response
function showResponseAlert(request) {
if ((request.readyState
((request readyState == 4) &&
(request.status == 200)) {
alert(request.responseText);
}
}
34
Complete JavaScript Code
(Part of ajax
ajax-basics-1
basics 1.js)
js)
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new
t ( XMLHttpRequest());
tt t())
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else {
return(null);
}
}
function ajaxAlert(address)
j ( ) {
var request = getRequestObject();
request.onreadystatechange =
function() { showResponseAlert(request); }
request.open("GET", address, true);
request.send(null);
}
function showResponseAlert(request) {
if ((request.readyState
((request readyState == 4) &&
(request.status == 200)) {
alert(request.responseText);
}
35
}
HTML Code
• Load JavaScript from central location
<script src="./scripts/ajax-basics.js"
type="text/javascript"></script>
• Pass JSP address to main function
<input type="button" value="Show Server Time"
onclick='ajaxAlert("show-time.jsp")'/>
j ( j p)
• Use style sheet
<link rel="stylesheet" Note single quotes (because of
d bl quotes
double t iinside
id parens).
)
href="./css/styles.css"
type="text/css"/>
36
HTML Code
<!DOCTYPE html PUBLIC "...">
<html xmlns="http://www
xmlns= http://www.w3.org/1999/xhtml
w3 org/1999/xhtml">
>...
<link rel="stylesheet"
href="./css/styles.css"
type= text/css />
type="text/css"/>
<script src="./scripts/ajax-basics.js"
type="text/javascript"></script>...
<body>...
<fieldset>
<legend>Data from JSP, Result Shown in Alert Box
</legend>
g
<form action="#">
<input type="button" value="Show Server Time"
onclick='ajaxAlert("show-time.jsp")'/>
</form>
</fieldset>
37 ...
39
• Caching problems
– The URL stays the same but the output changes
– So if browser caches page, you get the wrong time
• Much more likely with IE than with other browsers
– Solution: send Cache-Control and Pragma headers
• Date was not formatted
– Just used the toString method of Date
– Solution: use String.format (ala sprintf) and %t controls
• JSP is wrong technology
– JSP is best for lots of HTML and little or no logic/Java
– But
B t now we have
h logic
l i but
b t no HTML
– Solution: use a servlet
41
Steps
• JavaScript
– D
Define
fi an object
bj t for
f sending
di HTTP requests
t
– Initiate request
• Get request object
• Designate an anonymous response handler function
– Supply as onreadystatechange attribute of request
• Initiate a GET or POST request to a servlet
• Send data
– Handle response
• Wait for readyState of 4 and HTTP status of 200
• Extract return text with responseText
p or responseXML
p
• Do something with result
• HTML
– Load JavaScript from centralized directory.
directory Use style sheet.
sheet
– Designate control that initiates request
– Give id to output placeholder region
42
Define a Request Object, Initiate
Request Handle Response
Request,
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new
t ( XMLHtt R
XMLHttpRequest());
t())
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else {
return(null);
} No changes from previous example.
} Only address changes, and address
comes from the HTML page.
function ajaxAlert(address) {
var request = getRequestObject();
bj ()
request.onreadystatechange =
function() { showResponseAlert(request); }
request.open("GET", address, true);
request send(null);
request.send(null);
}
function showResponseAlert(request) {
if ((request.readyState == 4) &&
(request.status == 200)) {
alert(request.responseText);
}
}
43
HTML Code
...
<link rel="stylesheet"
rel stylesheet
href="./css/styles.css"
type="text/css"/>
<script
p src="./scripts/ajax-basics.js"
p j j
type="text/javascript"></script>
... Address of servlet
<fieldset> (from url-pattern of
<legend> servlet-mapping).
Data from Servlet, Result Shown in Alert Box
</legend>
<i
<inputt t
type="button"
"b tt " value="Show
l "Sh S
Server Ti Time" "
onclick='ajaxAlert("show-time")'/>
</fieldset>
...
44
Servlet Code
package coreservlets;
import ...
web.xml
...
<servlet>
<servlet-name>ShowTime</servlet-name>
<servlet-class>coreservlets.ShowTime</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShowTime</servlet-name>
< l
<url-pattern>/show-time</url-pattern>
tt >/ h ti </ l tt >
</servlet-mapping>
...
46
Message from Servlet: Results
47
<div
div id="resultText"></div>
id resultText /div
document.getElementById(resultRegion).innerHTML =
request.responseText;
51
Steps
• JavaScript
– D
Define
fi an object
bj t for
f sending
di HTTP requests
t
– Initiate request
• Get request object
• Designate an anonymous response handler function
– Supply as onreadystatechange attribute of request
• Initiate a GET or POST request to a servlet
• Send data
– Handle response
• Wait for readyState of 4 and HTTP status of 200
• Extract return text with responseText
p or responseXML
p
• Use innerHTML to insert result into designated element
• HTML
– Load JavaScript from centralized directory. Use style sheet.
– Designate control that initiates request
– Give id to output placeholder region
52
Define a Request Object
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else
l {
return(null);
}
}
No changes from previous examples
53
Initiate Request
function ajaxResult(address, resultRegion) {
var request = getRequestObject();
request.onreadystatechange =
function() { showResponseText(request,
g ) }
resultRegion); };
request.open("GET", address, true);
request.send(null);
}
54
Handle Response
function showResponseText(request, resultRegion) {
if ((request
((request.readyState
readyState == 4) &&
(request.status == 200)) {
document.getElementById(resultRegion).innerHTML =
request responseText;
request.responseText;
}
}
55
HTML Code
...
<link rel="stylesheet"
rel stylesheet
href="./css/styles.css"
type="text/css"/>
<script src="./scripts/ajax-basics.js"
type="text/javascript"></script>
...
<fieldset>
<legend>Data from Servlet
Servlet, Result Shown in HTML</legend>
<input type="button" value="Show Server Time"
onclick='ajaxResult("show-time","timeResult1")'/>
<div id="timeResult1" class="ajaxResult"></div>
j
</fieldset>
...
56
Style Sheet Code (css/styles.css)
.ajaxResult { color: #440000;
font weight: bold;
font-weight:
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
• Note
– Don't worry if you don't yet know much about style
sheets. They will be covered in later lecture.
57
Servlet Code
• No changes from previous example
– Returns a formatted time string
58
Building HTML Output: Results
59
Wrap-up
Summary
• JavaScript
– Define request object
• Check for both Microsoft and non-MS objects. Identical in all apps.
– Initiate request
• Get request
q object
j
• Designate an anonymous response handler function
• Initiate a GET request
– Handle response
• Wait
W it ffor readyState
d St t off 4 and
d HTTP status
t t off 200
• Extract return text with responseText
• Do something with result
– Use innerHTML to insert result into designated
g element
• HTML
– Give id to placeholder (often a div). Initiate process.
• Java
– Use JSP, servlet, or combination (MVC) as appropriate.
– Prevent browser caching.
62
© 2009 Marty Hall
Questions?