Intro to AJAXby Paul Davis

About Me Paul Davis Kaosweaver

What is AJAX? Asynchronous JavaScript And XML AJAX is designed to make web

pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, and usability.

What is AJAX? (cont) AJAX uses a combination of: XHTML (and HTML) CSS DOM JavaScript XMLHttpRequest XML, JSON, EBML, text, etc

AJAX is not a technology in itself, but a name for a group used together.

Why AJAX? The main reason AJAX is being

explored and used today (after the legacy browsers have all but been relegated to obscurity) is overcoming the page loading requirements of the HTML/HTTP web pages.

Web pages are “fire once” and not like a native application on a machine which can change according to user interaction.

Why not Flash? It is true, Flash did (and does)

interact with the user and can stream content as well as interface changing and all. The reasons against Flash vs AJAX:

Flash requires a plug in Flash has a much larger footprint Flash is more complex to develop in Flash would take over the entire

interface

AJAX Advantages Comes with all modern browsers Better user interface, responds to

user interaction. Low bandwidth, even lower then

regular HTML/HTTP server applications

Separation of data, format, style and function (AJAX coding doesn't require this, but is makes it a whole lot easier to do when it is separated)

AJAX Disadvantages Harder/impossible to bookmark

AJAX updated page content. Network latency delays impact

the application's responsiveness. Search engines won't crawl AJAX

generated content. Relies upon JavaScript, which

some users turn off. Browser compatibility issues

AJAX Options Frameworks

Direct AJAX frameworks AJAX component frameworks Server driven AJAX frameworks

Create your own Smaller code Specific code Maintainable code Less apt to be hacked

AJAX JavaScript Frameworks Apache XAP – for large applications Clean AJAX – message based engine Dojo Toolkit – component based Helmi – Rich Internet Application

tools Jmaki – lightweight & stubs for SSC Jquery – lightweight browser package Mootools – compact, modular OOP prototype – harvested toolkit Spry – Adobe's ajax library

Other AJAX frameworks WT, C++ webtoolkit DWR, Java remoting toolkit Echo, pure Java toolkit Google web toolkit – widgets

w/goggle ASP.NET Ajax – was Atlas, MS's stuff Zope 3 – Python framework Symfony – PHP framework CFAjax – Cold Fusion framework

How does it work? A request is made to communication

between the browser and the server via the XMLHttpRequest IE vs the world...

A response is received through the onreadystatechange and when the readyState property is 4

A request is made which returns the data from the server to the browser

What about the .... The fancy window affects of stuff

moving, drag and drop, flashing, animation, etc is all merely a flashback to DHTML from the 90's, but repackaged and called AJAX. Most of it is all client (browser) side and doesn't depend on the server to browser communication to function. This is the primary reason I wrote my own AJAX code.

What can you do with it? Form validation Instant search updates Content management on the fly Check in stock items Image galleries Instant chat Email, maps, photo storage utility

(gmail, goggle maps, flickr)

Leverage it for your clients Form validation that tests the input

verse the server side requirements for the field:

Check email addresses to see if the client already signed up.

Check a date to see if a reservation would be available

Check a zip code to see if it is valid. Give the visitor feedback before the

form is submitted.

Make search a snap Have the results change as the

user entered information. Have the product/services list

change when the user selects categories.

Use multiple search criteria to make the results meaningful.

Give the user the power to change the order of the results to suit their needs

Instant CMS Create a login for your client and

then have an edit link on all of the editable areas – they click on it and the content is replaced with a text area they can edit the content, they submit it and it is updated on the spot.