Outline - Web 2.0 Web 2.0 technologies: Ajax

sinceresatisfyingΛογισμικό & κατασκευή λογ/κού

2 Ιουλ 2012 (πριν από 5 χρόνια και 21 μέρες)

281 εμφανίσεις

Web 2.0
Web 2.0 technologies: Ajax
Prof. Filippo Lanubile
Outline
• What is Ajax
• Differences between Ajax and classic web apps
• Core technologies
• How Ajax works

Ajax frameworks
Prof. Filippo Lanubile
Ajax

frameworks
• Pros and Cons
• Alternatives to Ajax
What is Ajax? (1)
Prof. Filippo Lanubile
What is Ajax? (2)
Asynchronous JavaScript and XML
• A web development technique for improving the
interactivity of web applications
• Key features
– Make requests to the server and get responses
Prof. Filippo Lanubile
without reloading the entire page
– Requests do not lock up the web application until
responses come back
What is Ajax? (3)
A
jax is part of Web 2.0
• Second generation of
web applications
• Web 2.0 gives users an
experience closer to
deskto
p
a
pp
lications
Prof. Filippo Lanubile
p pp
• Web 2.0 apps
encourage collaboration
and participation
– Blogs, wikis, folksonomies
Differences between Ajax
and classic web apps
browser client
user interface
Classic web application
Ajax application
browser client
user interface
HTML+CSS data
HTTP request
HTTP(S) transport
user

interface
Ajax engine
JavaScript call
HTTP request
HTTP(S) transport
HTML+CSS data
Classic

web

application
Prof. Filippo Lanubile
server-side systems
web server
datastores, backend
processing, legacy systems
server-side systems
web server
datastores, backend
processing, legacy systems
XML data
Source: Adaptive Path
Prof. Filippo Lanubile
Classic search engine
Prof. Filippo Lanubile
Ajax search engine
Prof. Filippo Lanubile
Classic web mail
Prof. Filippo Lanubile
Ajax web mail
Prof. Filippo Lanubile
Classic mapping site
Prof. Filippo Lanubile
Ajax mapping site
Core technologies
Ajax is a group of technologies bundled together
Ajax

is

a

group

of

technologies

bundled

together

• HTML and CSS
– for presenting
• XML
– for transferring data between the web server and browser
• DOM (Document Object Model)
– to access elements within the web page and the xml file read
on the web server
Prof. Filippo Lanubile
on

the

web

server
• JavaScript
– to dynamically display and interact with the information
presented
• XMLHttpRequest object
– to exchange data asynchronously with the web server
XMLHttpRequest object: Attributes
changes from 0 to 4
readyState
status
responseText
responseXml
onread
y
statechan
g
e
XMLHttpRequest
changes

from

0

to

4

0: Unitialized. 1: Open. 2: Sent.
3: Receiving. 4: Loaded.
Status code in HTTP Reply
200 ok … 404 page not found
holds the entity body of the HTTP
Prof. Filippo Lanubile
open(in method, in uri, in async)
send(in data)
setRequestHeader(in header, in value)
y g
reply
as a string of characters
holds the entity body of the HTTP
reply as a xml parsed document
holds the callback function that
handles the HTTP reply
XMLHttpRequest object: Methods
Create a connection
method: type of HTTP request
(GET or POST)
uri: the location of the resource
async: true (default) / false
Se
n
d

a
r
equest

to

t
h
e

se
rv
e
r
Prof. Filippo Lanubile
Se d a equest to t e se e
data: the entity body of the HTTP
request (null for a GET request)
Sets to value the header of the HTTP
request (useful for MIME types)
Create a new XMLHttpRequest object
<script language="javascript“ type="text/javascript">
var request = new XMLHttpRequest();
</script>
Prof. Filippo Lanubile
Add support for Microsoft browsers
<script language="javascript" type="text/javascript">
var request = false;
var

request

=

false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch
(
failed
)

