Ajax: The Basics Ajax: The Basics Part II

24
© 2010 Marty Hall Ajax: The Basics Ajax: The Basics Part II Originals of Slides and Source Code for Examples: http://courses.coreservlets.com/Course-Materials/ajax.html Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. © 2010 Marty Hall For live Ajax & GWT training, see training t htt // lt / courses at http://courses.coreservlets.com/. Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at your organization. C d l d dt ht b M t H ll Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. Courses developed and taught by Marty Hall 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 courses can concentrate on 1 library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo, Google Closure) or survey several Courses developed and taught by coreservlets.com experts (edited by Marty) Spring, Hibernate/JPA, EJB3, Web Services, Ruby/Rails Contact [email protected] for details

description

 

Transcript of Ajax: The Basics Ajax: The Basics Part II

Page 1: Ajax: The Basics Ajax: The Basics Part II

© 2010 Marty Hall

Ajax: The BasicsAjax: The BasicsPart II

Originals of Slides and Source Code for Examples:http://courses.coreservlets.com/Course-Materials/ajax.html

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

© 2010 Marty Hall

For live Ajax & GWT training, see training t htt // l t /courses at http://courses.coreservlets.com/.

Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held

on-site at your organization.C d l d d t ht b M t H ll

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

• Courses developed and taught by Marty Hall– 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 courses can concentrate on 1 library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo, Google Closure) or survey several

• Courses developed and taught by coreservlets.com experts (edited by Marty)– Spring, Hibernate/JPA, EJB3, Web Services, Ruby/Rails

Contact [email protected] for details

Page 2: Ajax: The Basics Ajax: The Basics Part II

Topics in This Section

• Sending GET data• Reading textfield values• Sending POST data• Ajax toolkits and libraries• Ajax books

5

© 2010 Marty Hall

Sending GET Data

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

Page 3: Ajax: The Basics Ajax: The Basics Part II

Servlet Example: Design DeficienciesDesign Deficiencies

• No data sent from HTML page to servlet– Solution: attach data to end of the URL (GET data)

• Use normal GET format: – mainaddress?var1=val1&var2=val2mainaddress?var1 val1&var2 val2

• Notes– In next examples we will get data from input fields, but

for now we will embed it directly in the URL– If you have an "&" in a URL in xhtml, you are required toIf you have an & in a URL in xhtml, you are required to

replace it with "&"– To read the data on the server, servlet does

t tP t lrequest.getParameter as usual

7

Steps

• JavaScriptDefine an object for sending HTTP requests– Define an object for sending HTTP requests

– Initiate request• Get request object• Designate an anonymous response handler function• Designate an anonymous response handler function • Initiate a GET or POST request to a servlet

– URL has GET data attached to the end

– Handle responseHandle response• Wait for readyState of 4 and HTTP status of 200• Extract return text with responseText or responseXML• Use innerHTML to insert result into designated elementUse innerHTML to insert result into designated element

• HTML– Load JavaScript from centralized directory

Designate control that initiates request– Designate control that initiates request– Give ids to input elements– Define a blank placeholder element with a known id

8

Page 4: Ajax: The Basics Ajax: The Basics Part II

Define a Request Object

function getRequestObject() {if (window.XMLHttpRequest) {

return(new XMLHttpRequest());return(new XMLHttpRequest());} else if (window.ActiveXObject) {

return(new ActiveXObject("Microsoft.XMLHTTP"));} l {} else {

return(null); }

}No changes from version in previous section.The getRequestObject function stays the samein all sections.

9

Initiate Request

