Introduction to AJAX Sue Brandreth What is Ajax

Introduction to AJAX Sue Brandreth

What is Ajax?

What is Ajax?

What is Ajax? • Asynchronous • Java. Script • And • Xml. Http. Request (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. • http: //www. w 3 schools. com/ajax_exampl 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, Java. Script – 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. XMLHttp. Request 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 • Java. Script 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 Auto. Suggest 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 Java. Script 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 Java. Script 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 Java. Script function that gets the response and manipulates the DOM, based on the text returned.

Xml. Http. Request 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: – response. XML – Returns a DOM document (can use functions such as, get. Element. By. Id()) – response. Text – A text string (can be HTML, or even Java. Script 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) • XMLHttp. Request. response. XML • Decouples the server from presentation issues • Could perform XSLT transformation on returned XML – HTML • XMLHttp. Request. response. Text • Server generates HTML, script “injects” HTML via inner. HTML • Server is now concerned with presentation – Java. Script • XMLHttp. Request. response. Text • Use the eval() Java. Script command • Again, our server code is concerned with presentation

AJAX Concerns • • • Security Browser Compatibility Accessibility The Back Button What if Java. Script 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 – http: //codinginparadise. org/projects/dhtml_history/README. html

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 Java. Script • Most Java developers know enough Java. Script to be dangerous. – If you don’t know what you are doing, you could cause memory leaks on the client machine. • Most Java. Script functionality can be factored out and encapsulated

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