10/08/2006 令Sn AJAX Basics Sang sh Java Technology Architect Sun microsystems, Inc sangshin@sun.com Www JavapassIon com Welcome to"AJAX Basics"presentation. My name is Sang Shin. I am Java technology architect and evangelist from Sun Microsystems
AJAX Basics Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com Welcome to “AJAX Basics” presentation. My name is Sang Shin. I am Java technology architect and evangelist from Sun Microsystems. 10/08/2006
10/08/2006 ●S 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 Just to let you know, all the demos I will do in this presentations are from the "AJAX basics and development tools"hands-on lab. The hands-on lab is available from the link mentioned in the slide
Just to let you know, all the demos I will do in this presentations are from the “AJAX basics and development tools” hands-on lab. The hands-on lab is available from the link mentioned in the slide. 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 10/08/2006
10/08/2006 ●S 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 This is the agenda of this presentation. First, I will briefly talk about what we mean by "Rich User Experience"from an end-user technologies that make rich user experience possible when using Web applications Then I will spend the rest of the presentation talking about aJAX in a bit more detail. First, I will show you the real-life examples and usage cases of AjaX to give you a sense of how AJAX is currently being used Then I will talk about a little bit on what is and Why AjaX describing differences between conventional and AjaX-based web applications. Then I will spend sometime talking about the technologies that are used under ajAX-based applications- mainly Javascript, Css, Dom, and XmlhTtpreqUest Javascript object We will then spend some time talking about the anatomy of an AJAX operation using an example code. Here we will go over the sequence of things that occur in a typical AJAX-based interaction between a browser and the server. We will then look into the methods and properties of the xmLhttP requEst Javascript object We will also learn more about the XmlhTtpreqUest object In the latter part of this presentation, I will touch briefly on AJAX security issues. Then I will talk about some Java Script debugging tools for testing and debugging AJAX applications I will end this presentations briefly mentioning the current issues of AJAX as a technology and things that will be coming in the future
This is the agenda of this presentation. First, I will briefly talk about what we mean by “Rich User Experience” from an end-user standpoint. I will then go over several Rich Internet Application technologies that make rich user experience possible when using Web applications. Then I will spend the rest of the presentation talking about AJAX in a bit more detail. First, I will show you the real-life examples and usage cases of AJAX to give you a sense of how AJAX is currently being used. Then I will talk about a little bit on what is and Why AJAX describing differences between conventional and AJAX-based web applications. Then I will spend sometime talking about the technologies that are used under AJAX-based applications - mainly JavaScript, CSS, DOM, and XMLHttpRequest JavaScript object. We will then spend some time talking about the anatomy of an AJAX operation using an example code. Here we will go over the sequence of things that occur in a typical AJAX-based interaction between a browser and the server. We will then look into the methods and properties of the XMLHttpRequest JavaScript object. We will also learn more about the XMLHttpRequest object. In the latter part of this presentation, I will touch briefly on AJAX security issues. Then I will talk about some JavaScript debugging tools for testing and debugging AJAX applications. I will end this presentations briefly mentioning the current issues of AJAX as a technology and things that will be coming in the future. 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 10/08/2006
10/08/2006 ●S Topics Covered in Other Presentations AJAX Toolkits Frameworks json (Java Script Object Notation) ° Dojo Toolkit DWR Direct Web Remoting AJAX-enabled JSF Components Google Web Toolkit(GWT Maki Wicket and shale (as ajax-aware Web applicaion frameworks JavaScript Programming Best Practices The topics in this slide are going to be covered in other presentations The" AJAX Toolkits and Frameworks" presentation covers various types of AjAX toolkits and frameworks that are available today Then there are presentations that talks about each of these toolkits and frameworks in detail
The topics in this slide are going to be covered in other presentations. The “AJAX Toolkits and Frameworks” presentation covers various types of AJAX toolkits and frameworks that are available today. Then there are presentations that talks about each of these toolkits and frameworks in detail. 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 10/08/2006
10/08/2006 令Sn 1. Rich User Experience for Web Application Now let's talk about rich user experience for web applications
1. Rich User Experience for Web Application Now let's talk about rich user experience for web applications. 10/08/2006
10/08/2006 OSun 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 stal 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 In order to understand what we mean by rich user experience, we can take a look at a typical desktop application we use, for example, spreadsheet When we use standalone desktop application, we expect the application to respond to what we do at the moment intuitively and quickly, giving us meaning feed-backs. For example, if you are hovering your mouse over a cell in a spreadsheet, the color of the cell might change In using the desktop application, things happen more naturally. For example, you don t have to click a button or link to make things happen Instead you move your mouse around and things are responding accordingly
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 In order to understand what we mean by rich user experience, we can take a look at a typical desktop application we use, for example, spreadsheet. When we use standalone desktop application, we expect the application to respond to what we do at the moment intuitively and quickly, giving us meaning feed-backs. For example, if you are hovering your mouse over a cell in a spreadsheet, the color of the cell might change. In using the desktop application, things happen more naturally. For example, you don't have to click a button or link to make things happen. Instead, you move your mouse around and things are responding accordingly. 10/08/2006
10/08/2006 Characteristics of Conventional web Applications "Click. wait. and refresh"user interaction Page refreshes from the server needed for all events, data submissions, and navigation Synchronous "request/response"communication mode the user has to wait for the response Page-driven: Workflow is based on pages Page-navigation logic is determined by the server So these are characteristics rather limitations of the conventional web applications First, in a conventional web application, a user interaction is basically a repeated sequence of " click, wait and refresh cycles. In fact, a total page refresh has to occur for anything you do with the server whether it is to send a small piece of data to the server, or retrieving a small piece of data from the server Then the user has to wait for the arrival of the response from the server. This interaction is considered synchronous in the sense that the user has to wait until a response from the server is received. of course we all know what it means hen the network is down or slow-blank screen The flow of conventional web application is page-driven meaning the workflow of the application is based on pages And which page to display next is determined by the server
So these are characteristics, rather limitations of the conventional web applications. First, in a conventional web application, a user interaction is basically a repeated sequence of “click, wait and refresh” cycles. In fact, a total page refresh has to occur for anything you do with the server whether it is to send a small piece of data to the server, or retrieving a small piece of data from the server. Then the user has to wait for the arrival of the response from the server. This interaction is considered synchronous in the sense that the user has to wait until a response from the server is received. Of course, we all know what it means when the network is down or slow - blank screen. The flow of conventional web application is page-driven meaning the workflow of the application is based on pages. And which page to display next 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 • Synchronous “request/response” communication model > The user has to wait for the response • Page-driven: Workflow is based on pages > Page-navigation logic is determined by the server 10/08/2006
10/08/2006 Issues of Conventional Web Application Interruption of user operation Users cannot perform any operation while waiting for a 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 Constrained by html Lack of useful widgets These are the reasons why Rich Internet Application(RIA) technologies were born The conventional behavior of web application we talked in the previous slide has several limitations. First of all, it is slow both in terms of actual and especially in perceived responsiveness because the user simply cannot do anything until a response is received The second issue is loss of operational context during refresh Because the total page has to be refreshed, in a sense your brain has to start from scratch in understanding each page Another example is loss of scrolled position If you have a page in which you have scrolled down, the next time the same page get refreshed, you have to scroll it down again There is no instant feed back to user activities since the user has to wait for the response from the server Now there have been several so called rich Internet application technologies that addressed some of these problems
The conventional behavior of web application we talked in the previous slide has several limitations. First of all, it is slow both in terms of actual and especially in perceived responsiveness because the user simply cannot do anything until a response is received. The second issue is loss of operational context during refresh. Because the total page has to be refreshed, in a sense your brain has to start from scratch in understanding each page. Another example is loss of scrolled position. If you have a page in which you have scrolled down, the next time the same page get refreshed, you have to scroll it down again. There is no instant feedback to user activities since the user has to wait for the response from the server. Now there have been several so called Rich Internet Application technologies that addressed some of these problems. 8 Issues of Conventional Web Application • Interruption of user operation > Users cannot perform any operation while waiting for a 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 • Constrained by HTML > Lack of useful widgets These are the reasons why Rich Internet Application (RIA) technologies were born. 10/08/2006
10/08/2006 令Sn 2 Rich Internet Application (RIA) Technologies So let's talk about Rich Internet Application(RIA) technologies
2. Rich Internet Application (RIA) Technologies So let's talk about Rich Internet Application (RIA) technologies. 10/08/2006
10/08/2006 ●S Rich Internet Application(RIA) Technologies Applet Macromedia flash Java Webstart DHTML DHTML With hidden frame AJAX 10 This is the list of RIa technologies including AJAX. So let's go over each of these in a bit more detail
This is the list of RIA technologies including AJAX. So let's go over each of these in a bit more detail. 10 Rich Internet Application (RIA) Technologies • Applet • Macromedia Flash • Java WebStart • DHTML • DHTML with Hidden IFrame • AJAX 10/08/2006
