Greg Murray

March 2006

AJAX

2

Agenda

• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A

3

Demo

AJAX @ Apple

4

Conventional Interaction Model

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.

6

High Level AJAX Interaction Model

7

HTML Page Event

8

'onclick' event initiates sayHello()function call

9

XmlHttpRequest created and callsserver

10

Response is passed to callback

11

HTML Page Updated Using DHTML

12

High Level AJAX Interaction Model

13

AJAX Uscases• Advanced Controls• Autocomplete• Observer• Master Details• Partial Submit• Server Side Validation• Value List Handler

14

Demo

AJAX Demo

15

Agenda

• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A

16

AJAX Recommendatons

• JavaScript• Usability• I18n• Return content-types• XmlHttpRequest• Architectures• Security• Performance

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

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

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.

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

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.

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.

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.

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

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/

26

Agenda

• What is AJAX?• Demo• Recommendations• Advanced AJAX Demo• Q & A

27

Demo

Advanced AJAX Demo

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

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

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

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

Q &A