Understanding AJAX

Hype, Hope, Hurt and Help

for the Web

MJTSMay 4th, 2006_________________________Terence Conklin, Conklin Systemswww.conklinsystems.com

The Very Short Presentation

AJAX allows you to call server code from web pages!

Look to your favorite web development approach for convenient support

Thanks for coming!

AJAX

AynchronousJavascriptand XML

The Tao of AJAX

HYPE

HURT

HOPE

HELP

AJAX

The Hype

AJAX is not…

• A language

• A toolkit

• A development environment

• New

AJAX is..

• A new name for an old approach

• Not actually dependent on XML

• A technology originally developed by Microsoft

• A single function call

• Only one of a number of techniques for asynchronous access

How AJAX works

• The web server gets a standard page request

• The client loads the page.

• Javascript on the page fires on an event

• The script makes an XMLHTTP Get or Post to the server

• The server sees it as just another HTTP request

• The result is sent to the client

• A callback function in the client Javascript is fired when the data is complete.

The long road to AJAX

• Async before AJAX: – Microsoft Remote Scripting via an applet– Hidden IFRAMEs– Numerous libraries building on the above– XMLHttp object, and later XMLHTTPRequest

• In 2005, the catchy name AJAX was coined, and a star was born!

AJAX

The Hope

AJAX changes the Web Rules

• Data can be loaded on demand

• Pages can be interactive

• It’s possible to pull small amounts of data

• Web pages can store state

• Scripts can load dynamically

What would you do if you could call functions on the server in your web page?

A Minimal Example

Using the SAJAX toolkit on PHP, just:

• Include the Sajax library in your PHP

• Declare your server-side functions

• Let Sajax know which to export

• Include the Sajax-gen’d script in the HTML

• Declare a callback for the results

• Call the server function with a Javascript call

AJAX in action

AJAX enhanced:• Google Maps• Google Suggest• Openrico Dyn Tables• Rev10 Edit-in-Place

Tables

App Replacement:• Cojax Source Viewer• Google Calendar• ajaxWrite

True innovation:• Global Mosaic

Benefits of the AJAX approach

• Familiar web usage model

• Leverages existing web development skills

• Can secure proprietary code on server

• Integrates ‘apps’ seamlessly with existing web content

• “Zero install” technology

• On the web, the app is always current

AJAX

The Hurt

AJAX as a Platform

• The universal platform that’s not– Browser specific, Treos, Lynx, Cellular

• A miserable development environment– Many mixed languages, challenging to debug,

widely varying clients, questionable UI

• Entirely reliant on Javascript

• Requires ActiveX on IE6

AJAX as a Gremlin• Cross domain security

issues• HTTP max number of

connections• These function calls

can fail• Wasn’t designed to be

RPC, and it shows• Out of order responses

• Dearth of tech resources for adv. Javascript

• Potentially huge traffic• Tools are very new

and very much in flux• End result will never

match the OS APIs

AJAX as a web page

• Breaks basic browser features– Back button– Bookmarks– Refresh– Accessibility

• Various workarounds and hacks have been developed

AJAX

The Help

How can you use AJAX today?

• Read up!

• Start small

• Don’t be afraid to try toolkits

• Expect your current environment to add AJAX support

• Refresh those Javascript skills

• Watch for interesting developments

Where do you use AJAX today?

Continue with your core web development

• Solve targeted web usage problems

• Focus on small features with a big impact

• Leverage the flood of AJAX toolkits– Many have one or two ‘killer features’

packaged in an easy-to-use format.

• Look at new websites through new eyes

fin...