Building Dynamic Web Applications with AJAX

Joshua Eichorn

Creator of phpDocumentor, Senior Architect Uversa Inc.

What is AJAX

AJAX is an ancronym for Asynchronous Javascript And XML. Ajax uses javascript combined with xml to grab information from a server without refreshing the page.

So I can communicate with my server in a different way. Now what?

The two ways to look at AJAX

AJAX can be used to enhance your current web apps (generally optional)

AJAX can be used to provide a backend to a javascript application

The big difference is in the amount of javascript your writing and the feel of your application

Don't overuse ajax, the usability requirements for javascript applications are quite different than the requirements for regular web pages

Examples of AJAX apps

Using AJAX to have a big impact

Usability Tips

These are mainly taken from an article by Thomas Baekdal

Example Application

Our example application is an Alpha version of myMemento a image gallery that is designed to create a scapbook type layout. So far the only the basic functionality of the editor is done, but it a good example to walk through to see some example JPSpan usage. Lets start off by taking a run through myMemento and seeing what it can do.

Third party libraries (or Josh is Lazy and tries to write a minimum amount of code)

You also need the GD and exif extensions, and maybe a bunch of other stuff I missed

Debugging Tips

Logging Code

To log JPSpan errors and success you need to write a logger class and setup the server to load it

// setup for logging define ('JPSPAN_MONITOR', TRUE); require_once JPSPAN . 'Monitor.php'; $monitor = & JPSpan_Monitor::instance(); $monitor->addObserver(new myMementoLogger()); myMementoLogger Class

index page

Since were doing everything in Javascript this is real simple, includes all our javascript code and sets up a basic html shell

index.html code

Code to load thumbnail positions

On page load a javascript setup method is called, this method calls get_image_data which:

  1. Server: Creates a thumbnail for every image in the photos dir
  2. Server: Sets a default position for every thumbnail
  3. Server: Loads in thumbnail position data from a sqlite db and overwrites default positions with it
  4. Client: Creates a new div to hold each image, and adds the image to it
  5. Client: Sets the src of the images and makes them dragable
Main myMemento js code (displayImage and displayImages), PHP Class that is exported to javascript (get_image_data)

Code to save thumbnail positions

Ties into the wz_dragdrop lib, has a method that is called when an image is dropped

Puts the height,width,top, and left into an object and sends them to the server, server stores things into sqlite

Main myMemento js code (imageMoved),

The main Code to browser

Resources

A closing remark

For a group of people who forget about hygiene for weeks on end developers sure have an obsession with cleanliness. First soap and now ajax, all we need is dawn and palmolive and you'll always have something to wash your hands and dishes.

Thanks to Elizabeth Smith for Proof-reading these slides

If your reading this online feel free to leave questions/comments on my blog