《高级Web技术》参考资料：3-应用web_5-J2EE框架_阅读参考资料_ajax+J2EE_materials_AJAXBasics

今S aJaX Basics Sang shin Java Technology architect Sun Microsystems, Inc. sangshin@sun.com Www.javapassiOn.com

AJAX Basics Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com

令Sn Disclaimer Acknowledgments Even though Sang Shin is a full-time employee of Sun microsystems the contents here are created as his own personal endeavor and thus does not reflect any official stance of Sun Microsystems on any particular technology 2

2 Disclaimer & Acknowledgments • Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not reflect any official stance of Sun Microsystems on any particular technology

令Sn Agenda 1. What is Rich User Experience? 2. Rich Internet Application(RIA) Technologies 3. AJAX: Real-life examples& Usage cases 4. What is and why ajaX? 5. Technologies used in aJAX 6. Anatomy of AJAX operation 7. XmlHttp Request Methods& Properties 8. DOM APIs InnerHTML 9. AJAX Security 10. JavaScript debugging tools 11. Current issues and future 3

3 Agenda 1.What is Rich User Experience? 2.Rich Internet Application (RIA) Technologies 3.AJAX: Real-life examples & Usage cases 4.What is and Why AJAX? 5.Technologies used in AJAX 6.Anatomy of AJAX operation 7.XMLHttpRequest Methods & Properties 8.DOM APIs & InnerHTML 9.AJAX Security 10.JavaScript debugging tools 11.Current issues and Future

令Sn Topics Covered in Other Presentations AJAX Toolkits Frameworks json ( JavaScript Object Notation) Dojo Toolkit DWR Direct Web remoting) AJAX-enabled JSF Components Google Web Toolkit( GWT) iMaki Wicket and Shale(as ajaX-aware Web applicaion frameworks) Javascript Programming Best Practices 4

4 Topics Covered in Other Presentations • AJAX Toolkits & Frameworks • JSON (JavaScript Object Notation) • Dojo Toolkit • DWR (Direct Web Remoting) • AJAX-enabled JSF Components • Google Web Toolkit (GWT) • jMaki • Wicket and Shale (as AJAX-aware Web applicaion frameworks) • JavaScript Programming Best Practices

今S 1 Rich User Experience for Web Application

1. Rich User Experience for Web Application

令Sn Rich User Experience Take a look at a typical desktop application Spreadsheet app, etc. The program responses intuitively and quickly The program gives a user meaningful feedback's instant a cell in a spreadsheet changes color when you hover your mouse over it Icons light up as mouse hovers them Things happen naturally No need to click a button or a link to trigger an event

6 Rich User Experience • Take a look at a typical desktop application (Spreadsheet app, etc.) • The program responses intuitively and quickly • The program gives a user meaningful feedback's instantly > A cell in a spreadsheet changes color when you hover your mouse over it > Icons light up as mouse hovers them • Things happen naturally > No need to click a button or a link to trigger an event

令Sn Characteristics of Conventional Web Applications Click, wait and refresh"user interaction Page refreshes from the server needed for all events, data submissions, and navigation The user has to wait for the response Synchronous"request/response"communication model Page-driven Workflow is based on pages Page-navigation logic is determined by the server

7 Characteristics of Conventional Web Applications • “Click, wait, and refresh” user interaction • Page refreshes from the server needed for all events, data submissions, and navigation • The user has to wait for the response • Synchronous “request/response” communication model • Page-driven: Workflow is based on pages • Page-navigation logic is determined by the server

令Sn ssues of conventional Web Application Slow response Loss of operational context during refresh loss of information on the screen oSs of scrolled position No instant feedback's to user activities s a user has to wait for the next page These are the reasons why rich Internet application (RIA) technologies were born

8 Issues of Conventional Web Application • Slow response • Loss of operational context during refresh > Loss of information on the screen > Loss of scrolled position • No instant feedback's to user activities > A user has to wait for the next page These are the reasons why Rich Internet Application (RIA) technologies were born

今S 2 Rich Internet Application ( RIA) Technologies

2. Rich Internet Application (RIA) Technologies

令Sn Rich Internet Application(RIA Technologies ppl Macromedia flash Java Web start DHTML DHTML With hidden frame AJAX 10

10 Rich Internet Application (RIA) Technologies • Applet • Macromedia Flash • Java WebStart • DHTML • DHTML with Hidden IFrame • AJAX