Yank, K. (2005) An Introduction to AJAX – SitePoint Video Tutorial – at http://media.sitepoint.com/videos/getvideo.php?captions=0&video=videoajaxintro1&t=b954
“What’s AJAX, really?” you ask. Get the facts behind the AJAX hype!
From the ground-breaking features of Google Maps to the seminal essay by Jesse-James Garrett, Kevin Yank leads you through the cuttting-edge development techniques behind the AJAX buzzword.
Get the facts behind the AJAX hype! This detailed, 17-minute video is the perfect introduction to AJAX. Follow along as SitePoint Technical Director, Kevin Yank, takes you on a tour of some of the seminal works of big players like Google and Adaptive Path, and learn how they helped to define what AJAX means today.
Dive beneath the surface to learn about the constellation of technologies that come together in AJAX applications, including the Document Object Model (DOM), Extensible Markup Language (XML), JavaScript, and XMLHttpRequest, and learn to make intelligent decisions about which of these technologies to use in your own work.
Finally, Kevin shows that the true meaning of AJAX isn’t limited to any particular set of technologies or development techniques, but that it has more to do with the rich user experiences you are able to offer when you make full use of modern browsers’ capabilities.
The perfect primer for the most talked-about technology on the Web today, this video tutorial will help you plant your feet solidly in the wet cement of AJAX development.
What you’ll learn:
- Understand the elements of AJAX architecture.
- Make critical choices about the technologies to use in your AJAX application.
- Peek under the hood of successful AJAX applications like Google Maps.
Yank, K. Using AJAX in Your Web Application – 3-Part Video Tutorial
AJAX: you’ve heard the hype, but have you seen the code?
Learning AJAX has never been easier! In this 3-part video series, SitePoint’s Kevin Yank shows you how you can enhance the usability and functionality of your web applications with AJAX.
Yank, K. Using AJAX in Your Web Application – Part 1 – XMLHttpRequest – Video Tutorial (AVI 42,464KB)
In Part 1, Kevin gives a brief tour of his prototype for a personal finance web application, and stops to point out a usability issue for which AJAX is the ideal cure. Watch as he writes the JavaScript code necessary to enhance the simple form submit buttons so that they send requests to the server in the background, instead of making the user wait for the page to reload every time.
Key techniques discussed and demonstrated in this video include unobtrusive scripting, JavaScript event handlers, using regular expressions to match CSS class names, and using the XMLHttpRequest object to issue AJAX requests in the background. Although some of the server-side code presented in this video is written in PHP, the underlying principles are discussed in terms that apply to all server-side platforms.
What you’ll learn:
- Use AJAX to improve the usability of existing applications.
- Ensure graceful fallback when JavaScript is disabled with unobtrusive scripting.
- Issue AJAX requests silently in the background using XMLHttpRequest.
Yank, K. Using AJAX in Your Web Application – Part 2 – Generating XML Responses – Video Tutorial (AVI 42,808KB)
In Part 2, Kevin walks you through the server side code of his personal finance application, and considers some of the development approaches that can reduce the amount of code you need to write on the server side to add AJAX functionality your applications. Kevin then makes the necessary modifications to process the AJAX requests that were generated in Part 1, and send back a response in XML format that will enable the browser to update the page that the user’s viewing on-the-fly.
Key topics covered in this video include the Model View Controller (MVC) architecture, the use of form buttons (not hyperlinks) for requests that make changes to server-side data, techniques for handling AJAX requests in your server-side code, and generating responses to those requests in XML format.
Much of the code presented in this video is written in PHP, but the principles and development techniques are discussed in terms that apply to all server-side platforms.
What you’ll learn:
- Use MVC architecture to eliminate duplicate code.
- Understand the differences between hyperlinks and form buttons and when to use each.
- Reduce bandwidth bills by generating XML responses.
Yank, K. Using AJAX in Your Web Application – Part 3 – Updating the UI – Video Tutorial (AVI 41,198KB)
In Part 3, Kevin returns to the client side code of his personal finance application to write the code that will handle the XML responses that were generated by the server in Part 2. This code will be responsible not only for updating the user interface with fresh data once an AJAX response has been received, but also for providing “instant feedback” to notify the user when a request is in progress, and when a request has failed.
Key techniques discussed and demonstrated in this video include the judicious use of innerHTML for quick and easy changes to page content, assigning CSS classes to HTML elements to alter their appearance on-the-fly, processing XML data received from the server, and generating structured HTML content using the Document Object Model (DOM).
The JavaScript code required to perform the on-the-fly page updates required by all AJAX applications is among the most complex that a web developer will be asked to write. But it is also some of the most rewarding, because the quality of this code has a direct impact on the quality of the user experience you will produce.
What you’ll learn:
- Provide instant feedback to prevent confusion.
- Choose between innerHTML and DOM techniques for updating page content.
- Process XML data received from the server in JavaScript.
Ballard, J. Ajax Tutorial – Using Ajax – The Mouse Whisperer at http://www.mousewhisperer.co.uk/ajax_page.html
crackajax.net – Programming Rich User Interfaces using Ajax – “Ajax – The Basics” at http://www.crackajax.net/basics.php
Garrett, J.J. (2005) “Ajax: A New Approach to Web Applications” at http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
Ivan Pepelnjak (2008) Improve Your Search Engine Ranking with AJAX (http://www.informit.com/articles/article.aspx?p=517207)
Ajax Frameworks, Toolkits and Libraries
AJFORM is a JavaScript toolkit which simply submits data from any given form in an HTML page, then sends the data to any specified JavaScript function without refreshing the page. AJFORM degrades gracefully in every aspect if Javascript is not supported. Download at http://sourceforge.net/projects/ajform/
CPAINT (Cross-Platform Asynchronous INterface Toolkit) is a multi-language toolkit that helps web developers design and implement AJAX web applications with ease and flexibility. It was originally born out of the author’s frustration and disappointment with other open-source AJAX toolkits. It is built on the same principles of AJAX, utilizing JavaScript and the XMLHTTP object on the client-side and the appropriate scripting language on the server-side to complete the full circle of data passing from client to server and back. Download at http://sourceforge.net/projects/cpaint/
Dojo Toolkit is an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and websites. Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences. Download at http://dojotoolkit.org/
MochiKit is a light-weight Javascript library. Inspired by the Python networking framework, Twisted, it uses the concept of deferred execution to allow asynchronous behaviour. This has made it useful in the development of Ajax applications. Download at http://mochi.github.com/mochikit/
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere. Download at http://www.prototypejs.org/
Rico is a JavaScript library for creating rich internet applications. Based on Prototype, it includes grids, calendar & tree controls, drag and drop, and cinematic effects. Its object-oriented framework makes it easy to add richness to your web applications. Download at http://sourceforge.net/projects/openrico/
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly, script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model (DOM). It is most notably included with Ruby on Rails and Seaside, but also provided separately to work with other web application frameworks and scripting languages. Download at http://script.aculo.us/downloads
xajax is an open source PHP class library implementation of AJAX that gives developers the ability to create web-based Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page. Unlike some other Ajax frameworks, xajax is designed to allow the programmer to have no prior knowledge of JavaScript. Download at http://www.xajax-project.org/
XOAD is a PHP based AJAX / XAP object oriented framework that allows you to create richer web applications. Formerly known as NAJAX, XOAD has many benefits: it uses JSON, supports server/client side events, HTML manipulation, caching and much more. Download at http://sourceforge.net/projects/xoad/