{
Prof. Filippo Lanubile
} ( ) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
Ajax in Action
• Sample 1: Break Neck Pizza
• Sample 2: Boards 'R' Us report
– XMLHttpRequest with responseText
• Sample 3: Boards 'R' Us report (expanded)
– XMLHttpRequest with responseXml
Prof. Filippo Lanubile
How Ajax Works
• Basics in
– HTML and CSS
– XML
– DOM
– JavaScript
– PHP
– XMLHttpRequest
• Sample 1: Break Neck Pizza
– XMLHttpRequest with
responseText
• Sample 2: Boards 'R' Us
report
– XMLHttpRequest with
responseText
S l 3 B d'R'U
Prof. Filippo Lanubile
• Tools
– Browser
• DOM Inspector
– Web server
• PHP v5

S
amp
l
e
3
:
B
oar
d
s
'R'

U
s
report (expanded)
– XMLHttpRequest with
responseXml
Make a request
1. Get data you need from the
HTML form
2. Build the URL to connect to
3. Open a connection to the
web server
4.Setup a callback function
Prof. Filippo Lanubile
4.

Setup

a

callback

function
5. Send the request
Try Break Neck Pizza
Source: Head First book
Make a request:
1. Get data you need from the HTML form
<bod
y
onLoad="document.forms[0].reset
()
;">
y ()
<p><img src="breakneck-logo.gif"
alt="Break Neck Pizza" /></p>
<form method="POST" action="placeOrder.php">
<p>Enter your phone number:
<input type="text" size="14“ name="phone" id="phone“
onChange="getCustomerInfo();" />
</p>
<p>Type your order in here:</p>
<p><textarea name="order" id="order"
//
Prof. Filippo Lanubile
rows="6" cols="50"><
/
textarea><
/
p>
<p>Your order will be delivered to:</p>
<p><textarea name="address" id="address"
rows="4" cols="50"></textarea></p>
<p><input type="submit" id="submit"
value="Order Pizza" /></p>
</form>
</body>
</html>
Make a request:
2. Build the URL to connect to
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "lookupCustomer.php?phone=" +
escape(phone);
...
Prof. Filippo Lanubile
Make a request:
3. Open a connection to the web server
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "lookupCustomer.php?phone=" +
escape(phone);
request.open("GET", url, true);
Prof. Filippo Lanubile
...
Make a request:
4. Setup a callback function
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "lookupCustomer.php?phone=" +
escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
Prof. Filippo Lanubile
...
Make a request:
5. Send the request
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "lookupCustomer.php?phone=" +
escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
Prof. Filippo Lanubile
request.send(null);
}
Handle the response
f ti d t P () {
f
unc
ti
on up
d
a
t
e
P
age
()

{
if (request.readyState == 4) {
if (request.status == 200) {
/* Get the response from the server */
var customerAddress = request.responseText;
/* Update the HTML web form */
document.
g
etElementB
y
Id
(
"address"
)
.value =
Prof. Filippo Lanubile
g y ( )
customerAddress;
} else
alert("Error! Request status is " +
request.status);
}
Boards 'R' Us report
• A web form that
b it t t
su
b
m
it
s reques
t
s
t
o a
PHP script
• The PHP script looks
up how many boards
have been sold
• The PHP script uses
the selling price and
the unit cost to update
Prof. Filippo Lanubile
profit
• The entire page is
reloaded just for two
changing numbers
Classic version
Reviewing the Boards ‘R’ Us HTML
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
</head>
<body>
<h1>Boards 'R' Us :: Custom Boards Report</h1>
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
<td><span id="boards-sold">1012</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="price">249.95</span></td></tr>
<tr><th>What it Costs Me</th>
Prof. Filippo Lanubile
<tr><th>What

it

Costs

Me</th>
<td>$<span id="cost">84.22</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">167718.76</span></h2>
<form method="GET" action="getUpdatedBoardSales.php">
<input value="Show Me the Money" type="submit" />
</form>
</div>
</body>
</html>
Reviewing the Boards ‘R’ Us PHP script (1)
<?php
// Start with an arbitrary number of boards sold
$totalSold = 1012;
// Reflect new sales
srand((double)microtime() * 1000000);
$totalSold = $totalSold + rand(0,1000);
$price = 249.95;
$cost = 84.22;
$cashPerBoard = $price - $cost;
$cash = $totalSold * $cashPerBoard;
?
>
Prof. Filippo Lanubile
?
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
</head>
<body>
<h1>Boards 'R' Us :: Custom Boards Report</h1>
...
Reviewing the Boards ‘R’ Us PHP script (2)
...
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
<td><span id="boards-sold">
<?php print $totalSold;?>
</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="price">
<?php print $price; ?>
</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="cost">
<?php print $cost; ?>
</span></td></tr>
Prof. Filippo Lanubile
</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">
<?php print $cash;?>
</span></h2>
<form method="GET" action="getUpdatedBoardSales.php">
<input value="Show Me the Money" type="submit" />
</form>
</div>
</body>
</html>
Use Ajax to fix the web report
1. Create a new object to make requests to the
server
– createRequest()
2. Write a JavaScript function to request new
board sales totals

getBoardsSold()
Prof. Filippo Lanubile
getBoardsSold()
3. Update report with new numbers using
JavaScript
– updatePage()
Ajax version
1. Create a new object to make requests to the server
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js"> </script>
<script language="javascript" type="text/javascript">
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
Prof. Filippo Lanubile
try

{
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Error creating request object!");
}
2. Write a JavaScript function to request new board
sales totals
function getBoardsSold() {
createRequest();
var url"
getUpdatedBoardSales
ajax php
";
var

url
=
"
getUpdatedBoardSales
-
ajax
.
php
";
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
<?php
// Start with an arbitrary number of boards sold
$totalSold = 1012;
// Reflect new sales
The new PHP script
Prof. Filippo Lanubile
srand((double)microtime() * 1000000);
$totalSold = $totalSold + rand(0,1000);
echo $totalSold;
?>
<form method="GET">
<input value="Show Me the Money" type="button"
onClick="getBoardsSold();" />
The new HTML form
3. Update report with new numbers using JavaScript
function updatePage() {
if ( t d St t 4) {
i f

(
reques
t
.rea
d
y
St
a
t
e ==
4)

{
var newTotal = request.responseText;
var boardsSoldEl = document.getElementById("boards-sold");
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, newTotal);
/* Figure out how much cash Katie has made */
var priceEl = document.getElementById("price");
var price = getText(priceEl);
var costEl = document.getElementById("cost");
var cost = getText(costEl);
hP B d i
t
Prof. Filippo Lanubile
var cas
hP
er
B
oar
d
= pr
i
ce - cos
t
;
var cash = cashPerBoard * newTotal;
/* Update the cash for the slopes on the form */
cash = Math.round(cash * 100) / 100;
replaceText(cashEl, cash);
}
Boards 'R' Us report (expanded)

This time there are

This

time

there

are

three numbers coming
from the server-side
script
– Snowboards sold
– Boot sold
– Bindings sold
Prof. Filippo Lanubile
Ajax version
Revisiting Boards ‘R’ Us HTML (1)
<html>
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css“ />
<script type="text/javascript" src="ajax.js"> </script>
<script type="text/javascript" src="text-utils.js"> </script>
<script type="text/javascript" src="boards.js"> </script>
</head>
<body>
<h1>Boards 'R' Us :: How Much Butt We're Kicking</h1>
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
Prof. Filippo Lanubile
<tr><th>Snowboards

Sold</th>
<td><span id="boards-sold">1672</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="boards-price">249.95</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="boards-cost">84.22</span></td></tr>
</table>
...
Revisiting Boards ‘R’ Us HTML (2)
...
<table>
<tr><th>Boots Sold</th>
<td><span id="boots-sold">312</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="boots-price">175.47</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="boots-cost">54.23</span></td></tr>
</table>
<table>
<tr><th>Bindings Sold</th>
<td><span id="bindings-sold">82</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="bindings-price">146.92</span></td></tr>
<tr><th>What it Costs Me</th>
Prof. Filippo Lanubile
<tr><th>What

it

Costs

Me</th>
<td>$<span id="bindings-cost">98.03</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">318936.42</span></h2>
<form method="GET">
<input value="Show Me the Money" type="button"
onClick="getNewTotals();" />
</form>
</div>
</body>
</html>
Revisiting Boards ‘R’ Us PHP script
<?php
// Start with an arbitrary number of sales
$bootsSold = 1672;
$boardsSold = 312;
$bindingsSold = 82;
// Reflect new sales
srand((double)microtime() * 1000000);
$bootsSold = $bootsSold + rand(0,10);
$boardsSold = $boardsSold + rand(0,5);
$bindingsSold = $bindingsSold + rand(0,3);
header(
"
Content
-
Type:text/xml
"
);
Prof. Filippo Lanubile
header( Content
Type:

text/xml );
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<totals>
<boards-sold><? echo $boardsSold; ?></boards-sold>
<boots-sold><? echo $bootsSold; ?></boots-sold>
<bindings-sold><? echo $bindingsSold; ?></bindings-sold>
</totals>
XML as a string XML as a tree of nodes
<?xml version="1.0" encoding="UTF-8"?>
<totals>
<boards-sold>1672</boards-sold>
<boots-sold>312</boots-sold>
<bindings-sold>82</bindings-sold>
</totals>
totals
boards-sold
1672
boots-sold
312
Prof. Filippo Lanubile
Node
Parent
Prev. Sibling Next Sibling
First Child Last Child
312
bindings-sold
82
Using responseXML in the JavaScript function (1)
function updatePage() {
if (request readyState
==
4) {
if

(request
.
readyState

4)

{
if (request.status == 200) {
// Get the updated totals from the XML response
var xmlDoc = request.responseXML;
var xmlBoards = xmlDoc.getElementsByTagName("boards-sold")[0];
var totalBoards = xmlBoards.firstChild.nodeValue;
var xmlBoots = xmlDoc.getElementsByTagName("boots-sold")[0];
var totalBoots = xmlBoots.firstChild.nodeValue;
var xmlBindings = xmlDoc.getElementsByTagName("bindings-sold")[0];
var totalBindings = xmlBindings.firstChild.nodeValue;
Prof. Filippo Lanubile
// Update the page with new totals
var boardsSoldEl = document.getElementById("boards-sold");
var bootsSoldEl = document.getElementById("boots-sold");
var bindingsSoldEl = document.getElementById("bindings-sold");
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, totalBoards);
replaceText(bootsSoldEl, totalBoots);
replaceText(bindingsSoldEl, totalBindings);
...
Using responseXML in the JavaScript function (2)
...
// Figure out how much cash Katie has made on boards
b d i l d l d("b d
i")
v a r
b
oar
d
sPr
i
ceE
l
=
d
ocument.getE
l
ementByI
d("b
oar
d
s-pr
i
ce
")
;
var boardsPrice = getText(boardsPriceEl);
var boardsCostEl = document.getElementById("boards-cost");
var boardsCost = getText(boardsCostEl);
var cashPerBoard = boardsPrice - boardsCost;
var cash = cashPerBoard * totalBoards;
// Figure out how much cash Katie has made on boots
var bootsPriceEl = document.getElementById("boots-price");
var bootsPrice = getText(bootsPriceEl);
var bootsCostEl = document.getElementById("boots-cost");
var bootsCost =
g
etText
(
bootsCostEl
)
;
Prof. Filippo Lanubile
g ( )
var cashPerBoot = bootsPrice - bootsCost;
var cash = cash + (cashPerBoot * totalBoots);
// Figure out how much cash Katie has made on bindings
var bindingsPriceEl = document.getElementById("bindings-price");
var bindingsPrice = getText(bindingsPriceEl);
var bindingsCostEl = document.getElementById("bindings-cost");
var bindingsCost = getText(bindingsCostEl);
var cashPerBinding = bindingsPrice - bindingsCost;
var cash = cash + (cashPerBinding * totalBindings);
...
Using responseXML in the JavaScript function (3)
...
//d h h f h l h b f
//
U p
d
ate t
h
e cas
h

f
or t
h
e s
l
opes on t
h
e we
b

f
orm
cash = Math.round(cash * 100) / 100;
replaceText(cashEl, cash);
} else {
var message = request.getResponseHeader("Status");
if ((message.length == null) || (message.length <= 0)) {
alert("Error! Request status is " + request.status);
} else {
alert(message);
}
}
}
Prof. Filippo Lanubile
}
}
Ajax frameworks
Provide all the required functions, server side and client
side, for the Ajax engine
• JavaScript-based client-side frameworks
– Es. Dojo toolkit
• Server-side frameworks

PHP frameworks
Prof. Filippo Lanubile
• Es. Sajax
– Java frameworks
• Es. Google Web Toolkit (GWT)
–.NET frameworks
• Es. ASP.Net Ajax
Pros and Cons

/

• 䥮瑥牡It楶楴i
– make web pages feel more
responsive to user actions
• Established technologies (no
browser plug-in)
– HTML, CSS, DOM, XML from
W3C

JavaScript is an
/
• 䉲潫敮B數灥捴敤⁢敨慶楯爠潦e
瑨攠扲潷獥犒猠䉡捫B扵瑴潮
• 乥敤N瑯⁤敡氠睩瑨⁤楦晥牥湴w
業灬敭敮瑡瑩潮猠楮i摩晦敲敮琠
扲潷獥牳⁡湤b灬慴景牭p
– In MS IE 6, XMLHttpRequest
is an ActiveX

In Mozilla XMLHttpRequest
Prof. Filippo Lanubile
JavaScript

is

an

implementation of
ECMAScript, from ECMA
– XMLHttpRequest is now a
W3C draft specification
In

Mozilla
,
XMLHttpRequest

is a native JavaScript object
• Accessibility
– Need to provide fallback
options to comply with WAI
accessibility guidelines
Alternatives to Ajax for interactive web applications
• Adobe
– Flash: browser plugin for playing interactive movies using a
compressed vector graphics format

AIR: runtime engine that executes JavaScript and Flash outside the
browser
– Flex: programming environment for creating Flash and AIR
applications
• Sun
– Applet Java: slow and legacy
– Java Web Start: downloadable client out of the browser
– JavaFX: scripted apps run inside their containers or on the browser
via
plugin
via

plugin
• Mozilla
– XML User Interface Language (XUL)
• Microsoft
– Silverlight: cross-browser, cross.platform, cross-device plugin
• supports .NET, JavaScript and XAML (Extensible Application Markup
Language)
Prof. Filippo Lanubile
Selected Readings
• Original article
– Garrett JJ, “Ajax: A New Approach to Web Applications”, February 2005
http://www.adaptivepath.com/publications/essays/archives/000385.php
IEEE CS

IEEE

CS
pape
r
– Paulson LD, "Building Rich Web Applications with Ajax," Computer, 38(10),pp.
14-17,October 2005
– Lawton, G. 2008. New Ways to Build Rich Internet Applications. Computer 41, 8
(Aug. 2008), 10-12. DOI= http://dx.doi.org/10.1109/MC.2008.302
• developerWorks
– Brett McLaughlin, Mastering Ajax -
http://www-128.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax
• Books

McLau
g
hlin B, Head Rush A
j
a
x
,
Prof. Filippo Lanubile
g
j
O’Reilly, March 2006, 446 pages
•Sample code at Head First Labs
http://www.h eadfirstlabs.com/books/hrajax/
– Crane D, Pascarello E, James D,
Ajax in Action, Manning Pub.,
October 2005, 680 pages
• Wiki – http://ajaxpatterns.org/
• Blog - http://ajaxian.com/