function ajaxResult(address resultRegion) {function ajaxResult(address, resultRegion) {var request = getRequestObject();request.onreadystatechange =

function() { showResponseText(requestfunction() { showResponseText(request, resultRegion); };

request.open("GET", address, true);request.send(null);request.send(null);

}

No changes from version of ajaxResult in previous section.The difference is the address, but the address gets passedin from the HTML page.

10

Page 5: Ajax: The Basics Ajax: The Basics Part II

Handle Response

function showResponseText(request, resultRegion) {if ((request readyState == 4) &&if ((request.readyState == 4) &&

(request.status == 200)) {htmlInsert(resultRegion, request.responseText);

}}}

function htmlInsert(id, htmlData) {function htmlInsert(id, htmlData) {document.getElementById(id).innerHTML = htmlData;

}

Changed slightly from previous section: now uses htmlInsert helper function

11

htmlInsert helper function.

HTML Code

......<fieldset>

<legend>Sending Fixed GET Data, Result Shown in HTML

</legend><input type="button" value="Show Chicago Time"

onclick='ajaxResult("show-time-in-city?city=Chicago"( show-time-in-city?city=Chicago ,"chicago-time")'/>

<div id="chicago-time"></div></fieldset>...

12

Page 6: Ajax: The Basics Ajax: The Basics Part II

Servlet Code

• Servlet reads the “city” parameter– Uses this to determine time zone– Unknown or missing city results in error message

Servlet generates HTML markup• Servlet generates HTML markup– Rather than returning an ordinary string to be inserted

into the div, returns text containing xhtml tags, g g• Provides more control over the final result• Remember to be check that the final result is legal in xhtml

Tags should be lowercase– Tags should be lowercase

– Be aware of nesting rules (e.g., block-level elements allowed inside div and td, but only inline elements allowed inside p or span)

13

Servlet Code

public class ShowTimeInCity extends HttpServlet {public void doGet(HttpServletRequest request,p ( p q q ,

HttpServletResponse response)throws ServletException, IOException {

response.setHeader("Cache-Control", "no-cache");response setHeader("Pragma" "no cache");response.setHeader("Pragma", "no-cache");PrintWriter out = response.getWriter();String cityName = request.getParameter("city");String message = CityUtils.getTime(cityName);if (message.startsWith("In")) { // Found citymessage = String.format("<hr/><h2>%s</h2><hr/>", message);

} else { // No city or unknown city} else { // No city or unknown citymessage = String.format("<h2 class='error'>%s</h2>", message);

}out.print(message);

}}

14

Page 7: Ajax: The Basics Ajax: The Basics Part II

CityUtils Class

• Maintains a table of cities and associated time zones (populations also used later)time zones (populations also – used later)– Given the name of a city, it finds the difference in hours

between that city's time and server time (east coast USA)• Computes server time

– Using standard GregorianCalendar class• Converts to time in that city• Converts to time in that city

– By calling the “add” method with the time zone offset• Formats the time and dayy

– Using String.format with %tr and %tD

– Reminder: full source code is online• http://courses.coreservlets.com/Course-Materials/ajax.html15

Sending GET Data: Results

16

Page 8: Ajax: The Basics Ajax: The Basics Part II

© 2010 Marty Hall

Reading User InputReading User Input(and Embedding it

i GET D t )in GET Data)

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

GET Example: Design Deficiencies

• City name was always Chicago– Solution: send user data

• Give an id to textfield– <input type="text" id="someID"/>p yp

– The id is not the same as the textfield name. The name is used only in regular form submissions, which does not apply to Ajax.

• Read data from textfield– document.getElementById(someID).value

• Textfields can have spaces and other characters that are illegal in URLscharacters that are illegal in URLs– Solution: filter (escape) textfield data

• Call "escape" to convert spaces and other special chars• Put result into the GET data• Request URL with embedded GET data

18

Page 9: Ajax: The Basics Ajax: The Basics Part II

Summary of New Features

• Read a textfield valueuserInput = document getElementById(someID) value;– userInput = document.getElementById(someID).value;

• The value property works for textfields and most other input elements. But for radio buttons and checkboxes, the value is either "on" or empty. We will show examples of this later.

• Escape spaces and other special characters– userInput = escape(userInput);

• Put data into the URL– url = baseURL + "?someName=" + userInput;

• For multiple input elements, put "&" between name/value pairs.

• Send out request and process resultq p– No changes from previous examples

• Helper functionfunction getValue(id) {function getValue(id) {return(escape(document.getElementById(id).value));

}19

Steps

• JavaScript– Define an object for sending HTTP requestsDefine an object for sending HTTP requests– Initiate request

• Get request object• Designate an anonymous response handler function • Initiate a GET or POST request to a servlet

– URL has GET data attached to the end

– Data based on document.getElementById(id).value of some textfield

Handle response– Handle response• Wait for readyState of 4 and HTTP status of 200• Extract return text with responseText or responseXML• Use innerHTML to insert result into designated element

• HTML– Load JavaScript from centralized directory– Designate control that initiates request– Give ids to input elements– Defines a blank placeholder element with a known id

20

Page 10: Ajax: The Basics Ajax: The Basics Part II

Define a Request Object

function getRequestObject() {if (window.XMLHttpRequest) {

return(new XMLHttpRequest());return(new XMLHttpRequest());} else if (window.ActiveXObject) {

return(new ActiveXObject("Microsoft.XMLHTTP"));} l {} else {

return(null); }

}No changes from previous examples

21

Initiate Request

function showTimeInCity(inputField, resultRegion) {var baseAddress = "show-time-in-city";var baseAddress show time in city ;var data = "city=" + getValue(inputField);var address = baseAddress + "?" + data;ajaxResult(address, resultRegion);

}

function ajaxResult(address, resultRegion) {var request = getRequestObject();var request = getRequestObject();request.onreadystatechange =

function() { showResponseText(request, resultRegion); };g ) }

request.open("GET", address, true);request.send(null);

}.The ajaxResult function is unchanged from previous example.

function getValue(id) {return(escape(document.getElementById(id).value));

}22

Page 11: Ajax: The Basics Ajax: The Basics Part II

Handle Response

function showResponseText(request, resultRegion) {if ((request readyState == 4) &&if ((request.readyState == 4) &&

(request.status == 200)) {htmlInsert(resultRegion, request.responseText);

}}}

N h f i lNo changes from previous example

23

HTML Code

...<fieldset><fieldset>

<legend>Sending Dynamic GET Data, Result Shown in HTML

</legend>g<label>City: <input type="text" id="city-1"/></label><br/><input type="button" value="Show City Time"

onclick='showTimeInCity("city-1","city-1-time")'/>

<div id="city-1-time"></div></fi ld t></fieldset>...

24

Page 12: Ajax: The Basics Ajax: The Basics Part II

Style Sheet Code

h2 { color: #440000;font weight: bold;font-weight: bold;font-size: 18px;font-family: Arial, Helvetica, sans-serif;

}}.error { background-color: yellow;

color: red;f t i ht b ldfont-weight: bold;font-size: 20px;font-family: Arial, Helvetica, sans-serif;b d t l i tborder-style: inset;

}

25

Servlet Code

public class ShowTimeInCity extends HttpServlet {public void doGet(HttpServletRequest request,p ( p q q ,

HttpServletResponse response)throws ServletException, IOException {

response.setHeader("Cache-Control", "no-cache");response setHeader("Pragma" "no cache");response.setHeader("Pragma", "no-cache");PrintWriter out = response.getWriter();String cityName = request.getParameter("city");String message = CityUtils.getTime(cityName);if (message.startsWith("In")) { // Found citymessage = String.format("<hr/><h2>%s</h2><hr/>", message);

} else { // No city or unknown city} else { // No city or unknown citymessage = String.format("<h2 class='error'>%s</h2>", message);

}out.print(message);

}}

26

No changes from previous example

Page 13: Ajax: The Basics Ajax: The Basics Part II

Reading User Input: Results (Good Data)(Good Data)

27

Reading User Input: Results (Bad Data)(Bad Data)

28

Page 14: Ajax: The Basics Ajax: The Basics Part II

© 2010 Marty Hall

Sending POST Data

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

GET vs. POST

• In normal Web pages, there are compelling f h i POST GETreasons for choosing POST or GET

• POST– URL is simpler– Data is hidden from people looking over your shoulder– Larger amounts of data can be sent– Can send special characters (e.g., in uploaded files)– Should always be used if the requests changes data on server

• GET– Can bookmark results page

With Aj d d ’t URL• With Ajax, end users don’t see URL, so choice is relatively arbitrary – Unless there is a very large amount of data or the request– Unless there is a very large amount of data or the request

changes the server state, in which case POST is preferred• Some JS libraries use GET by default, others use POST

30

Page 15: Ajax: The Basics Ajax: The Basics Part II

Sending POST Data in JavaScript

• Collect data from form– Give ids to input elements

<input type="text" id="some-id"/>

– Read datavar value1 = document.getElementById("some-id").value;

– URL-encode data and form into query stringvar data = "var1=" + escape(value1);var data = var1= + escape(value1);

• Specify POST instead of GET for “open”request.open("POST", address, true);

S if f di• Specify form encoding typerequest.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");pp )

• Supply data in "send"request.send(data);

31

Steps

• JavaScript– Define an object for sending HTTP requestsDefine an object for sending HTTP requests– Initiate request

• Get request object• Designate an anonymous response handler function • Initiate a POST request to a servlet

– Put POST data in the send method– Data based on document.getElementById(id).value of some textfield

Handle response– Handle response• Wait for readyState of 4 and HTTP status of 200• Extract return text with responseText or responseXML• Use innerHTML to insert result into designated elementg

• HTML– Load JavaScript from centralized directory– Designate control that initiates request– Give ids to input elements– Define a blank placeholder element with a known id

32

Page 16: Ajax: The Basics Ajax: The Basics Part II

Define a Request Object

function getRequestObject() {if (window.XMLHttpRequest) {

return(new XMLHttpRequest());return(new XMLHttpRequest());} else if (window.ActiveXObject) {

return(new ActiveXObject("Microsoft.XMLHTTP"));} l {} else {

return(null); }

}No changes from previous examples

33

Initiate Request

function showTimeInCityPost(inputField, resultRegion) {var address = "show-time-in-city";var address show time in city ;var data = "city=" + getValue(inputField);ajaxResultPost(address, data, resultRegion);

}

function ajaxResultPost(address, data, resultRegion) {var request = getRequestObject();request onreadystatechange =request.onreadystatechange =

function() { showResponseText(request, resultRegion); };

request.open("POST", address, true);q p ( , , )request.setRequestHeader

("Content-Type", "application/x-www-form-urlencoded");

t d(d t )request.send(data);}

34

Page 17: Ajax: The Basics Ajax: The Basics Part II

Handle Response

function showResponseText(request, resultRegion) {if ((request readyState == 4) &&if ((request.readyState == 4) &&

(request.status == 200)) {htmlInsert(resultRegion, request.responseText);

}}}

N h f i lNo changes from previous example

35

HTML Code

...<fieldset><fieldset>

<legend>Sending Dynamic POST Data, Result Shown in HTML

</legend>g<label>City: <input type="text" id="city-2"/></label><br/><input type="button" value="Show City Time"

onclick='showTimeInCityPost("city-2","city-2-time")'/>

<div id="city-2-time"></div></fi ld t></fieldset>...

36

Page 18: Ajax: The Basics Ajax: The Basics Part II

Servlet Code

public class ShowTimeInCity extends HttpServlet {public void doGet(HttpServletRequest request,public void doGet(HttpServletRequest request,

HttpServletResponse response)throws ServletException, IOException {

// Shown in previous examplesp p}

public void doPost(HttpServletRequest request,HttpServletResponse response)

throws ServletException, IOException {doGet(request, response);

}}}

37

No changes from previous example

Reading User Input: Results (Good Data)(Good Data)

38

Page 19: Ajax: The Basics Ajax: The Basics Part II

Reading User Input: Results (Bad Data)(Bad Data)

39

© 2010 Marty Hall

Ajax ToolkitsAjax Toolkits and Libraries

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

Page 20: Ajax: The Basics Ajax: The Basics Part II

Client-Side Tools (JavaScript Libraries with Ajax Support)(JavaScript Libraries with Ajax Support)

• jQueryhtt //j /– http://jquery.com/

• Prototype– http://www.prototypejs.org/

• script.aculo.us– http://script.aculo.us/

• Dojo• Dojo– http://www.dojotoolkit.org/

• Ext-JS– http://extjs.com/

• Yahoo User Interface Library (YUI)– http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/

• Google Closure Library– http://code.google.com/closure/library/

41

Preview of Coming Attractions: Ajax with and without ToolkitsAjax with and without Toolkits

• With basic JavaScriptfunction 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);

}42

Page 21: Ajax: The Basics Ajax: The Basics Part II

Preview of Coming Attractions: Ajax with and without ToolkitsAjax with and without Toolkits

• Prototype (handler passed response object)new Ajax.Request("address",

{onSuccess: handlerFunct});

• jQuery (handler passed response text)jQuery (handler passed response text)$.ajax({url: "address",

success: handlerFunct});

E (h dl d bj )• Ext (handler passed response object)Ext.Ajax.request({url: "address",

success: handlerFunct});success: handlerFunct});

