The Prototype Framework Part I: Ajax Support

29 Pages·2010·1.6 MB·English

© 2010 Marty Hall
The Prototyyppe Framework
Part I: Ajax Support
((Prototyyppe 1.6 Version))
Originals of Slides and Source Code for Examples:
httpp://courses.coreservlets.com/Course-Materials/ajjax.html
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at yourlocation.
© 2010 Marty Hall
For live Ajax & GWT training, see training
courses att hhttttp:////courses.coreservlletts.com//.
Taught by the author of Core Servlets and JSP,
MMoorree SSeerrvvlleettss aanndd JJSSPP, aanndd tthhiiss ttuuttoorriiaall. AAvvaaiillaabbllee aatt
public venues, or customized versions can be held
on-site at your organization.
•CCourses ddevellopedd andd ttaughhtt bby MMartty HHallll
–Java 6, servlets/JSP (intermediate and advanced), Struts, JSF 1.x, JSF 2.0, Ajax, GWT 2.0 (with GXT), custom mix of topics
–Ajax coCursuess tcoanm coiznceednt rJatae vona 1 E libEra rTy (rjQauienryi,n Pgro:t ohtytptep/S:c/r/ipctaocuulrousse, sE.xct-oJSr,e Dsoejor, vGloeotgsle. cColomsur/e) or survey several
•Courses developed and taught by coreservlets.com experts (edited by Marty)
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
–Spring, Hibernate/JPA, EJB3, Web Services, Ruby/Rails
Developed and taught by well-kCnoonwtanc atu hthalol@r acnodr edseevrevlloeptse.rc. oAmt pfoubr ldice tvaeilnsues or onsite at yourlocation.
Topics in This Section
• Overview of Prototype
• Installation and documentation
• Ajax.Request
– Basics
– Options
•• HHTTMMLL llooookkuupp aanndd iinnsseerrttiioonn
• Ajax.Updater
•• AAjjaaxx.PPeerriiooddiiccaallUUppddaatteerr
• Handling JSON Data
•• CCoommppaarriinngg AAjjaaxx ssuuppppoorrtt ttoo ootthheerr lliibbrraarriieess
– jQuery, Dojo, Ext-JS
5
© 2010 Marty Hall
Introduction
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at yourlocation.
Overview of Prototype
• Ajax utilities
– Ajax.Request, Ajax.Updater, Ajax.PeriodicalUpdater
– Wraps response in Ajax.Response
•• SSeevveerraall nneeww pprrooppeerrttiieess, bbuutt eessppeecciiaallllyy rreessppoonnsseeJJSSOONN
• General DOM utilities
– $$(()) to find element
– $F() to get form value
– element.update() to put into innerHTML
– Many helpers in Element class
• General utilites
– EExttensiions ffor CCllass, FFuncttiion, AArray, SSttriing
7
Ajax Utilities
• Ajax.Request
– TTakkes UURRLL andd optiions obbjject ((onSSuccess andd
parameters properties).
– Calls URL, passes result (Ajax.Response) to onSuccess
• Ajax.Updater
– Takes id of result region and URL.
– IInnvvookkeess UURRLL oonnccee aanndd ppuuttss rreessppoonnsseeTTeexxtt iinn rreessuulltt rreeggiioonn
• Ajax.PeriodicalUpdater
– Takes id of result reggion,, URL,, opptions objject with
“frequency” property. Can call “stop” on updater later.
• Ajax.Response
– PPaasssseedd ttoo rreessppoonnssee hhaannddlleerr ffuunnccttiioonnss
– properties: responseText, responseXML, responseJSON
8
Downloading and Installation
• Download
– hhttp:////www.prototypejjs.org//ddownlloadd
• Download a single .js file (e.g., prototype-1.6.02.js)
– Recommend renaming to prototype.js to simplify later upgrades
• TThhiis ttuttoriiall correspondds tto PProttottype 11.66
• Online API
– httpp://www.pprototyyppejjs.orgg/appi
• Tips and Tutorials
– http://www.prototypejs.org/learn
• BBrowser CCompattiibbiilliitty
– Firefox: 1.5 or later
– IInntteerrnneett EExxpplloorreerr:: 66..00 oorr llaatteerr ((ddooeess nnoott wwoorrkk iinn IIEE 55..55!!))
– Safari: 2.0 or later
– Opera: 9.25 or later
9
Industry Usage
A significant number of matches to “prototype and JavaScript” were false positives such as “build a
prototype with JavaScript”. So, discount the Prototype graph by about 20-40%.
10
© 2010 Marty Hall
AAjjaaxx.RReeqquueesstt::
Basics
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at yourlocation.
Ajax.Request: Basic Syntax
• new Ajax.Request(relative-url, options)
– CCalllls rellatiive-urll, wraps response iin AAjjax.RReponse,
passes response to function specified in options
• Note it is “new Ajax.Request(...)”, not “Ajax.Request(...)”
• Options
– An anonymous object
– MMoosstt iimmppoorrttaanntt pprrooppeerrttyy:: oonnSSuucccceessss
• Basic example
– new Ajax.Request(
"some-ffiille.jjsp",
{onSuccess: someHandlerFunction});
– someHandlerFunction should take one argument of type
AAjjaaxx.RReessppoonnssee.
– It is automatically wrapped in anonymous function with local copy
of request object, so it is threadsafe.
12
Data-Centric Ajax with and
wwiitthhoouutt TToooollkkiittss
• With basic JavaScript
function getRequestObject() {
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else { return(null); }
}
function sendRequest() {
var request = getRequestObject();
request.onreadystatechange =
function() { someFunct(request); };
request.open("GET", "some-url", true);
request.send(null);
}
13
Data-Centric Ajax with and
wwiitthhoouutt TToooollkkiittss
• jQuery (handler passed response text)
$.ajax({url: "address",
success: handlerFunct});
• PPrroottoottyyppee ((hhaannddlleerr ppaasssseedd rreessppoonnssee oobbjjeecctt))
new Ajax.Request("address",
{onSuccess: handlerFunct});
• Ext (handler passed response object)
Ext.Ajax.request({url: "address",
success: handlerFunct});
• Dojo (handler passed response text)
ddojjo.xhhrGGett(({{urll: ""addddress"",
load: handlerFunct});
14
Ajax.Request Example Code:
JJaavvaaSSccrriipptt
function showTime1() {
nneeww AAjjaaxx.RReeqquueesstt((
"show-time.jsp",
{ onSuccess: showAlert });
} TThhiis iis a PProttottype AAjjax.RResponse obbjjectt,
not the raw XmlHttpRequest.
function showAlert(response) {
alert(response.responseText);
}
15
Ajax.Request Example Code:
HHTTMMLL
...
<<hheeaadd>><<ttiittllee>>PPrroottoottyyppee aanndd AAjjaaxx<<//ttiittllee>>...
<script src="./scripts/prototype.js"
type="text/javascript"></script>
<script src=".//scripts//prototype-examples.js"
type="text/javascript"></script>
</head>
<body>...
<fieldset>
<leggend>Ajjax.Reqquest: Basics<//leggend>
<form action="#">
<input type="button" value="Show Time"
oonncclliicckk=='sshhoowwTTiimmee11(())'//>>
</form>
</fieldset>
16
Ajax.Request Example Code:
JJSSPP
It is now <%= new java.util.Date() %>
17
Ajax.Request: Results
18
© 2010 Marty Hall
AAjjaaxx.RReeqquueesstt::
Passingg Parameters
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at yourlocation.
Ajax.Request Options
{{ pprrooppeerrttyy11:: vv11, pprrooppeerrttyy22:: vv22...}}
• The second arg is an anonymous object with these
aass tthhee mmoosstt iimmppoorrttaanntt pprrooppeerrttiieess
– onSuccess (default: none)
• Response handler function (takes Ajax.Response as arg)
• TThheerree aarree aallssoo mmaannyy ssiimmiillaarr rreellaatteedd ooppttiioonnss:: oonnCCoommpplleettee,
onFailure, onException, onXYX (for HTTP status codes)
– parameters (default: empty string)
• Can be explicit parameter string: "p1=val1&p2=val2"
• Can also be parameter object: {p1: val1, p2: val2}
– Values will be escaped automatically
– asynchronous (default: true)
– mmeetthhoodd ((ddeeffaauulltt:: ppoosstt))
– evalJS (default: true)
• Response text passed to “eval” if response type is
apppplication/jjavascrippt or a similar tyyppe
– evalJSON (default: true)
• Response text passed to eval (with parens added) and sent to
responseJSON if response type is application/json
20
Ajax.Request Parameters
EExxaammppllee CCooddee:: JJaavvaaSSccrriipptt
function showParams1() {
nneeww AAjjaaxx.RReeqquueesstt((
"show-params.jsp",
{ onSuccess: showAlert,
parameters: "param1=foo&param2=bar" });
}
function showAlert(response) {
alert(response.responseText);
}}
21
Ajax.Request Parameters
EExxaammppllee CCooddee:: HHTTMMLL aanndd JJSSPP
<fieldset>
<<lleeggeenndd>>AAjjaaxx.RReeqquueesstt::
The 'parameters' Option</legend>
<form action="#">
<input type="button" value="Show Params"
onclick='showParams1()'/>
</form>
</fieldset>
22