0
Web 2.0 and AJAX

Jim Driscoll
Manager, Java Web Tier
Agenda                              JGD




• Definitions: Web 2.0, AJAX
 > Wikis, RSS/Blogs, and REST
 > AJAX Overview
• ...
A Little Web History                         JGD




•   CGI / Perl & C
•   Servlets
•   JSP / ASP / PHP
•   Other scripti...
Web 2.0 by example                                          JGD




•   DoubleClick              •   Google AdSense
•   Of...
Web 2.0 Definition – by Tim O'Reilly                JGD




• Web as a Platform
• Collective Intelligence
  > Folksonomy –...
So what is Web 2.0?                                           JGD




• Fuzzy Term, as popularized by O'Reilly...
  > ... ...
What is Web 2.0? (cont.)                           JGD




• Services
  >   Flickr, BitTorrent, iTunes
  >   Maps (Yahoo, ...
Blogs / RSS / Atom                                   JGD




 • RSS – Really Simple Syndication
   > A number of (not full...
Wikis / Collaboration                                  JGD




  • Wikis are...
    > Simplified Web sites (Management, Co...
REST                                             JGD




 • Web 2.0 delivers Services over the Web
 • Pretty much all seem...
Conventional Rich Web Applications        JGD




•   Plugins/Applets
•   Frames/ iframes
•   Dumb browser
•   Server Cent...
Conventional Interaction Model        JGD




                                 12
High Level AJAX Interaction Model        JGD




                                    13
AJAX                                         JGD




Asynchronous JavaScript + XML
AJAX is using JavaScript, namely the
Xm...
Anatomy of an AJAX Interaction        JGD




                                 15
HTML Page Event                                                                  JGD




<form name=quot;autofillformquot;...
JavaScript Event Handler                                      JGD




function getXHR() {
    if (window.XMLHttpRequest) {...
Servlet                                                                                         JGD




public   void doGe...
JavaScript Client Callback                                                  JGD




function postProcess(responseXML) {
  ...
Agenda                                                JGD




• Definitions: Web 2.0, Rich Web Applications,
  AJAX
• Guid...
AJAX Guidelines                 JGD




•   JavaScript Libraries
•   Usability Issues
•   AJAX Design
•   HTTP methods
•  ...
JavaScript Libraries                                                             JGD




•    Prototype
•    RICO
•    Scr...
Usability                                                         JGD




•   Back/Forward/Refresh Buttons
•   Bookmarking...
XMLHttpRequest (XHR)                                                     JGD




 • HTTP Method
    > GET - When the resul...
AJAX Design                                                                   JGD




 • Add Around the Edges
    > Small ...
Response Content Type                                                          JGD




 • XML
 • HTML
 • Text
    > Post p...
Security                                                            JGD




 • Sandboxed
    > Cross Domain XMLHttpRequest...
Desktop and AJAX                                            JGD




• AJAX is best for
  > Internet deployments (no separa...
Agenda                                                JGD




• Definitions: Web 2.0, Rich Web Applications,
  AJAX
• Guid...
JSF Component Approach                               JGD




    Benefits Include:

•   Control Content Rendering
•   Cont...
Anatomy of an AJAX enabled JSF        JGD




Component




                                 31
Page Developer's View of JSF Component        JGD




 <ajaxTags:completionField
   size=quot;40quot; id=quot;cityFieldquo...
Server Side Logic for JSF Component                                   JGD




public String[] completeName() {
  ArrayList...
Agenda                                                JGD




• Definitions: Web 2.0, Rich Web Applications,
  AJAX
• Guid...
AJAX BluePrints                                                 JGD




• BluePrints Solutions Catalog Entries on AJAX
 > ...
Resources                                            JGD




• BluePrints AJAX Page:
  http://java.sun.com/blueprints/ajax...
jim.driscoll@sun.com
Upcoming SlideShare
Loading in...5
×

Web 2.0 And Ajax

1,033

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,033
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web 2.0 And Ajax"

  1. 1. Web 2.0 and AJAX Jim Driscoll Manager, Java Web Tier
  2. 2. Agenda JGD • Definitions: Web 2.0, AJAX > Wikis, RSS/Blogs, and REST > AJAX Overview • Guidelines • JSF Approach • AJAX BluePrints 2
  3. 3. A Little Web History JGD • CGI / Perl & C • Servlets • JSP / ASP / PHP • Other scripting > Python, Ruby • Java based web frameworks > Struts, JSF, (many) others • Scripting based frameworks • But all these kept the same (1.0) UI 3
  4. 4. Web 2.0 by example JGD • DoubleClick • Google AdSense • Ofoto • Flickr • Britannica Online • Wikipedia • mp3.com • Napster • Personal websites • Blogging • Directories (Taxonomy) • Tagging (Folksonomy) • Screen Scraping • Web Services 4
  5. 5. Web 2.0 Definition – by Tim O'Reilly JGD • Web as a Platform • Collective Intelligence > Folksonomy – Collaborative Categorization • Data is key and should be shared • Software is in constantly evolving > Software release cycles dead? • Lightweight Programming Models > SOAP/REST • The Network is the computer > (iTunes, mobile devices) • Rich User Experience 5
  6. 6. So what is Web 2.0? JGD • Fuzzy Term, as popularized by O'Reilly... > ... some negative reaction (“obvious marketing fluff”) > ... but trying to capture a real qualitative change > ... featured recently in Time and Business Week • Technologies > Blogging, Syndication, RSS/Atom > Wikis, Web Services (REST) > AJAX, Rich Internet Clients • Attitudes > Sharing, Connected, Participatory > Services, Perpetual Beta, Users Engaged 6
  7. 7. What is Web 2.0? (cont.) JGD • Services > Flickr, BitTorrent, iTunes > Maps (Yahoo, Google), Wikipedia > Gmail, AdSense > Yahoo & Google Services • Drivers > Faster Connectivity > More Available Connectivity, esp at home > More Powerful Machines > Customers More Comfortable with Technology > Browser wars (mostly) over 7
  8. 8. Blogs / RSS / Atom JGD • RSS – Really Simple Syndication > A number of (not fully compatible) specs > Atom is latest, IETF, Standard • Provide Syndicated Information through HTTP • Blogs build on RSS/Atom > Aggregation, Content Reuse, Caching • Strong Social Phenomenon (e.g. politics) • Rome – a popular RSS/Atom library • Roller – Apache project donated by Sun > Runs on AS 9 • Blogs.sun.com 8
  9. 9. Wikis / Collaboration JGD • Wikis are... > Simplified Web sites (Management, Content) > Collaboratively Created Web Sites • Example: Wikipedia (uses MediaWiki) • Java Wiki: JSPWiki (many others) • Portal Server 7.0 > Uses JSP Wiki > Focused on Collaboration 9
  10. 10. REST JGD • Web 2.0 delivers Services over the Web • Pretty much all seems to be over REST > HTTP + typed XML content > (or JSON) • JAX-WS 2.0 provides some support > More is needed > WSDL is an imperfect match 10
  11. 11. Conventional Rich Web Applications JGD • Plugins/Applets • Frames/ iframes • Dumb browser • Server Centric • Page to Page navigation based 11
  12. 12. Conventional Interaction Model JGD 12
  13. 13. High Level AJAX Interaction Model JGD 13
  14. 14. AJAX JGD Asynchronous JavaScript + XML AJAX is using JavaScript, namely the XmlHttpRequest object, to communicate asynchronously with a server-side component and dynamically update the source of an HTML page based on the resulting XML/Text response. 14
  15. 15. Anatomy of an AJAX Interaction JGD 15
  16. 16. HTML Page Event JGD <form name=quot;autofillformquot; action=quot;autocompletequot; method=quot;getquot;> <table border=quot;0quot; cellpadding=quot;5quot; cellspacing=quot;0quot;> <tr><td><b>Employee Name:</b></td><td> <input type=quot;textquot; id=quot;complete-fieldquot; size=quot;20quot; autocomplete=quot;offquot; onkeyup=quot;doCompletion();quot;> </td><td align=quot;leftquot;> <input id=quot;submit_btnquot; type=quot;Submitquot; value=quot;Lookup Employeequot;> </td></tr> <tr><td id=quot;auto-rowquot; colspan=quot;2quot;>&nbsp;<td/></tr> </table> </form> <div style=quot;position: absolute; top:170px;left:140pxquot; id=quot;menu-popupquot;> <table id=quot;completeTablequot; border=quot;1quot; bordercolor=quot;blackquot; cellpadding=quot;0quot; cellspacing=quot;0quot; /> </div> 16
  17. 17. JavaScript Event Handler JGD function getXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } } function doCompletion() { var url = quot;autocomplete?action=complete&id=quot; + encodeURI(target.value); var req = getXHR(); req.onreadystatechange = processRequest; req.open(quot;GETquot;, url, true); req.send(null); } 17
  18. 18. Servlet JGD public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter(quot;idquot;); Iterator it = employees.keySet().iterator(); while (it.hasNext()) { EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if ((e.getFirstName().toLowerCase().startsWith(targetId) || e.getLastName().toLowerCase().startsWith(targetId)) && !targetId.equals(quot;quot;)) { sb.append(quot;<employee>quot;); sb.append(quot;<id>quot; + e.getId() + quot;</id>quot;); sb.append(quot;<firstName>quot; + e.getFirstName() + quot;</firstName>quot;); sb.append(quot;<lastName>quot; + e.getLastName() + quot;</lastName>quot;); sb.append(quot;</employee>quot;); namesAdded = true; } } if (namesAdded) { response.setContentType(quot;text/xmlquot;); response.setHeader(quot;Cache-Controlquot;, quot;no-cachequot;); response.getWriter().write(quot;<employees>quot; + sb.toString() + quot;</employees>quot;); } else response.setStatus(HttpServletResponse.SC_NO_CONTENT); } 18
  19. 19. JavaScript Client Callback JGD function postProcess(responseXML) { clearTable(); var employees = responseXML.getElementsByTagName(quot;employeesquot;)[0]; if (employees.childNodes.length > 0) { completeTable.setAttribute(quot;bordercolorquot;, quot;blackquot;); completeTable.setAttribute(quot;borderquot;, quot;1quot;); } else { clearTable(); } for (loop = 0; loop < employees.childNodes.length; loop++) { var employee = employees.childNodes[loop]; var firstName = employee.getElementsByTagName(quot;firstNamequot;)[0]; var lastName = employee.getElementsByTagName(quot;lastNamequot;)[0]; var employeeId = employee.getElementsByTagName(quot;idquot;)[0]; appendEmployee(firstName.childNodes[0].nodeValue, lastName.childNodes[0].nodeValue, employeeId.childNodes[0].nodeValue); } } 19
  20. 20. Agenda JGD • Definitions: Web 2.0, Rich Web Applications, AJAX • Guidelines • JSF Approach • AJAX BluePrints 20
  21. 21. AJAX Guidelines JGD • JavaScript Libraries • Usability Issues • AJAX Design • HTTP methods • Security • Desktop and AJAX 21
  22. 22. JavaScript Libraries JGD • Prototype • RICO • Script.aculo.us • Dojo • Zimbra Recommendation: Adopt a library and don't try to re-invent the wheel. 22
  23. 23. Usability JGD • Back/Forward/Refresh Buttons • Bookmarking • URL Sharing • Printing • 508 Compliance • Fallback Strategies • Remember <blink>? Recommendation: Consider the meaning of each and weigh the benefits when designing your application. 23
  24. 24. XMLHttpRequest (XHR) JGD • HTTP Method > GET - When the result of N > 0 requests is the same. > POST - When operation has “side-effects” and changes the state on the server. • Concurrent Requests > Max is 2 (IE) Consider - Pooling > JavaScript Closures – Inline functions Recommendation: Take care using the XHR. Use Closures to track the requests/callbacks. Consider using a library. 24
  25. 25. AJAX Design JGD • Add Around the Edges > Small components (autocomplete, tree, partial submit) • Page is the Application > Client and Server split MVC responsibilities Recommendation: Consider designing initial AJAX applications around the edges as you gain experience. Don't go overboard. 25
  26. 26. Response Content Type JGD • XML • HTML • 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. 26
  27. 27. Security JGD • Sandboxed > Cross Domain XMLHttpRequest restricted > Access to file system restricted • HTTPS – Requires a page refresh • JavaScript Libraries for Encryption Exist • JavaScript code visible to the world Recommendation: Use HTTPS when you want to secure AJAX communication. Don't put compromising code in your JavaScript 27
  28. 28. Desktop and AJAX JGD • AJAX is best for > Internet deployments (no separate runtime) > Frequently updated, data intensive service apps > Certain kinds of UI methods (HTML & CSS centric) • Swing (with or without Java Webstart) is best for > Disconnected / High Latency use > Computationally intensive apps > Very rich GUI needs > When you need a mature environment NOW Recommendation: Use the right tool for the job 28
  29. 29. Agenda JGD • Definitions: Web 2.0, Rich Web Applications, AJAX • Guidelines • JSF Approach • AJAX BluePrints 29
  30. 30. JSF Component Approach JGD Benefits Include: • Control Content Rendering • Control of Server Side Logic • All in one component • Reusable • Usable in a tool • Hide AJAX complexity from page developers 30
  31. 31. Anatomy of an AJAX enabled JSF JGD Component 31
  32. 32. Page Developer's View of JSF Component JGD <ajaxTags:completionField size=quot;40quot; id=quot;cityFieldquot; completionMethod=quot; #{ApplicationBean.completeName}quot; /> 32
  33. 33. Server Side Logic for JSF Component JGD public String[] completeName() { ArrayList results = new ArrayList(); Iterator it = employees.keySet().iterator(); while (it.hasNext()) { EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if ((e.getFirstName().toLowerCase().startsWith(targetId) || e.getLastName().toLowerCase().startsWith(targetId)) && !targetId.equals(quot;quot;)) { results.add(e.getId() + quot; quot; + e.getFirstName() + e.getLastName()); } } return (String[])results.toArray(); } 33
  34. 34. Agenda JGD • Definitions: Web 2.0, Rich Web Applications, AJAX • Guidelines • JSF Approach • AJAX BluePrints 34
  35. 35. AJAX BluePrints JGD • BluePrints Solutions Catalog Entries on AJAX > For both NetBeans and command line > Written for GlassFish (http://glassfish.dev.java.net) > More entries posted all the time • Java Petstore Demo > Will be released at JavaOne • Blueprints AJAX components > Google Maps, Paypal > Autocomplete, Ratings, File Upload > Usable in Java Studio Creator, included in updates 35
  36. 36. Resources JGD • BluePrints AJAX Page: http://java.sun.com/blueprints/ajax.html • AJAX FAQ for the Java Developer http://blueprints.dev.java.net/ajax-faq.html 36
  37. 37. jim.driscoll@sun.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×