• Dojo (handler passed response text)dojo.xhrGet({url: "address",

load: handlerFunct});

43

Server-Side Tools

• Direct Web Remoting– Lets you call Java methods semi-directly from JavaScript– http://getahead.ltd.uk/dwr/

• JSON/JSON RPC• JSON/JSON-RPC– For sending data to/from JavaScript with less parsing– http://www.json.org/p j g– http://json-rpc.org/

44

Page 22: Ajax: The Basics Ajax: The Basics Part II

Hybrid Client/Server Tools

• JSP custom tag librariesC t t th t t HTML d J S i t– Create tags that generate HTML and JavaScript

– http://courses.coreservlets.com/Course-Materials/msajsp.html

• AjaxTags (built on top of script.aculo.us)– JSP custom tags that generate Ajax functionality

• Supports many powerful Ajax capabilities with very simpleSupports many powerful Ajax capabilities with very simple syntax

• http://ajaxtags.sourceforge.net

• Google Web ToolkitGoogle Web Toolkit– Write code in Java, translate it to JavaScript

• http://code.google.com/webtoolkit/Al htt // j 4j f d j t/– Also see https://ajax4jsf.dev.java.net/

• GWT/JSF Integration Toolkit

45

JSF-Based Tools

• Trinidad (formerly Oracle ADF)http://myfaces apache org/trinidad/– http://myfaces.apache.org/trinidad/

