I learn the best by example, so I read about, and try, as many AJAX and Javascript examples as I can find. Below you’ll find a short list of the AJAX tutorials and examples that I’ve seen recently. They have all been organized by category with the exception of the “General” category which includes some example that didn’t lend themselves to a vertical. Please let me know through email or a comment if you know of any other great AJAX tutorials, and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.
Most of the descriptions below are taken from the developers of the example. Thanks.
AJAX and XML
Ajax and XML: Five Ajax Anti-Patterns
“You can learn a lot about how to do things correctly by understanding how things are done incorrectly. Certainly, there’s a right way and a wrong way to write Asynchronous JavaScript(TM) + XML (Ajax) applications. This article discusses some common coding practices you will want to avoid.”
Ajax and XML: Ajax for Media
“With the advent of widely available broadband, media, movies, images, and sound drive the Web 2.0 revolution. Learn to combine media with technologies such as PHP and Asynchronous JavaScript(TM) + XML (Ajax) to create a compelling experience for your customers.”
AJAX/Javascript XML Processing Example/Tutorial
“This example demonstrates a simple AJAX javascript for requesting XML data from a server and displaying the response in a HTML-table. The server-side script is a simple PHP script, which actually just sends some XML data.”
AJAX/Javascript XML Tips & Tricks
“Here are some XML processing examples in Javascript. If you’ve got some XML data with XMLHttpRequest (there is actually no XMLHttpRequest in the examples – we create the XML object from a string – can be handy too) you need to read/convert etc. it to some other format and do something with it. Traversing a DOM/XML tree can be tricky, so have a look at these examples.”
Asynchronous JavaScript Technology and XML (Ajax) With the Java Platform
“Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (Ajax) has emerged recently to describe this interaction model.”
The AJAX response: XML, HTML, or JSON?
“Since my last AJAX project I’ve increasingly been wondering about the “ideal” output format for the AJAX response. Once you’ve succesfully fired an AJAX request, what sort of response should the server give? An XML document? An HTML snippet? A JSON string which is converted to a JavaScript object? Or something else? In this entry I’d like to discuss the three formats, with examples, and ask you which format you’ve used in your practical AJAX applications.”
AJAX Menus
AJAX Context Menu
“This is an example of a server-generated AJAX context menu.”
AJAX Dhtml Menu
“Ajax dhtml menu allows to populate data for sub menus from the server on-the-fly. It saves outgoing traffic from the server particularly when you use big menus.”
AJAX Menu Content
“This is an example of AJAX content driven by a ComponentArt Menu instance.”
FastFind Menu Script
“This script allows for nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.”
Simple Javascript Accordions
“We hope our script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.”
General AJAX and Javascript
Endless Pageless – No More Next Page
“Twelve years after the debut of search engines, we have Google representing the current best-of-breed index of web pages. It is faster, smarter, and it has raised the bar for web usability several times over. And yet, we are still paging through search results ten or twenty records at a time. Unfortunately, this style of navigation has been adopted by every site that returns records from a database, regardless of the amount of data being served. We propose an alternative interface to result data on the web: the “Endless Pageless”. Using Ajax we can dynamically fetch more results and append them to the bottom of the page, as the user approaches the end of the content they have already read. This pattern removes the need for pagination, feeding your customer as much data as they care to read in a subtle, non-intrusive way.”
Howto integrate Google Calendar in your website using AJAX
“One of the features I find most interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whether it’s a private or public one. As soon as we had XML of our calendar available I was wondering why not integrating Google calendar directly into a website. For example, a community that uses the service to manage their events, or to display your future trips in your blog?”
Javascript Client Side Transclusions
“Purple-include is a client-side JavaScript library that allows you to do client-side transclusions. What the heck does that mean? It means that you can include and display fragments of one HTML page in another without copying and pasting any content.”
Javascript Image Magnification 2.3
“PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes – I know it’s nothing new and that you’ve been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!”
Make Ajax development easier with AjaxTags
“Developers and users have much higher expectations for the usability and responsiveness of Web-based applications in the Web 2.0 era. Unless you’ve been living under a rock for the past two years, you’ve likely heard of Asynchronous JavaScript + XML (the Ajax technique). Ajax allows you to build slick, responsive, and highly dynamic browser-based user interfaces without requiring browser page reloads. This article takes a look at AjaxTags, a Java(TM)/JavaScript Library that lets you easily integrate Ajax functionality into your JSP pages.”
Phatfusion – Awesome AJAX Examples
I’ve been posting AJAX demo’s, tutorials and code since term was introduced, and while there is only six examples now I find the AJAX work at Phatfusion as some of the best I’ve seen. There is an AJAX lightbox, AJAX image viewer, AJAX validate script, AJAX rounded corners, AJAX sortable table and an AJAX slideshow. Hats off to the developer.
Undo Made Easy with Ajax (Part 2) – Time-Sensitive Actions
“Last time we covered the event queue method, an entirely client-side way of implementing a light-weight, multi-level undo. I mentioned a couple of caveats, including that it does not work in multi-user collaborations, and that it doesn’t work for time-sensitive actions like sending emails. I missed a significant caveat that one of my readers, Alexander Botero-Lowry, pointed out: That two tabs, pointed to the same page, could get out of sync. I wrote about how to solve that issue with cookies.”
Javascript Layout Managers
Javascript Grid Layout
“The Grid Layout Javascript enables web-developers to stick to a Grid Layout quickly and simply by including the Grid Layouts Javascript file and simple XHTML code. Currently, the Grid Layouts Javascript relies on jQuery.”
RUZEE.LayoutManager
“This script is a border layout manager for HTML/CSS in JavaScript. Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you.”
Simple Layout Manager with Prototype 1.6
“Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license. This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout. It’s an unobtrusive script based on CSS classes.”
Javascript and AJAX Load Time
Client Side Load Balancing for Web 2.0 Applications
“A web server handles HTTP (Hypertext Transfer Protocol) requests sent to it by web browsers. When you type in a URL –http://www.digital-web.com, for example–your computer sends out a request to look up the servers needed to handle requests and send responses back quickly. The technique for determining how to route requests to the cluster of web servers efficiently is called load balancing.”
How to Profile and Optimize Ajax Applications
“I’ve been asked by a few folks recently on how to profile an Ajax application and improve its performance, so I thought I would detail some of the specific and general strategies to do this in a tutorial here.”
Loading time improvements with Javascript
A short tutorial on increasing page load time with javascript with a short code snippet.
Optimizing Page Load Time
“It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.”
Serving JavaScript Fast
“With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”
Speed Up Your Javascript Load Time
“Javascript is becoming increasingly popular on websites, from loading dynamic data via AJAX to adding special effects to your page. Unfortunately, these features come at a price: you must often rely on heavy Javascript libraries that can add dozens or even hundreds of kilobytes to your page. Users hate waiting, so here are a few techniques you can use to trim down your sites.”
Javascript and AJAX Forms & Validation
AJAX Contact Form
“In this tutorial I am going to teach you how to create an Ajax contact form for your website. The main purpose of using ajax for this task will be the fact that you’re saving bandwith (hard to believe that in 2007 we’re still looking to save bandwith but…), it communicates with the visitor on the same page, almost instantly and is faster because you’re not loading another page to show a confirmation message or whatever else is supposed to show given the situations.”
AJAX Form Creator
“This project aims to create a browser-based form builder for Drupal.”
AJAX Form POST Request
“This example demonstrates a simple AJAX javascript for POSTing a complete HTML form to the server and displaying the response. The server-response is displayed in a “span” – the server-side script is a simple PHP script to display the contents of the $_POST global variable.”
Degradable Ajax Form Validation
“If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.”
Easily Upgrade Your Forms to AJAX
“By my standards no website should still use traditional webform GET or POST requests to transfer data to the server. Through AJAX, form data can be sent way faster, since only the necessary data is sent back and forth to the server. Thanks to the hard work of some individual developers, using AJAX to transfer data from html forms has been streamlined and has become very simple. I will demonstrate this by creating a comments form, which will transmit data to the server using the Prototype JavaScript Framework, developed by Sam Stephenson. The data will be processed on the server side and return data to the original html page, where it is displayed.”
Really Easy Field Validation
“Here’s a form validation script that is very easy to use. The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.”
Validate.js
“AJAX routine to validate form based input. The script is easy to use and works on everything I’ve tried it on. If you use forms and AJAX on your website you should check this one out.”
Validating Forms with Ajax
“synchronous JavaScript and XML (Ajax) is a Web development technique that combines JavaScript, Document Object Model (DOM), and XMLHttpRequest technologies to provide dynamic interaction between a client and server.”
XML in the Browser: Submitting forms using AJAX
“One of the least user friendly features of most websites is forms. The longer the form, the more annoying it gets. However, a new technology called AJAX (that has nothing to do with household cleansers!) can help. Let’s face it. Using forms on the Internet is a drag. This is especially true when the form is really long and spread over multiple pages. Every time you hit the “submit” or “continue” buttons, there is a long user-unfriendly wait.”
The Zapatec AJAX Forms Overview
“The Zapatec AJAX Forms are the fastest and easiest way to perform validation, provide feedback, and display error messages that enrich the user’s experience while reducing the communications with the server behind the scenes.”
XmlHttpRequest
Introducing a Cross Site AJAX Plugin for Prototype
“During cross site Ajax requests the standard XmlHttpRequest approach breaks down. The problem is that XmlHttpRequest is bounded by the same site policy. Fortunately the script tag has the freedom to do as it pleases.”
Re-inventing XMLHttpRequest – Cross-Browser Implementation With Sniffing Capabilities
“This article attempts to summarize some experience in working with XMLHttpRequest object by showing how to, implement a cross-browser XMLHttpRequest object (to replace existing one), enable interception to the XMLHttpRequest objects operations, solve multiple browser-specific XMLHttpRequest issues.”
XMLHttpRequest functions
“This function creates a new XMLHttpRequest object for every request you make. In simple cases such as this site, where every page fetches only three to five files, I don’t mind creating three to five objects. In more complex sites, however, where any page can make an arbitrary amount of requests, it’s probably better to write a function that reuses existing XMLHttpRequest objects.”
