Introduction to AJAX Sue Brandreth

What is Ajax?

A synchronous J avaScript A nd X mlHttpRequest (XHR) –Some use XML, but that is misleading

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.

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.

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

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.

Example We want to input data into a textbox. We want the textbox to have intellisense property; guess entries according to input. e.asphttp:// e.asp Only the ‘span’ part of the html code is changed.

Data Exchange in AJAX In AJAX:

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

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.

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

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

How AJAX Works

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”

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

Some AJAX examples Google Calendar Flickr Rojo Meebo Backpack

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

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

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

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

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)

Source: Garrett(2005)

Why Ajax? Source: Garrett(2005)

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.

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.

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)

XHR : Creating

XHR : Sending the Request true = asynchronous

XHR : Using a callback handler

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

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

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 –

AJAX Security – Server of Origin Policy

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

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

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

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.