Intro to AJAX

1
Intro to AJAX

• by Paul Davis

2
About Me

• Paul Davis
• Kaosweaver

3
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.

4
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.

5
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.

6
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

7
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)

8
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

9
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

10
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

11
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

12
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

13
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.

14
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)

15
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.

16
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

17
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.