Introduction to AJAX

1. Introduction to AJAX Sue Brandreth

2. What is Ajax?

3. What is Ajax?

4. What is Ajax? • Asynchronous • JavaScript • And • XmlHttpRequest (XHR) • Some use XML, but that is misleading

5. What is AJAX ? • Asynchronous Javascript and XML. • Not a stand-alone language or technology. • It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. • It is a client side technology.

6. Purpose of AJAX • Prevents unnecessary reloading of a page. • When we submit a form, although most of the page remains the same, whole page is reloaded from the server. • This causes very long waiting times and waste of bandwidth. • AJAX aims at loading only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page.

7. Technologies Used • AJAX uses: • Javascript (for altering the page) • XML (for information exchange) • Server-side technology

8. Simple Processing • AJAX is based on Javascript, and the main functionality is to access the web server inside the Javascript code. • We access to the server using special objects; we send data and retrieve data. • When user initiates an event, a Javascript function is called which accesses server using the objects. • The received information is shown to the user by means of the Javascript’s functions.

9. Example • We want to input data into a textbox. • We want the textbox to have intellisense property; guess entries according to input. • http://www.w3schools.com/ajax/ajax_example.asp • Only the ‘span’ part of the html code is changed.

10. Data Exchange in AJAX • In AJAX:

11. What is AJAX? • Asynchronous Javascript and XML • Not all AJAX apps involve XML • Combination of technologies • XHTML, CSS, DOM • XML, XSLT, XMLHttp, JavaScript • Some server scripting language • A method for building more responsive and interactive applications

12. AJAX Components XHTML and CSS Ajax applies these familiar Web standards for styling the look and feel of a page and to markup those areas on a page that will be targeted for data updates. DOM (document object model) Ajax uses the DOM to manipulate dynamic page views for data and to walkthrough documents to “cherrypick” data. The DOM enables certain pieces of an Ajax page to be transformed and updated with data. XML, JSON (Javascript Object Notation), HTML, or plain text Ajax can use any of these standards to provide structure to the data it passes to and from a page. XMLHttpRequest object The heavy lifter for Ajax: It’s a javascript object embedded in most modern browsers that sets up data request/response pipelines between client and server. Javascript Lightweight programming language that Ajax uses for instructions to bind all of the components together.

13. Why AJAX? • Want to make your applications more interactive • Want to incorporate data from external Web Services • Don’t want your users to have to download a plugin

14. Client vs. Server Scripting • Client scripting • Web browser does all the work • Server Scripting • Web server does all the work • AJAX leverages both client and server side scripting

15. How AJAX Works

16. AJAX Web Interaction • What you don’t see • Data reload happens in the background • JavaScript queries the server to get the proper data without you knowing it • Page updates without a screen “reload”

17. Potential Problems • Javascript MUST be enabled • Back button doesn’t always work • Pages can be difficult to bookmark • Search engines may not be able to index all portions of an AJAX site • Cross browser differences in how XML is dealt with

18. Some AJAX examples • Google Calendar • Flickr • Rojo • Meebo • Backpack

19. Basic AJAX Components • Server-side Component • Communicates with the database, or web service • Can be written in any server-side language (PHP, ASP, Coldfusion, etc) • Client-side Component • Written in Javascript, often uses XMLHttp • Accesses the server side page in the background

20. Hidden Frame Method • Communication with server takes place in a frame that user can’t see • Back and Forward buttons still work • If something goes wrong user receives no notification

21. XMLHttp Method • Code is cleaner and easier to read • Able to determine if there is a failure • No browser history, Back and Forward buttons break

22. Potential Uses for AJAX • Error checking in Forms • AutoSuggest • Drag and Drop objects functionality • Dynamically move view around on image or map • Preload content you want to show later • Apply limits to search results and get new results quickly

23. Why Ajax? • XHR Support across all browsers • Based on DOM, CSS, XHTML • Emergence of broadband • AJAX-based JavaScript can take considerable bandwidth to download • The “Killer App” - Google Maps • A Catchy Acronym • Coined by Jesse James Garrett of Adaptive Path (February 2005)

24. Source: Garrett(2005)

25. Why Ajax? Source: Garrett(2005)

26. AJAX Alternatives • Adobe Flash • Requires a plug-in • So what? It comes already with almost every browser • Java Web Start/Applets • .NET – No Touch Deployment • Both need a runtime preinstalled • Handheld device browsers generally do not support the full range of Ajax technologies.

27. Implementing AJAX • To implement AJAX we need to answer three questions: • What triggers the AJAX request? • Usually a JavaScript event (onblur, onclick, etc.) • What is the server process that handles the AJAX request and issues the response? • Some kind of URL (use a Service Locator) • What processes the response from the server(what is the callback method)? • A JavaScript function that gets the response and manipulates the DOM, based on the text returned.

28. XmlHttpRequest Object (XHR) • The ‘heart’ of AJAX • First implemented in IE in 1997 as part of the new DHTML standard • Response comes in one of two properties: • responseXML – Returns a DOM document (can use functions such as, getElementById()) • responseText – A text string (can be HTML, or even JavaScript code)

29. XHR : Creating

30. XHR : Sending the Request true = asynchronous

31. XHR : Using a callback handler

32. Handling the Response • Response can be one of the following: • Formatted data (XML, other custom format) • XMLHttpRequest.responseXML • Decouples the server from presentation issues • Could perform XSLT transformation on returned XML • HTML • XMLHttpRequest.responseText • Server generates HTML, script “injects” HTML via innerHTML • Server is now concerned with presentation • JavaScript • XMLHttpRequest.responseText • Use the eval() JavaScript command • Again, our server code is concerned with presentation

33. AJAX Concerns • Security • Browser Compatibility • Accessibility • The Back Button • What if JavaScript is Turned Off?

34. AJAX and the Back Button • Huge usability issue • Returning to the previous state may not be possible when a page is updated dynamically • Difficult to bookmark on a particular page state • Really Simple History (RSH) framework addresses these issues • http://codinginparadise.org/projects/dhtml_history/README.html

35. AJAX Security – Server of Origin Policy

36. AJAX Security • Browsers impose security restrictions • Cannot make requests via the XHR outside of the domain the web page came from • Can set security on IE to get around this (but you really don’t want to) • Mozilla-based browsers require digitally signing your script • User must approve going to site. • Firefox requires additional code

37. AJAX Security • Calling third-party web-services • Application Proxies – Call the web-service from a servlet • Apache Proxy – Configure Apache to invisibly reroute from the server to the target web service domain

38. Problems with JavaScript • Most Java developers know enough JavaScript to be dangerous. • If you don’t know what you are doing, you could cause memory leaks on the client machine. • Most JavaScript functionality can be factored out and encapsulated

39. Ajax Without the J It would be nice to encapsulate all of the JavaScript within our components, so we don’t have to write any JavaScript. JavaServer Faces (JSF) provides a way to accomplish this.