Aarron Walter

Adobe has thrown their hat in the JavaScript framework ring (which is getting pretty flooded) with the introduction of Spry. What differentiates it from the dozens of other frameworks out there is the focus on XML as a central, dynamic data source fetched by Ajax. Their demos include some very slick utilities including a photo gallery, an RSS reader, and a product display system. The implementation of these complex utilities appears to be very simple. They highlight key sections in the their source code to make clear the ease of development. Of course, they also have the very familiar effects library that is virtually identical to its predecessors.

Because they are a bit late to market with their framework, I’m not sure how willing most people who are already using frameworks will be to abandon the ones they have already grown accustomed to, but people who are just getting started with JavaScript frameworks and Ajax may find this option especially enticing for its ease of use. Here’s how Adobe wants to position themselves in the framework world:

‚ÄúAs we looked at the landscape of Ajax frameworks, we realized that many of them were more oriented to the skills of a programmer and were focused on application development. Based on the needs of the design community, we wanted to put forth an approach that is very “HTML-centric” to help them add basic interactivity to their page designs.‚Äù

Spry FAQ

Jeremy Keith did a nice job at Web Directions South in his talk entitled “Explaining Ajax” of gently introducing those unfamiliar, and familiar alike to Ajax and the concepts that make it tick. His presentation walks through the history and evolution of Ajax, and concludes with a fun game of identifying Ajax at work (the audience was surprisingly wrong on a few occasions). The presentation podcast and slides are free to download.

You may also find his presentation on Hijax equally as interesting, which identifies the Accessibility and Usability shortcomings of Ajax and offers an alternate way of using it to be backwards compatible and allows it to gracefully degrade.

A couple of my readers from my recent SitePoint article have asked me about how they could extend the Ajax mailing list sign up system to receive further inputs like the user’s name and phone number. It’s actually pretty simple. If you have additional fields in your form, just modify the parameters string in mailingList.js. Here’s an example:

var pars = 'address='+escape($F('address')) + '&firstName='+escape($F('firstName')) + '&lastName='+escape($F('lastName')) + '&phone='+escape($F('phone'));

You can see that you can append as many or as few inputs from your form by just extending the GET string passed to the PHP script. Notice I’ve added the “&” before the next parameter names as is required in any GET string with more than one variable included. Of course you would need to adjust your MySQL table to include these fields, and change storeAddress.php to receive the values as well.

$address = $_GET['address'];
$firstName = $_GET[’firstName’];
$lastName = $_GET[’lastName’];
$phone = $_GET[’phone’];


$addresscheck = mysql_query("SELECT * FROM mailinglist WHERE email='" . $address . "', firstName='" . $firstName . " ', lastName='" . $lastName . "', phone=' . $phone . "' ");

It’s also quite easy to modify this technique to work for things like contact forms, or user input in a CMS by simply adjusting your form, and the references to the field names. The principles are still the same.

If you are interested in other useful Ajax tools, you may want to check out Dustin Diaz’s Ajax contact form. It’s pretty clever, and packed with nice effects, but seems to struggle to work in Opera. It’s a pretty sophisticated example of a contact form.

A word of caution, it’s pretty easy to get swept up by the allure and ease of implementation of many Ajax/DOM scripting tricks. Always ask yourself how it benefits or hurts the user experience. If you find yourself adding features because they are cool, yet they negatively impact findability, accessibility, or cross-browser use then you probably should reconsider. James Edwards has written a sobering article about Ajax and screen readers (lump search engine spiders in that group too as they are equally as blind) that may bring you back down to earth about the Ajax trend. I should also mention that my article is actually backwards compatible for those without JavaScript enabled, giving us the best of both worlds. The article also uses Ajax specifically to enhance the user-experience by making the impulse action of signing up for a mailing list faster and more convenient.

There are some good books on the market to help introduce you to the ways in which Ajax and PHP can work together to create user-friendly web applications. Apress recently released a book by Lee Babin entitled Beginning Ajax with PHP: From Novice to Professional. The book does a good job of introducing key concepts by way of useful examples that solve common problems. It’s currently my favorite for bridging the gap between the two technologies.

SitePoint also has a nice book on Ajax entitled Build Your Own Ajax Web Applications. This book is focused specifically on Ajax, not so much about connecting client-side to server-side scripts.

SitePoint.com has published my article entitled Use AJAX and PHP to Build your Mailing List, which walks you through the development of a simple system that allows your visitors to sign up for a mailing list stored in a MySQL database without having to refresh or leave the page. I use Prototype to send an Ajax call to a PHP script to store the address and return a success or failure message to the HTML page. It’s a very simple approach, but you’ll need to know a bit about PHP and JavaScript to grasp the details. A working example of the script is included to help illustrate how it works.

A very useful improvement to this script would be to tie into a mailing list management system via an API, which would allow you to store addresses to a system where you can later send HTML emails to your audience and track views, clicks and other important data. The system I use is Mail Chimp, which has a nice PHP class that makes tying into their API easy.