• Tomahawk– http://myfaces.apache.org/tomahawk/

Aj 4JSF ( d Ri hF )• Ajax4JSF (and RichFaces)– http://labs.jboss.com/jbossajax4jsf/

• IceFaces– http://www.icefaces.org/

• Backbase Ajax/JSF Library– http://www.backbase.com/products/enterprise-ajax-for-jsf/overview/p p p j j– Main version is not free, but scaled-down community version is free

• Infragistics NetAdvantage– http://www.infragistics.com/java/netadvantage/ (not free)p g j g ( )

• JSF 2.0 has integrated Ajax support– http://www.coreservlets.com/JSF-Tutorial/

46

Page 23: Ajax: The Basics Ajax: The Basics Part II

Books (In Rough Order of Preference)(In Rough Order of Preference)

• Ajax in Practice– Crane et al. Manning.Crane et al. Manning.

• JavaScript: The Definitive Guide– Flanagan. O'Reilly.

• Foundations of Ajax– Asleson and Schutta. APress.

• Ajax in Action– Crane, Pascarello, and James. Manning.

GWT i A ti• GWT in Action– Hanson and Tacy. Manning.

• Pro JSF and Ajax– Jacobi and Fallows APressJacobi and Fallows. APress.

• Prototype and Scriptaculous in Action– Crane et al. Manning.

• Pro Ajax and Java Frameworksj– Schutta and Asleson. APress.

• Professional Ajax, Second Edition– Zakas, et al. Wrox. 47

© 2010 Marty Hall

Wrap-up

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

Page 24: Ajax: The Basics Ajax: The Basics Part II

Summary

• JavaScript– Define request objectDefine request object

• Check for both Microsoft and non-MS objects. Identical in all apps.– Initiate request

• Get request object• Designate an anonymous response handler function• Designate an anonymous response handler function • Read user data with getElementById(id).value, then escape it• Initiate a GET or POST request

– If POST, set Content-Type and put data in send method– If GET, append data on end of address after "?", pp

– Handle response• Wait for readyState of 4 and HTTP status of 200• Extract return text with responseText• Do something with resultDo something with result

– Use innerHTML to insert result into designated element

• HTML– Give ids to input elements and to result region. Initiate process.

J• Java– Use JSP, servlet, or combination (MVC) as appropriate.– Prevent browser caching.

49

© 2010 Marty Hall

Questions?

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x, JSF 2.0, Struts, Ajax, GWT 2.0, GXT, Spring, Hibernate/JPA, Java 5, Java 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.