1 / 21

AJAX Basics

AJAX Basics. Overview. AJAX technology Rich User Experience Characteristics Real live examples JavaScript and AJAX Web application workflow model – synchronous vs asynchronous XMLHttpRequest object Response data processing. Getting closer to desktop.

nieve
Download Presentation

AJAX Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Basics

  2. Overview • AJAX technology • Rich User Experience • Characteristics • Real live examples • JavaScript and AJAX • Web application workflow model – synchronous vs asynchronous • XMLHttpRequest object • Response data processing

  3. Getting closer to desktop • Compare desktop application against web page • The desktop app responses interactively and quickly • Gives feedback instantly (doesn’t reload every time) • More natural • The web site reloads every time to provide the user with response

  4. Conventional Web Application • Workflow is "Click, wait, load" • All events that need feedback need the page to reload from server • Synchronous request/response model • Page-driven • Logic is determined by server • Very hard to become flexible

  5. Issues of conventional model • Interrupts user activity while loading • Looses context of operation during loading (e.g..: scrolled position) • No instant feedback • Constrained by HTML

  6. Rich Internet Applications • Rich Internet Applications can be developed as: • Applet • Flash • Java WebStart • DHTML • DHTML with hidden IFrame • AJAX

  7. AJAX • DHTML with asynchronous communication capability via XMLHttpRequest • Most viable RIA technology • All browsers support it, although there are some incompatibilities • no plug-ins or additional code required • Many components developed, using it

  8. Case studies • Applications that take advantage of AJAX: • Google maps • Google Suggests • NetFlix • Gmail • Yahoo Maps • Many more emerging

  9. Case studies – Google map • The user can drag the map with the mouse, instead of clicking (compare with www.bgmaps.com ) • The action that triggers loading of images is moving the map around • The map data is downloaded asynchronously via AJAX • Other parts of the page remain the same • No loss of operation context

  10. Why AJAX? Classic web application (synchronous) User operation is interrupted while fetching data AJAX web application (asynchronous) User operation is NOT interrupted while fetching data

  11. XMLHttpRequest • JavaScript object • Supported by Mozilla, Opera, Safari, • Supported by IE as ActiveX control • Communicates with server via GET/POST requests • Performs in the background asynchronous communication with the server • Does not interrupt user workflow

  12. Server-side processing • Server remains the same • Receives standard GET/POST request • Has few constrains: • Requests are more frequent • Response content type can be: • text/xml • text/plain • text/json • text/javascript

  13. AJAX application model – data validation example

  14. XMLHttpRequest object • open ("HTTP Method", "URL", "synchronous or asynchronous); • Assigns HTTP method, request URL and mode • send (content); • Sends the request • abort(); • Terminates request • getAllResponseHeaders (); • Returns all HTTP headers of the response (name + value) as string

  15. XMLHttpRequest object • getResponseHeader ("header"); • Returns value of the specified header • setRequestHeader ("name", "value"); • Sets request header before sending the request

  16. XMLHttpRequest object • onreadystatechange • JavaScript event handler function, that fires at each state change • readyState • Current status of the request • 0 – uninitialized • 1 – loading • 2 – loaded • 3 – interactive (some data was received • 4 – complete • Status • The HTTP status returned from server

  17. XMLHttpRequest object • responseText • String, containing data, returned from server • responseXML • XML document tree, containing the data from the server • statusText • Status text, returned from server

  18. AJAX Security • Server side - AJAX applications use the same server-side schemes • Subject to same security issues as regular web application • Cross-site scripting • Injection flaw

  19. AJAX Security • Client side • The JavaScript code is visible to the user • Can be used for inferring weaknesses of server security, unless obfuscation or compression is used • The code is downloaded from server and executed at client side • Can compromise client by mal-intended code • JavaScript code is constrained by the sandbox model

  20. Ajax and the back button • When user is using Ajax application the actions taken do not update the browser history • When pressing back or refresh buttons the state is lost • Page fragment identifier is the part of the URL after the # sign • We can set the page URL changing only the page fragment identifier • Doesn’t reload the page • Affects history http://example.com/index.html#fragment

  21. Ajax and the back button • Although the page-fragment solution does work for bookmarks it is still no good for back/forward buttons • We can use hidden iframes • When there is frame in the page the back/forward buttons control them • The frame content can control the overall page • Mixing the iframe and the page fragment approaches may lead to problems!

More Related