Your SlideShare is downloading. ×
0
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
iat352-09-wk11-ajax-web-application0.ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

iat352-09-wk11-ajax-web-application0.ppt

547

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
547
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Diagram courtesy to Jesse James Garrett, http://www.adaptivepath.com/ideas/essays/archives/000385.php
  • Diagram courtesy to Jesse James Garrett, http://www.adaptivepath.com/ideas/essays/archives/000385.php
  • This part is based on Philip McCarthy ’s article: Ajax for Java developers: Build dynamic Java applications, which is available at: http://www.ibm.com/developerworks/library/j-ajax1/
  • Transcript

    • 1. Ajax: A New Approach to Web Applications IAT352 – Spring 2009 Eric Yang School of Interactive Arts and Technology Simon Fraser University Surrey
    • 2. Why Ajax? <ul><li>Question: can web applications be as responsive as their desktop counterparts? </li></ul><ul><ul><li>Desktop applications have a richness and responsiveness that has seemed out of reach on the Web  there is a gap </li></ul></ul><ul><li>With Ajax, the gap is closing  </li></ul><ul><li>Examples of Ajax web applications: everything </li></ul><ul><ul><li>Google Suggest </li></ul></ul><ul><ul><ul><li>everything happens almost instantly, with no waiting for pages to reload </li></ul></ul></ul><ul><ul><li>Google Maps </li></ul></ul><ul><ul><ul><li>everything happens almost instantly, with no waiting for pages to reload </li></ul></ul></ul><ul><li>These great dynamic Web UIs were sufficiently groundbreaking to be dubbed &quot;Web 2.0&quot; </li></ul>
    • 3. Defining Ajax <ul><li>Ajax: Asynchronous JavaScript & XML </li></ul><ul><ul><li>An approach to Web application development that uses client-side scripting to exchange data with the Web server </li></ul></ul><ul><ul><li>As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow  </li></ul></ul><ul><ul><li>the immediacy and usability of native desktop applications </li></ul></ul><ul><li>Ajax is not a technology but a design pattern that based on the following technical components: </li></ul><ul><ul><li>XHTML and CSS : for standards-based presentation </li></ul></ul><ul><ul><li>Document Object Model (DOM) : for dynamic display and interaction </li></ul></ul><ul><ul><li>XML and XSLT : for data interchange and manipulation </li></ul></ul><ul><ul><li>XMLHttpRequest : for asynchronous data retrieval </li></ul></ul><ul><ul><li>JavaScript : binding everything together </li></ul></ul>
    • 4. Who’s Using Ajax? <ul><li>Google is making a huge investment in developing the Ajax approach: </li></ul><ul><ul><li>Gmail </li></ul></ul><ul><ul><li>Google Groups </li></ul></ul><ul><ul><li>Google Suggest </li></ul></ul><ul><ul><li>Google Maps </li></ul></ul><ul><ul><li>Orkut </li></ul></ul><ul><li>Others are following suit: </li></ul><ul><ul><li>Flickr : many of the features that people love depend on Ajax </li></ul></ul><ul><ul><li>A9.com : Amazon’s search engine </li></ul></ul><ul><li>These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications </li></ul><ul><li>Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps </li></ul>
    • 5. Traditional model for web applications vs. Ajax model <ul><li>Traditional: </li></ul><ul><ul><li>user actions trigger an HTTP request back to a web server </li></ul></ul><ul><ul><li>The server does some processing, and then returns an HTML page to the client </li></ul></ul><ul><li>Doesn’t make for a great user experience </li></ul>
    • 6. Traditional model for web applications vs. Ajax model (2) <ul><ul><li>User has to wait some time for server when it’s processing  user interaction come to a halt every time the application needs something from the server </li></ul></ul>
    • 7. Traditional model for web applications vs. Ajax model (3) <ul><li>Ajax: </li></ul><ul><ul><li>Eliminates the start-stop-start-stop nature of interaction by introducing an intermediary — an Ajax engine — between the user and the server </li></ul></ul>
    • 8. Traditional model vs. Ajax model (4) <ul><ul><li>Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server </li></ul></ul><ul><ul><ul><li>So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something </li></ul></ul></ul>
    • 9. Elaboration on Ajax engine <ul><li>Every user action (that normally would generate an HTTP request to server) would use JavaScript to call Ajax engine instead </li></ul><ul><li>Any response to a user action that doesn’t require a trip back to the server, the engine handles on its own </li></ul><ul><ul><li>e.g. simple data validation, editing data in memory, and even some navigation </li></ul></ul><ul><li>If the engine needs something from the server in order to respond, the engine makes those requests asynchronously </li></ul><ul><ul><li>e.g. submitting data for processing, loading additional interface code, or retrieving new data </li></ul></ul>
    • 10. Moving Forward <ul><li>The biggest challenges in creating Ajax applications are not technical </li></ul><ul><ul><li>The core Ajax technologies are mature, stable, and well understood </li></ul></ul><ul><li>The challenges are for the designers of these applications </li></ul><ul><ul><li>Begin to imagine a wider, richer range of possibilities </li></ul></ul>
    • 11. Ajax Case Study: A dynamically updated Shopping Cart
    • 12. Topics <ul><li>Touch on all the tools you need to begin developing your own applications using Ajax </li></ul><ul><li>Explain the concepts behind Ajax and demonstrate the fundamental steps to creating an Ajax interface for a Java-based Web application </li></ul><ul><li>Use code examples to demonstrate both the server-side Java code and the client-side JavaScript that make Ajax applications so dynamic </li></ul>
    • 13. A Better Shopping Cart <ul><li>A simple example of a shopping cart that is dynamically updated as items are added to it </li></ul><ul><ul><li>Download the source code by clicking here </li></ul></ul><ul><ul><li>This approach would let users continue browsing and adding items to their carts without having to wait after each click for a full-page update </li></ul></ul><ul><ul><li>While some of the code shown here is specific to the shopping cart example, the techniques illustrated can be applied to any Ajax application </li></ul></ul>
    • 14. Listing 1: the HTML code the shopping-cart example uses
    • 15. The Ajax Roundtrip <ul><li>An Ajax interaction begins with a JavaScript object called XMLHttpRequest </li></ul><ul><ul><li>The first step in this Ajax roundtrip is to create an XMLHttpRequest instance  </li></ul></ul><ul><ul><ul><li>It allows a client-side script to perform HTTP requests, and it will parse an XML server response </li></ul></ul></ul><ul><ul><li>The HTTP method (GET/POST) and the destination URL are then set on the XMLHttpRequest object </li></ul></ul><ul><li>To be asynchronous: </li></ul><ul><ul><li>When you send that HTTP request, you want the page to continue reacting to the user's interaction and deal with the server's response when it eventually arrives </li></ul></ul><ul><ul><li>To accomplish this, register a callback function with the XMLHttpRequest and then dispatch the XMLHttpRequest asynchronously  </li></ul></ul><ul><ul><li>Control then returns to the browser, but the callback function will be called when the server's response arrives. </li></ul></ul>
    • 16. The Ajax Roundtrip (2) <ul><li>On web server, the request arrives just like any other HttpServletRequest  </li></ul><ul><ul><li>After parsing the request parameters, the servlet invokes the necessary application logic, serializes its response into XML, and writes it to the HttpServletResponse </li></ul></ul><ul><li>Back on the client side, the callback function registered on the XMLHttpRequest is now invoked to process the XML document returned by the server </li></ul><ul><ul><li>Finally, the user interface is updated in response to the data from the server, using JavaScript to manipulate the page's HTML DOM </li></ul></ul>
    • 17. <ul><li>The Ajax Roundtrip </li></ul>
    • 18. Dispatching an XMLHttpRequest <ul><li>Creating and dispatching an XMLHttpRequest from the browser </li></ul><ul><ul><li>Note: the method to create an XMLHttpRequest differs from browser to browser </li></ul></ul>
    • 19. Dispatch an Add to Cart XMLHttpRequest <ul><li>We want to invoke an Ajax interaction whenever the user hits the Add to Cart button for a catalog item </li></ul><ul><ul><li>The onclick handler function named addToCart() is responsible for updating the state of the cart through an Ajax call (see Listing 1 ) </li></ul></ul><ul><li>As shown in Listing 3, the first thing that addToCart() needs to do is obtain an instance of XMLHttpRequest by calling the newXMLHttpRequest() function from Listing 2 </li></ul><ul><li>Next, it registers a callback function to receive the server's response </li></ul>
    • 20. Servlet request handling <ul><li>Handling an XMLHttpRequest with a servlet is largely the same as handling a regular HTTP request from a browser </li></ul><ul><ul><li>A Cart bean is retrieved from the user's session and its state is updated according to the request parameters </li></ul></ul><ul><ul><li>The Cart is then serialized to XML, and that XML is written to the ServletResponse </li></ul></ul><ul><ul><li>Note: It's important to set the response's content type to application/xml, otherwise the XMLHttpRequest will not parse the response content into an XML DOM </li></ul></ul>
    • 21. An example of the XML produced by Cart.toXml() method <ul><li>Note the generated attribute on the cart element, which is a timestamp produced by: </li></ul><ul><li>System.currentTimeMillis() </li></ul><ul><li>If you take a look at Cart.java in the source code, you'll see that the XML is produced simply by appending strings together </li></ul>
    • 22. Response handling with JavaScript <ul><li>The readyState property of XMLHttpRequest is a numeric value that gives the status of the request's lifecycle: </li></ul><ul><ul><li>0 (Uninitialized): The object has been created, but not initialized (the open method has not been called). </li></ul></ul><ul><ul><li>1 (Open): The object has been created, but the send method has not been called. </li></ul></ul><ul><ul><li>2 (Sent): The send method has been called. responseText is not available </li></ul></ul><ul><ul><li>3 (Receiving): Some data has been received. responseText is not available </li></ul></ul><ul><ul><li>4 (Loaded): All the data has been received. responseText is available </li></ul></ul><ul><li>Each time the readyState changes , the readystatechange event fires and the handler function attached via the onreadystatechange property is called </li></ul>
    • 23. Response handling with JavaScript (2) <ul><li>It is the job of getReadyStateHandler() to return a function that checks whether the XMLHttpRequest has completed, and passes the XML response onto the handler function specified by the caller </li></ul>
    • 24. About getReadyStateHandler() <ul><li>getReadyStateHandler() is a relatively complex piece of code, especially if you're not used to reading JavaScript </li></ul><ul><ul><li>The important thing is that you understand how to use getReadyStateHandler() in your own code </li></ul></ul><ul><li>In Listing 3 , you saw getReadyStateHandler() called as follows: </li></ul><ul><li> handlerFunction = getReadyStateHandler(req, updateCart) </li></ul><ul><li>The function returned by getReadyStateHandler() in this case will check if the XMLHttpRequest in the variable req has completed and then call a function named updateCart with the response XML </li></ul>
    • 25. Extracting the cart data <ul><li>The function interrogates the shopping cart XML document using DOM calls and updates the Web page (see Listing 1 ) to reflect the new cart contents </li></ul>
    • 26. Ajax Design Patterns: HeartBeat <ul><li>How do you know the user still has an application in the browser and is actively working with it? </li></ul>
    • 27. Heartbeat sequence
    • 28. Two Main ways to maintain user records: <ul><li>In memory </li></ul><ul><ul><li>The data is not persisted and will be lost once the user is timed out. In most environments, this will happen if you rely on standard session objects. </li></ul></ul><ul><li>Directly in the database </li></ul><ul><ul><li>Within persistent user records. There's some extra storage and data maintenance involved, but the benefit is that you always know when the user was last seen </li></ul></ul>
    • 29. Some relevant issues <ul><li>How much time between Heartbeats? How much delay until a user is declared inactive? </li></ul><ul><li>The appropriate figure could vary from subseconds to up to 30 minutes or more depending on the following factors: </li></ul><ul><ul><li>Application </li></ul></ul><ul><ul><ul><li>In some applications, up-to-the-second information is more critical </li></ul></ul></ul><ul><ul><ul><li>In a multiuser system, for example, users' work may be dictated by whoever else is present. If you wait 10 minutes to tell Alice that Bob has quit the chess game, she might be annoyed that she wasted the last 10 minutes thinking about her next move </li></ul></ul></ul><ul><ul><li>Available resources </li></ul></ul><ul><ul><ul><li>Ideally, the period should be as short as possible, though you can't always justify this. For an intranet application, you're likely to use a shorter period in recognition of better resources per user </li></ul></ul></ul>
    • 30. An Example <ul><li>Refer to an SFU online book for more details: </li></ul><ul><ul><li>Ajax Design Patterns: 17.5. Heartbeat </li></ul></ul>

    ×