ajax
TRANSCRIPT
![Page 1: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/1.jpg)
Greg Murray
March 2006
AJAX
![Page 2: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/2.jpg)
2
Agenda
• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A
![Page 3: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/3.jpg)
3
Demo
AJAX @ Apple
![Page 4: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/4.jpg)
4
Conventional Interaction Model
![Page 5: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/5.jpg)
5
AJAX
Asynchronous JavaScript + XML
AJAX is using JavaScript, namely theXmlHttpRequest object, to communicateasynchronously with a server-sidecomponent and dynamically update thesource of an HTML page based on theresulting XML/Text response.
![Page 6: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/6.jpg)
6
High Level AJAX Interaction Model
![Page 7: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/7.jpg)
7
HTML Page Event
![Page 8: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/8.jpg)
8
'onclick' event initiates sayHello()function call
![Page 9: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/9.jpg)
9
XmlHttpRequest created and callsserver
![Page 10: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/10.jpg)
10
Response is passed to callback
![Page 11: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/11.jpg)
11
HTML Page Updated Using DHTML
![Page 12: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/12.jpg)
12
High Level AJAX Interaction Model
![Page 13: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/13.jpg)
13
AJAX Uscases• Advanced Controls• Autocomplete• Observer• Master Details• Partial Submit• Server Side Validation• Value List Handler
![Page 14: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/14.jpg)
14
Demo
AJAX Demo
![Page 15: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/15.jpg)
15
Agenda
• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A
![Page 16: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/16.jpg)
16
AJAX Recommendatons
• JavaScript• Usability• I18n• Return content-types• XmlHttpRequest• Architectures• Security• Performance
![Page 17: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/17.jpg)
17
JavaScript
• Use OO JavaScript• Separate Content/Style/JavaScript• Write re-usable JavaScript• Compress JavaScript• Be careful what you put in your JavaScript• Garbage collection won't save you• Store state that spans pages on the server
See: https://blueprints.dev.java.net/bpcatalog/conventions/javascript-recommendations.html
![Page 18: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/18.jpg)
18
JavaScript Libraries
• Prototype• RICO• Script.aculo.us• Dojo• Zimbra
Recommendation: Adopt a library if you can. If not make sure youadhere to standards.
See: https://blueprints.dev.java.net/bpcatalog/conventions/javascript-recommendations.html
![Page 19: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/19.jpg)
19
Usability
• Back/Forward/Refresh Buttons• Bookmarking• URL sharing• Printing• 508 Compliance
Recommendation: Consider the meaning of each and weighthe benefits when designing your application.
![Page 20: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/20.jpg)
20
Internationalization (I18n)
• Page Content Type<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
• Use JavaScript encodeURIComponent when buildingURLs or sending localizable content.
• Call request.setCharacterEncoding("UTF-8") before retrievingany parameters from Java EE.
• Call response.setContentType(“text/xml;charset=UTF-8”)Recommendation: Use UTF-8 since it supports the widest number oflanguages and browsers.
See: http://weblogs.java.net/blog/gmurray71/archive/2006/03/ajax_i18n_with.html
![Page 21: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/21.jpg)
21
Response Content Type• 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 if your service requires client neutrality. UseJSON for model data otherwise. Use plain text for when injecting contentinto the HTML.
![Page 22: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/22.jpg)
22
XMLHttpRequest (XHR)
• 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. Consider using a library.
![Page 23: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/23.jpg)
23
Architectures
• Server Centric> Server Renders Everything
• Client Centric> More JavaScript> Page as the Application> Client Controller
Recommendation: If you already have a server centric architectureconsider adding some client centric components. When using a clientcentric architecture consider using an existing library.
![Page 24: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/24.jpg)
24
Security• 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• Cross domain scripting
Recommendation: Use HTTPS when you want to secure AJAXcommunication. Don't put compromising code in your JavaScript
![Page 25: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/25.jpg)
25
Performance• http://www.macrumors.com/events/mwsf2006-stats.php
“We peaked at approximately 103,000 simultaneous web visitors and6,000 IRC viewers during the Keynote speech and transmited over 32GB of data in a three hour period. If not for the efficiency of theMacRumorsLive AJAX update system, the same webcast would haverequired approximately twice as many servers and would have had totransfer almost 6 times as much data (196 GB).”
• Patterns- Value List Handler/ Master Details
See: http://www.macrumorslive.com/about/
![Page 26: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/26.jpg)
26
Agenda
• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A
![Page 27: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/27.jpg)
27
Demo
Advanced AJAX Demo
![Page 28: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/28.jpg)
28
What Can Apple Do?
• Keep up the good work!!• Consider more AJAX with the .mac online• Consider exposing more data as JSON• Make sure Safari continues to have first class AJAX
support
![Page 29: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/29.jpg)
29
AJAX Resources From Sun
• BluePrints Solutions Catalog Entries on AJAX> NetBeans> Command Line> Written for Glassfish http://glassfish.dev.java.net
• Java Studio Creator• Reference application on the way
![Page 30: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/30.jpg)
30
Summary
• AJAX is all about enhanced usability, don't forget todegrade gracefully.• Use AJAX where it makes sense.• Follow the recommendations.• Get ready for what's next
![Page 31: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/31.jpg)
31
Resources
• Today's slides and examples:http://homepage.mac.com/greg_murray/ajax
• BluePrints AJAX Pagehttp://java.sun.com/blueprints/ajax.html
• AJAX FAQ for the Java Developerhttps://blueprints.dev.java.net/ajax-faq.html
• JavaScript Recommendations for AJAX ComponentWritershttps://blueprints.dev.java.net/bpcatalog/conventions/javascript-
recommendations.html
![Page 32: AJAX](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554f55b9b4c905524c8b516b/html5/thumbnails/32.jpg)
Q &A