microsoft powerpoint - ajax [modalità compatibilità]
TRANSCRIPT
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)
Ajax is part of Web 2.0• Second generation of
web applications• Web 2.0 gives users an
experience closer to desktop applications
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 interfaceClassic 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 Lanubileserver-side systems
web server
datastores, backendprocessing, legacy systems
server-side systems
web server
datastores, backendprocessing, legacy systems
XML data
Source: Adaptive Path
Prof. Filippo LanubileClassic search engine
Prof. Filippo LanubileAjax search engine
Prof. Filippo LanubileClassic web mail
Prof. Filippo LanubileAjax web mail
Prof. Filippo LanubileClassic mapping site
Prof. Filippo LanubileAjax mapping site
Core technologiesAjax is a group of technologies bundled togetherAjax 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: Attributeschanges from 0 to 4
readyStatestatusresponseTextresponseXmlonreadystatechange
XMLHttpRequest
changes from 0 to 4 0: Unitialized. 1: Open. 2: Sent. 3: Receiving. 4: Loaded.
Status code in HTTP Reply200 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 greply 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 connectionmethod: type of HTTP request
(GET or POST)uri: the location of the resource async: true (default) / false
Send a request to the server
Prof. Filippo Lanubile
Se d a equest to t e se edata: 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
responseTextS l 3 B d 'R' U
Prof. Filippo Lanubile
• Tools– Browser
• DOM Inspector– Web server
• PHP v5
• Sample 3: Boards 'R' Us report (expanded)– XMLHttpRequest with
responseXml
Make a request
1. Get data you need from the HTML form
2. Build the URL to connect to3. Open a connection to the
web server4. Setup a callback function
Prof. Filippo Lanubile
4. Setup a callback function5. Send the request
Try Break Neck Pizza Source: Head First book
Make a request: 1. Get data you need from the HTML form<body 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 responsef ti d t P () {function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
/* Get the response from the server */
var customerAddress = request.responseText;
/* Update the HTML web form */
document.getElementById("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 tsubmits requests to 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 salessrand((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 JavaScriptfunction updatePage() {
if ( t d St t 4) {if (request.readyState == 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 cashPerBoard = price - cost;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 LanubileAjax 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 salessrand((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 responsevar 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 totalsvar 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 boardsb d i l d l d("b d i ")var boardsPriceEl = document.getElementById("boards-price");
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 bootsvar bootsPriceEl = document.getElementById("boots-price");var bootsPrice = getText(bootsPriceEl);var bootsCostEl = document.getElementById("boots-cost");var bootsCost = getText(bootsCostEl);
Prof. Filippo Lanubile
g ( )var cashPerBoot = bootsPrice - bootsCost;var cash = cash + (cashPerBoot * totalBoots);
// Figure out how much cash Katie has made on bindingsvar 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// Update the cash for the slopes on the web formcash = 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☺☺• Interactivity
– make web pages feel more responsive to user actions
• Established technologies (no browser plug-in)– HTML, CSS, DOM, XML from
W3C– JavaScript is an
• Broken expected behavior of the browser’s Back button
• Need to deal with different implementations in different browsers and platforms– 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 pluginvia 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 paper– 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– McLaughlin B, Head Rush Ajax,
Prof. Filippo Lanubile
g jO’Reilly, March 2006, 446 pages
• Sample code at Head First Labshttp://www.headfirstlabs.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/