Building Dynamic Web Applications with AJAX
Joshua Eichorn
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.
- Its nothing new, the main requirement being that the web browser has an XMLHttpRequest object or equivalent
- The term AJAX was coined Jesse James Garrett in February 2005
- Some would say the coining of the new term has caused a Tipping point to be reached
So I can communicate with my server in a different way. Now what?
- You can enhance your sites by allowing quicker access to data
- You can reduce the amount of bandwith used in data presentation
- You can reduce the # of pages needed to perform a task
- You can make a web application that feels more like a native application
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
Using AJAX to have a big impact
- Anywhere you have a search box, adding Google suggest functionality
- Pages where you have a multi-step process
- When working with large or highly interdepent datasets
Usability Tips
These are mainly taken from an article by Thomas Baekdal
- Know the difference between a web application and a website
- Do not break what the user is focusing on
- Consider how to handle users that cannot use XMLHttpRequest
- Do use it to eliminate confirmation pages
- Do not use it to eliminate acceptance
- Do not over-use it
- Make sure to give the user feedback
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)
- wz_dragdrop Javascript library for Drag and Drop.
- prototype Javascript effects lib from ROR
- Image_Transform PHP code to do the image resizing (Use cvs version until the next release)
- JPSpan the AJAX library
You also need the GD and exif extensions, and maybe a bunch of other stuff I missed
Debugging Tips
- Always test your PHP code before integrating it with the Javascript side
- Use the debug function (or some version of it) included in myMemento.js instead of alert for debugging your javascript code
- Create a log class to use with the JPSpan Observer code
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:
- Server: Creates a thumbnail for every image in the photos dir
- Server: Sets a default position for every thumbnail
- Server: Loads in thumbnail position data from a sqlite db and overwrites default positions with it
- Client: Creates a new div to hold each image, and adds the image to it
- 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
- JS - myMemento.js
- PHP - server.php (JPSpan server)
- PHP - myMemento.php (setup)
- PHP - myMemento.class.php (integration class)
- PHP - myMementoModel.class.php (main logic class)
- PHP - myMementoStorage.class.php (sqlite storage)
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