Doris AJAX presentation for singapore
-
Upload
sampetruda -
Category
Documents
-
view
1.055 -
download
0
Transcript of Doris AJAX presentation for singapore
![Page 1: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/1.jpg)
Web-tier Programming Codecamp II : AJAX
Inyoung ChoTechnology EvangelistSun Microsystems, Inc.
![Page 2: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/2.jpg)
Goal
Learn how to architect and build rich web applications using AJAX and J2EE™ technologies.
![Page 3: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/3.jpg)
Agenda• What is AJAX?• AJAX Anatomy• AJAX Guidelines• AJAX Consideration and Gotchas• Strategies and Best Practices:
> AutoComplete Using a Servlet> AutoComplete Using a JSF Component
• AJAX Issues & Futures• Summary and Resources
![Page 4: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/4.jpg)
What is AJAX?What is AJAX?
![Page 5: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/5.jpg)
Conventional Rich Web Application• Click, wait, and refresh user interaction
> Page refreshes from the server needed for all events, data submissions, and navigation
> Lost of operation context during refresh> Excessive server load and bandwidth consumption
• Synchronous “request/response” communication model> Browser always initiates the request> The user has to wait for the response -- Slow response
• Lack of two-way, real-time communication capability for server initiated updates
• Plugins, applets, or browser black magic
![Page 6: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/6.jpg)
What is AJAX• AJAX is an acronym for Asynchronous Javascript
And XML> AJAX uses JavaScript combined with xml to grab
information from a server without refreshing the page> nothing new, the main requirement is the web browser
has the support for XMLHttpRequest object> The term AJAX was coined Jesse James Garrett in
February 2005• Advantages on web apps:
> Dramatic improvement in user interface> "Partial screen update" replaces the "click, wait, and refresh"
user interaction model
![Page 7: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/7.jpg)
User Interface: Traditional Web vs. AJAX
![Page 8: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/8.jpg)
Components: Traditional Web vs. AJAX
![Page 9: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/9.jpg)
Examples of AJAX apps• Google maps
http://maps.google.com/• Zimbra: demo at http://www.zimbra.com• Goold Suggest
http://www.google.com/webhp?complete=1&hl=en• ZUGGEST- an XMLHttp Experiment using Amazon
http://www.francisshanahan.com/zuggest.aspx• Mashup housing want-ads (craglist.org)with Google
maps http://www.housingmaps.com/
![Page 10: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/10.jpg)
Usage cases for AJAX
• Real-time form data validation> user IDs, serial numbers, postal codes, or even special
coupon codes that require server-side validation can be validated in a form before the user submits a form
• Auto-Completion> email address, name, or city name may be
autocompleted as the user types• Master detail operation
> Based on a client event, an HTML page can fetch more detailed information on data such as a product listing
![Page 11: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/11.jpg)
Usage cases for AJAX
• Advanced GUI widgets and controls> Controls such as tree controls, menus, and progress bars
may be provided that do not require page refreshes• Refreshing data
> HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data
• Server side notification> An HTML page may simulate a server-side push by
polling the server for event notifications
![Page 12: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/12.jpg)
AJAX AnatomyAJAX Anatomy
![Page 13: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/13.jpg)
Things Needed in AJAX• Javascript
> Loosely typed object based scripting language> JavaScript in a page is called when an event in a page
occurs• DOM
> API for accessing and manipulating structured documents> represent the structure of XML and HTML documents
• CSS> CSS allow for a clear separation of the presentation from
the content and may be changed programatically by JavaScript
• HTTP> XMLHttpRequest
![Page 14: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/14.jpg)
Characteristics of XMLHttpRequest• Communication may be GET/POST• Documents must be text/xml• Page continues to process events, the
XMLHttpRequest object works in the background• Limited Number of requests allowed• Allows you to specify a handler method for state
changes• Handler notified when request is:
> Initialized, Started, In the process of being returned, Completely finished
![Page 15: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/15.jpg)
XmlHTTPRequest• Creating an XmlHttpRequest instance
> Many/most aspects of using this object have been standardized
> Creating the object, however, is browser specific• Asynchronous requests
> Utilize a combination of the onreadystatechange function and status-properties to ensure processing occurs when server processing is complete
• Response content type> Setting this to text/xml with make your life easier in
almost all implementations
![Page 16: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/16.jpg)
XMLHttpRequest Methods• open(“method”, “URL”, syn/asyn)
> Assigns destination URL, method, mode• send(content)
> Sends request including string or DOM object data• abort()
> Terminates current request• getAllResponseHeaders()
> Returns headers (labels + values) as a string• getResponseHeader(“header”)
> Returns value of a given header• setRequestHeader(“label”,”value”)
> Sets Request Headers before sending
![Page 17: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/17.jpg)
XMLHttpRequest Properties• onreadystatechange
> Event handler that fires at each state change> You implement your own function that handles this
• readyState – current status of request> 0 = uninitialized> 1 = loading> 2 = loaded> 3 = interactive (some data has been returned)> 4 = complete
• status> HTTP Status returned from server: 200 = OK
• responseText> String version of data returned from server
• responseXML> XML DOM document of data returned
• statusText> Status text returned from server
![Page 18: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/18.jpg)
Synchronous Versus Asynchronous• Synchronous mode (not AJAX application)
> xmlHttpRequest.open('GET', 'url' , false)> Block the user interface and may freeze the browser for the
duration of the request • Asynchronous mode (AJAX application)
> xmlHttpRequest.open('GET', 'url', true)>Get a callback when the data has been received
> Browser continue to work and requests processed in background
• Requests can be made asynchronously or synchronously> both techniques allow web page to be updated without
refreshing > anything useful the user can do while processing request?
> if yes then use asynchronous, otherwise use synchronous• Most frameworks support either• Asynchronous is typically recommended
![Page 19: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/19.jpg)
Anatomy of an AJAX Request
![Page 20: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/20.jpg)
Steps of An AJAX Interaction 1. A client event occurs. 2. An XMLHttpRequest object is created and configured. 3. The XMLHttpRequest object makes a call. 4. The request is processed by the ValidateServlet. 5. The ValidateServlet returns an XML document
containing the result. 6. The XMLHttpRequest object calls the callback()
function and processes the result. 7. The HTML DOM is updated.•
![Page 21: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/21.jpg)
AJAX GuidelinesAJAX Guidelines
![Page 22: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/22.jpg)
AJAX Guidelines
• Usability• JavaScript Libraries• I18n• State Management• HTTP methods• Return content-types
![Page 23: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/23.jpg)
Usability• Back/Forward button meaningless• Refresh button can kill your app
> Save state in <body onload> method• Bookmarking/URL sharing not working• Printing dynamically rendered pages can be problematic• JavaScript framework Dojo toolkit (http://dojotoolkit.org)
> provides API's history manipulation and navigation control> provides client-side for bookmarking and URL manipulation
• Requires thinking about interface and interaction> Usability is the key
> Do not break what the user is focusing on> Make sure to give the user feedback
> Do not over-use itRecommendation: Consider the meaning of each and weigh the benefits when designing your application.
![Page 24: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/24.jpg)
JavaScript Libraries• There are differences in javascript implementations• Serializing complex data and mapping it to javascript
isn't a trival task• Directly consuming xml in Javascript can be painful due
to browser differences in technologies like xslt• Dojo: a key focus on user experience• Prototype: focuses more on AJAX interactions
> JavaScript objects and utility methods (request, update, periodic_update)
• DWR(Dynamic Web Remoting): both client-side and server-side framework> do RPC calls from client-side JavaScript to Java objects in a
web container server side> Framework support, DHTML manipulation, servlet access
![Page 25: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/25.jpg)
Internationalization (I18n)• Page Content Type
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
• Use JavaScript encodeURI() when building URLs or sending localizable content.
• Call HttpServletRequest.setCharacterEncoding("UTF-8") before retrieving any parameters from Java EE
Recommendation: Use UTF-8 since it supports the widest number of languages and browsers.
![Page 26: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/26.jpg)
Externalize Content from Java Code• Content types
> HTML markup> CSS> JavaScript
• Embedding in Output>Class-Loader>Request Dispatcher
• Render Links in the PageRecommendation: If all possible do not in-line content in Java code. Externalize CSS styles to make HTML more flexible.
![Page 27: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/27.jpg)
State Management• On Client
> In memory in JavaScript Objects> In hidden form variables > In cookies
• On Server> HttpSession> Persisted
• How do you handle state + sessions?> Can all be on the client so you can have truly stateless servers?> What happens if the server or network dies?
Recommendation: Consider keeping non-secure state related to the rendering of the client on the client. Keep secure persistent state on the server.
![Page 28: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/28.jpg)
HTTP Methods• GET
> When the data will not change• POST
> When operation has “side-effects” and changes the state on the server.
Recommendation: Follow the HTTP idempotency rules.
![Page 29: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/29.jpg)
Response Content Type• XML• Text
> Post processing on client> Inject directly into the page
• JavaScript> Evaluated in JavaScript using eval()> JavaScript object representations of data(JSON)
Recommendation: Use XML for structured portable data. Use plain text for when injecting content into the HTML. Use JavaScript to return object representations data.
![Page 30: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/30.jpg)
AJAX Consideration AJAX Consideration and Gotchasand Gotchas
![Page 31: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/31.jpg)
Browsers support• Need XmlHttpRequest browser support• Mozilla Firefox 1.0 and above• Netscape version 7.1 and above• Apple Safari 1.2 and above.• Microsoft Internet Exporer 5 and above• Konqueror (Unix)• Opera 7.6 and above
![Page 32: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/32.jpg)
Cross Browser Support• Support in cross browser -- a defacto manner
> no public standard defining AJAX• Major difference: manner in which you obtain a new
XMLHttpRequest instance• Using AJAX requires cross browser testing• Using a component model such in JavaServer
Faces will also make using AJAX less difficult > JSF component model allows you hide most of the
JavaScript/DHTML/CSS from the page developers
![Page 33: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/33.jpg)
AJAX/XMLhttp Initiate//XMLthttp variable will hold the XMLHttpRequest objectvar xmlhttp = false;// If the user is using Mozilla/Firefox/Safariif (window.XMLHttpRequest) { //Intiate the object xmlhttp = new XMLHttpRequest(); //Set the mime type xmlhttp.overrideMimeType('text/xml');}// If the user is using IEelse if (window.ActiveXObject) { //Intiate the object xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
![Page 34: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/34.jpg)
AJAX readyStatefunction callback() { if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid } }}
• readyState has a few odd quirks• No browser correctly supports readyState in all
cases> Won't impact standard xmlhttp scripts, but be careful with
readyStates other than 4
![Page 35: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/35.jpg)
Multiple Requests: Thread Safe Implementation (http://www.xml.com/cs/user/view/cs_msg/2815)
01 function send(url, callback) {02 //Use an inner function to hold the local variables and03 //perform the actual callback04 function bindCallback() {05 //Check readyState and status06 processResult(req.responseXML);07 }0809 //Define some local variables to hold the params10 var req = //get an instance of XMLHttpRequest11 var processResult = callback;1213 req.onreadystate = bindCallback;14 req.open(“GET”, url, true);15 req.send(null);16 }
![Page 36: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/36.jpg)
AJAX Efficiency• Keep requests as concise as possible• Only request/respond with the data required• Preload data on the server where possible• Put some thought into what event will trigger• Some events happen faster than is practical to
make server requests> i.e. Although Google Suggest appears to make a request
on each keystroke, closer examination reveals it is actually makes requests at regular time intervals
• Don’t assume the server is going to respond instantly> Network latency – consider interval between user
request and server response> Need visual feedback for background activity> Preload data on the server where possible
![Page 37: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/37.jpg)
Things You May not Like• Big problems could easily arise from a user
disabling JavaScript in their browsers!• Comlexity
> Server side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic
> HTML page developers must have JavaScript technology skills
• Browser differences - not completely standardized• Not yet official part of any spec• Debugging - java code on server mixes with
JavaScript on the client• Source is in plain view
> Security?• Latest generation of browsers required
![Page 38: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/38.jpg)
Strategies and Best Strategies and Best Practices:Practices:AutoComplete Using a ServletAutoComplete Using a Servlet
![Page 39: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/39.jpg)
AutoComplete Using a ServletHow can you provide a better means of navigating a large set of data based on a search query?
![Page 40: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/40.jpg)
index.jsp Page Auto-Complete Form
1. <form name="autofillform" action="autocomplete" method="get">2. <input type="text"3. size="20"4. autocomplete="off"5. id="complete-field"6. name="id"7. onkeyup="doCompletion();">8. <input id="submit_btn" type="Submit" value="Lookup Employee">9. </form>
![Page 41: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/41.jpg)
AutoComplete Event Handler1. function doCompletion() {2. if (completeField.value == "") {3. clearTable();4. } else {5. var url = "autocomplete?action=complete&id=" + escape (completeField.value);6. var req = initRequest(url);7. req.onreadystatechange = function() {8. if (req.readyState == 4) {9. if (req.status == 200) {10. parseMessages(req.responseXML);11. } else if (req.status == 204){12. clearTable();13. }}};14. req.open("GET", url, true);15. req.send(null);16. }}
![Page 42: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/42.jpg)
AutoComplete XMLHttpRequest
1. function initRequest(url) {2. if (window.XMLHttpRequest) {3. return new XMLHttpRequest();4. } else if (window.ActiveXObject) {5. isIE = true;6. return new ActiveXObject ("Microsoft.XMLHTTP");7. }8.}
![Page 43: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/43.jpg)
AutoComplete Servlet doGet()1. public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { ... 2. String targetId = request.getParameter("id"); 3. Iterator it = employees.keySet().iterator(); 4. while (it.hasNext()) { 5. EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); 6. if ((e.getFirstName()... || e.getLastName()...) { 7. sb.append("<employee>"); sb.append("<id>" + e.getId() + "</id>"); 8. sb.append("<firstName>" + e.getFirstName() + "</firstName>"); 9. sb.append("<lastName>" + e.getLastName() + "</lastName>"); 10. sb.append("</employee>"); namesAdded = true; 11. } } 12. if (namesAdded) { 13. response.setContentType("text/xml"); 14. response.setHeader("Cache-Control", "no-cache"); 15. response.getWriter().write("<employees>" + sb.toString() + "</employees>"); 16. } else { 17. response.setStatus(HttpServletResponse.SC_NO_CONTENT); } }
![Page 44: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/44.jpg)
Browser, DOM and JavaScript• Browsers maintain an object representation of the
documents being displayed (referred to as the Document Object Model or DOM)
• JavaScript technology in an HTML page has access to the DOM, and APIs are available that allow JavaScript technology to modify the DOM after the page has loaded
• Following a successful request, JavaScript technology code may modify the DOM of the HTML page
• The object representation of the XML document that was retrieved from the servlet is available to JavaScript technology code using the req.responseXML, where req is an XMLHttpRequest object
![Page 45: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/45.jpg)
AutoComplete parseMessages1.function parseMessages(responseXML) {2. clearTable();3. var employees = responseXML.getElementsByTagName("employees")[0];4. if (employees.childNodes.length > 0) {5. completeTable.setAttribute("bordercolor", "black");6. completeTable.setAttribute("border", "1");7. } else {8. clearTable();9. }10. 11. for (loop = 0; loop < employees.childNodes.length; loop++) {12. var employee = employees.childNodes[loop];13. var firstName = employee.getElementsByTagName("firstName")[0];14. var lastName = employee.getElementsByTagName("lastName")[0];15. var employeeId = employee.getElementsByTagName("id")[0];16. appendEmployee(firstName.childNodes[0].nodeValue,lastName.childNodes[0].nodeValue, employeeId.childNodes[0].nodeValue); } }
![Page 46: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/46.jpg)
AutoComplete Update
![Page 47: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/47.jpg)
DemoDemo
Auto completeAuto complete
![Page 48: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/48.jpg)
Strategies and Best Strategies and Best Practices:Practices:AutoComplete Using a JSF AutoComplete Using a JSF ComponentComponent
![Page 49: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/49.jpg)
Why need a Framework or Toolkit?• There are differences in javascript implementations• Serializing complex data and mapping it to
javascript isn't a trival task• Directly consuming xml in Javascript can be painful
due to browser differences in technologies like xslt
![Page 50: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/50.jpg)
JSF Component Approach
• Control Content Rendering • Control of Server Side Logic• All in one component• Reusable• Usable in a tool• Hide AJAX complexity from page developers
Benefits Include:
![Page 51: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/51.jpg)
AJAX With JavaServer™ Faces (“JavaServer Faces”)
1.AJAX using the JavaServer Faces architecture to process AJAX requests
2.Servlet Controller to process AJAX requests3.Retrofitting existing applications
Architecture
![Page 52: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/52.jpg)
1. JSF Component That Renders Client-side AJAX Script and Processes AJAX Requests
• AJAX is built into the lifecycle• Everything is handled by the JSF environment• JSF environment with a phase listener used to
return initial JavaScript technology• JSF environment with a phase listener processes
AJAX requests• View state from a page may also be accessed
![Page 53: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/53.jpg)
Anatomy of an AJAX enabled JSF Component
![Page 54: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/54.jpg)
AJAX Processing With a JSF Component
![Page 55: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/55.jpg)
Page Developer's View of JSF Component1.<ajaxTags:completionField2. size="40" id="cityField" 3. completionMethod="4. #{ApplicationBean.completeName}"5./>
![Page 56: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/56.jpg)
Server Side Logic for JSF Component1.public String[] completeName() {2. ArrayList results = new ArrayList();3. Iterator it = employees.keySet().iterator();4. while (it.hasNext()) {5. EmployeeBean e = (EmployeeBean)employees.get((String)it.next());6. if ((e.getFirstName().toLowerCase().startsWith(targetId) ||7. e.getLastName().toLowerCase().startsWith(targetId)) &&8. !targetId.equals("")) {9. 10. results.add(e.getId() + " " +11. e.getFirstName() +12. e.getLastName());13. } }14. return (String[])results.toArray();}
![Page 57: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/57.jpg)
2. JSF Component That Uses Separate Servlet• Avoids JSF lifecycle
> Performance> Risk
• More difficult deployment• Beware of JSF technology interactions• JSF technology life-cycle events are not incurred
![Page 58: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/58.jpg)
Architecture of a JavaServer Faces Component with separate AJAX Controller
![Page 59: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/59.jpg)
3. Retrofitting Existing Applications• Customizable but not easily re-usable• Capable of evaluating expressions and using
managed beans• Mapping JSF ids to HTML ids• JSF technology life-cycle events are not incurred• May be used outside of a JSF platform
interface runtime
![Page 60: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/60.jpg)
AjaxServlet + JSF Components
![Page 61: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/61.jpg)
Finding the JSF Faces ComponentsFrom the AjaxServlet1.public void init(ServletConfig config) throws ServletException {2. ServletContext context = config.getServletContext();3. facesContextFactory = (FacesContextFactory)4. FactoryFinder.getFactory(FactoryFinder.FACES_CONTEXT_FACTORY);5. LifecycleFactory lifecycleFactory = (LifecycleFactory)6. FactoryFinder.getFactory(FactoryFinder.LIFECYCLE_FACTORY);7. String lifecycleId = context.getInitParameter 8. (FacesServlet.LIFECYCLE_ID_ATTR);9. if (lifecycleId == null) {10. lifecycleId = LifecycleFactory.DEFAULT_LIFECYCLE;11. }12. lifecycle = lifecycleFactory.getLifecycle(lifecycleId);13.}14.public void doGet(HttpServletRequest request, HttpServletResponse response)15. throws IOException, ServletException {16. FacesContext context = facesContextFactory.getFacesContext(17. servletConfig.getServletContext(),18. request, response, lifecycle);
![Page 62: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/62.jpg)
Finding a Managed BeanFrom the FacesContext1.mybean bean = (mybean)getbean;2....3.protected Object getbean(FacesContext context, String name) {4. return context.getApplication().getVariableResolver().resolveVariable(context, name);5.}6.
![Page 63: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/63.jpg)
General JSF Component Issues• Validation messages should use same CSS styles
and elements as JSF components• Syncing up state in the HTML DOM and
JSF interface• AutoComplete—Need to turn browser autocomplete
off—<input ... autocomplete="off"/>• Each JSF component should have shareable
JavaScript technology and CSS rendering• Encapsulate the XMLHttpRequest and
callback functions to prevent JavaScript technology conflicts
![Page 64: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/64.jpg)
AJAX Issues & FuturesAJAX Issues & Futures
![Page 65: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/65.jpg)
AJAX Futures
• AJAX-enabled JSF Component libraries• Standardization of XMLHttpRequest• More best practices in the programming model• Better browser support and tool support
> Debugging and testing• Framework support and new frameworks• Performance and Security
![Page 66: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/66.jpg)
DemoDemo
![Page 67: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/67.jpg)
DEMO• Google Mapviwer in Creator• Blueprints solutions in NetBeans• Create a AJAX enabled JSF components using Sun
Java Studio Creator• zimbra
![Page 68: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/68.jpg)
Summary and ResourcesSummary and Resources
![Page 69: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/69.jpg)
Summary
• AJAX helps make applications more interactive• J2EE technology is a great platform for
AJAX applications• AJAX does not come for free• Start small and don’t overdo it• You can use AJAX with your J2EE platform
applications today
![Page 70: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/70.jpg)
For More Information• The BluePrints Solutions catalog on AJAX:
> https://bpcatalog.dev.java.net/nonav/solutions.html• AJAX Q & A
> https://blueprints.dev.java.net/ajax-faq.html• Asynchronous JavaScript Technology and XML (AJAX)
With Java 2 Platform, Enterprise Edition> http://java.sun.com/developer/technicalArticles/J2EE/AJAX/inde
x.html• AJAX Frameworks
> http://ajaxpatterns.org/wiki/index.php?title=AJAXFrameworks• AJAX Library and Frameworks Comparison
> http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
![Page 71: Doris AJAX presentation for singapore](https://reader033.fdocuments.us/reader033/viewer/2022052523/555c9dcad8b42a85758b52da/html5/thumbnails/71.jpg)
Cross Browser Resources • Cross Browser Discussion
> http://www.quirksmode.org/index.html> http://www.ajaxian.com/archives/browsers/index.html
• Cross Browser quirk> http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_2.html
• JavaScript libraries such as Dojo that makes these differences less painful> http://dojotoolkit.org/