CakeTimer – An Ajax File Uploads Progress Bar
This is a demonstration of an AJAX powered progress bar to monitor file uploads with (Cake)PHP.

AJAX Bookmarklets Tutorial

Creating Huge Bookmarklets
A bookmarklet is a special piece of JavaScript code that can be dragged into a user’s link toolbar, and which later can be clicked on to implement cross-site behavior. People have done all sorts of cool stuff with it.

AJAX Chat Tutorials

Lace – Ajax Chat
Lace is a free, lightweight Ajaxian communications engine suitable for a shoutbox, chat room or similar. Version 0.1.3 brings with it several bug fixes, a tiny bit of code reorganization and most importantly, an oft-requested User List.

Most Simple Ajax Chat Ever
Very easy to use AJAX chat demo.

AJAX Client-Server Communication Tutorials

Implementing simple AJAX interaction in your Web Application using XMLHttpRequest object
Everybody till now must have at least heard about AJAX (Asynchronous JavaScript And XML). This example will give you an idea about how you can implement simple AJAX interaction in your web application.

Make asynchronous requests with JavaScript and Ajax
In this article, you’ll begin with the most fundamental and basic of all Ajax-related objects and programming approaches: The XMLHttpRequest object. This object is really the only common thread across all Ajax applications and — as you might expect — you will want to understand it thoroughly to take your programming to the limits of what’s possible.

AJAX
In this tutorial, you’ll be introduced to Ajax, a technology that allows you to send these requests through small JavaScript calls, meaning the user doesn’t have to wait for the page to refresh.

All Request, All The Time
Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts.

AJAX Drag and Drop Tutorial

Drag and Drop Tutorial (with a cool video)
Adding items to a shopping cart in common e-commerce applications isn’t very close to the actual “add to cart” metaphor, since it requires clicking an “add to cart” button, watch a new page (the shopping cart), and then go back to the shop or checkout with buttons. Ajax allows to get closer to the cart metaphor, by enabling drag-and-drop interactions and giving immediate visual feedback, without leaving the shop.

AJAX Dynamically Content Loading Tutorials

Dynamically loaded articles
This is a basic example showing you how to use AJAX. In this script, you have a list of article titles at the right side. When you click on one of them, AJAX will be used to request the content of the article from an external file and show it in the main DIV.

Ajax – Dynamic Content
This small generic script makes it easy for you to load content of external files into HTML elements on your page.

AJAX Forms and Autocomplete Tutorials

Scriptaculous Lists with PHP
The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to implement, and they’re just so much nicer than the standard listbox with up/down arrows that we see in most of today’s applications and administration tools.

Alter data with Ajax forms
Displaying rich formatted questions and lists, even paginated, is not enough to make an application live. And the heart of the askeet concept is to allow any registered user to ask a new question, and any user to answer an existing one. Isn’t it time we get to it?

Dynamic Client Lookup

This script uses AJAX to autofill a form. Open the demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.

Chained Select Boxes
This script uses Ajax to popuplate a select box with cities based on which country you choose.

Ajax Dynamic List
This script shows you a list of options based on what you type into a text input. Example: Type in “A” and Ajax will get you a list of all contries starting with “A”.

AJAX Framework and Toolkit Tutorials

My-BIC – Tutorials and How To’s
A collection of easy to follow tutorials using the My-Bic Framework including a, hello world – getting your ajax setup, posting comments via AJAX and changing views from a drop down. There are beginner and intermediate tutorials here.

New Echo2 Tutorial Series
Part 1 of a multipart Echo2 tutorial series, entitled “Ajax with Echo2 and Eclipse” is now available from our web site. The related archive with the Echo2 distribution plus the EchopointNG library is available here.

AJAX Design Patterns – Using The Dojo Toolkit
Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.

AJAX General Tutorials

Building a Spy
Step by step instructions on how to build a Digg like spy page.

Building a Shelf in WordPress
Nice tutorial on how to build a sliding shelf in WordPress.

AJAX from Scratch: Implementing Mutual Exclusion in JavaScript
This AJAX from Scratch series of articles describes fundamental techniques needed to develop AJAX Rich Internet Applications in JavaScript from scratch.

Saving Session Across Page Loads Without Cookies, On The Client Side
This is a mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large amounts of data beyond cookies size limits.

A Tale of Two IFrames or, How To Control Your Browsers History
This is a mini-tutorial on the black art of iframes and browser history, known to AJAX experts but rarely presented clearly.

AjaxWorld Special: What Is AJAX?
Learn more about AJAX and ColdFusion

AJAX Using ASP.NET 1.1You’ve heard of it. It is the latest buzz term for web programmers these days. AJAX is an acronym that stands for Asynchronous JavaScript and XML. AJAX gains its popularity by allowing data on a page to be dynamically updated without having to make the browser reload the page. I will describe more about how AJAX works, and then go into some sample code to try out.

Speed up Your AJAX Based Webapps
It sets the expiry of the JavaScript to years and not days. Once the JavaScript file is downloaded it is never downloaded again, ofcourse unless you force it by removing the file in the cache. If you visit the site often the JavaScript will not be removed from the cache.

Kick-start your Java apps, Part 2
This tutorial guides you through the development of a small human-resources application, first using conventional JavaServer Pages (JSP) based technology, and then migrating it to a highly interactive solution using Ajax.

Create Your Own Ajax Effects
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today. The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own.

AJAX Getting Started Tutorials

An Introduction to AJAX
A very nice introduction to AJAX.

Nitty Gritty Ajax
In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

A simple AJAX example
Based on Rasmus’s 30 second AJAX tutorial, I’ve cobbled together a very rudimentary example of one approach to AJAX programming. A “Hello, World” AJAX program, if you will. You can view the demo here on my site, and download the source code (document attachment at the bottom of this article).

A List Apart: Articles: Getting Started with Ajax
The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts.

Ajax Toybox
Justin has put together a nice group of AJAX tutorials including, Hello, World, Dynamic City, State Lookup, Ajax to Clean Your Clock, Ajax Calculator and an RSS News Ticker.

Introduction to Ajax
When it comes to Ajax, the reality is that it involves a lot of technologies — to get beyond the basics, you need to drill down into several different technologies (which is why I’ll spend the first several articles in this series breaking apart each one of them).

Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples
A great group of AJAX examples.

Rasmus’ 30 second AJAX Tutorial
I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became “AJAX”. And it really isn’t as complicated as a lot of people make it out to be. Here is a simple example from one of my apps.

An Ajax “Hello World” project to Get You Going
Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at my version of this ultra-simple introduction to Ajax with sincere thanks to the original author.

Ajax Beginners Tutorial
In this tutorial we’ll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.

AJAX Image and Gallery Tutorials

Image crop – DHTML user interface
This script gives you an Image crop/resize DHTML user interface. Drag a rectangle around the area you want to crop. Click the “Crop” button and let Ajax send crop data to the server and the cropped image back to you. PHP uses ImageMagick on the server to crop and convert the image.

Prototype Javascript Lightboxes
This class is based on Prototype 1.5. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file.

AJAX Sortable List Tutorial

How to Make Sortable Lists
Many web applications need to offer an interface to order items – think about categories in a weblog, articles in a CMS, wishes in an e-commerce website… The old fashion way of doing it is to offer arrows to move one item up or down in the list. The AJAX way of doing it is to allow direct drag-and-drop ordering with server support.

AJAX RSS Tutorials

Simple Ajax RSS ticker script
This very small and simple script reads RSS data from an external source and shows them inside a predefined box DIV or other tag) on your page. What you have to do is to specify the url to the RSS feed, how many items you want to show, and for how many seconds you want the script to display each item.

Dragable RSS boxes
This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You can also create new boxes dynamically directly from the page. This is the first version of this script. New functionality will be added to this script during the following weeks and months.

Slide In RSS items
This scripts reads RSS feeds from an external source and displays them on your page. Each items appears after a predefined number of seconds by sliding in from the right side.

RSS Ticker with AJAX
Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to display the feed dynamically and with flare. As a pre-requisite then, your site itself must support PHP, though the page using this ticker can be any regular HTML file.

AJAX Shopping Cart Tutorials

Fly to basket (Shopping cart)
This is a DHTML shopping cart module. The products will fly to the shopping basket when you click on the “Add to basket” button. Ajax is used to dynamically update the content of the basket.

Flexstore on Rails Tutorial
Flexstore is a traditional Shopping Cart application that you can write in Ruby on Rails. Very comprehensive and cool.

AJAX Sorting Tutorial

Sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data.

AJAX Trees Tutorials

Update a tree with AJAX
his scripts adds an AJAX extension to my static folder tree. Open the demo and press down your mouse button on one of the nodes in thee tree. This will make a text box appear which makes it possible for you to rename nodes. AJAX is used to send this value to the server without reloading the page.

Static list based folder tree
This is a list based folder tree. What you have to do is to create a UL LI list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes.

AJAX Username Availability Tutorial

AJAX username availability checking
The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not, without having to submit a form and reload the page.

AJAX Voting Tutorial

Digg-like AJAX Vote On
This tutorial will show you how to add AJAX-enhanced interactions to askeet. The objective is to allow a registered user to declare its interest about a question.

Ajax Poller
A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs.

Any suggestions, ideas? Feel free to comment on this article!

Back to Top

• AJAX Q&A on Yedda – Find answers to your AJAX questions on Yedda. Didn’t find what you’re looking for? **Ask ** and get great answers from real people.
• Edit in place with Ajax -
• Ajax: A New Approach to Web Applications – by Adaptive Path’s Jesse James Garrett, the man who coined the term *AJAX*
• Ajax tutorial with prototype -
• Mastering Ajax, Part 1: Introduction to Ajax -
• Drag and drop shopping cart – Detailed how-to for a drag and drop shopping cart in PHP. Based on the [symfony](http://www.symfony-project.com) framework.
• AJAX Was Here – Part 2 – asp.net-centric AJAX intro, Part 2 of 2
• Ajax Was Here, Part 1 – asp.net-centric AJAX intro, part 1 of 2
• TinyAjax – Getting Started – TinyAjax is a PHP-based Ajax library with a nice, simple Gettting Started page.
• AJAX Live Search – Asimple tutorial to add a personalized ajax live search onto your site!
• Ajaxlines – Ajaxlines is a project focused on providing its audience with a database of most of Ajax related articles, resources, tutorials and services from around the world. Its purpose is to showcase the power of Ajax and to act as a portal to the Ajax development community.
• Ajax Introduction – Step By Step – How to Ajax your website step by step …
• Gaia Ajax Widgets Window Tutorial – A tutorial about how to use the Gaia Ajax Widgets Window control. Basically a helper Ajax Widget for creating both “modal” and “non-modal” windows in ASP.NET with Ajax technology. Sample can be seen at http://ajaxwidgets.com/AllControlsSamples/Window.aspx
• AJAX vote with instant feedback – Tutorial describing the way to implement voting buttons, like the arrows in listible or the _vote?_ button, with instant feedback. Based on [symfony](http://www.symfony-project.com).
• AJAX Design Patterns – In this tutorial we describe how to build a modularized architecture to create complex AJAX Applications. Unlike most of the AJAX tutorials we focus on the design and implementation of a whole application and not on the low level details.
• AJAX:Getting Started – This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.
• Technorati’s APIs + AJAX -

• Prototype – The library that used by scriptaculous and ruby on rails
• script.aculo.us - script.aculo.us provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style.
• Moo.fx - moo.fx is a super lightweight, ultra tiny, megamall JavaScript effects library, written with prototype.js. It’s easy to use, fast, cross-browser, standards compliant, provides controls to modify Height, Width, and Opacity with built-in checks that won’t let a user break the effect with multiple crazy clicks. It’s also optimized to make you write the lesser code possible.
• dojo - Dojo is the Open Source JavaScript toolkit that helps you build serious applications in less time. It fills in the gaps where JavaScript and browsers don’t go quite far enough, and gives you powerful, portable, lightweight, and tested tools for constructing dynamic interfaces. Dojo lets you prototype interactive widgets quickly, animate transitions, and build Ajax requests with the most powerful and easiest to use abstractions available.
• Behaviour – Using CSS selectors to apply JavaScript behaviours
• JSON - JavaScript Object Notation is a lightweight data-interchange format
• ASK – AJAX Source Kit – A simple way to get content into your page on-the-fly through asynchronous JavaScript and XmlHttpRequest, without sacrificing accessibility or usability.
• jQuery - jQuery is a new type of JavaScript library. It is not a huge, bloated, framework promising the best in AJAX – nor is just a set of needlessly complex enhancements – jQuery is designed to change the way that you write JavaScript.
• Yahoo! User Interface Library – The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer’s interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.
• event:Selectors – event:Selectors allow you to apply an event such as mouse over, mouse out, click, et al using a CSS style syntax. It keeps your layers separated and greatly reduces the amount of code you have to write. And it’s better than Behaviour
• Web 2.0 Search Engine – Simply search for a keyword of what your wish to make or work with to see the tools available (example search links: mashups, blogging, viral videos, clipart, designing, social tagging, AJAX apps, file storage/sharing, RSS feeds, anti-spam tools, CSS layout generators, image editors, webmaster tools, calculators, file conversions, blog (URL) submits, web APIs, tutorials, etc). Please submit sites you find useful relating to the topic “WEB 2.0″. Each accepted site receives a Web2.0 award.
• SAJAX - “Sajax is an open source tool to make programming websites using the Ajax framework â€� also known as XMLHTTPRequest or remote scripting â€� as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your WebPages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.”
• MochiKit - “MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get shit done, fast. We took all the good ideas we could find from our Python, Objective-C, etc. experience and adapted it to the crazy world of JavaScript.”
• backbase - Backbase software can be used to build more interactive websites and better user interfaces, web interfaces, web GUIs or web-based replacements for desktop rich clients. Backbase rich clients can be easily combined with Java & J2EE, .NET & ASP.NET, XML, XSLT and XPath.
• Gaia Ajax Widgets – Gaia Ajax Widgets is a free library for developing Ajax application in ASP.NET (2.0 and above) It’s not Open Source but there’s both a free version and a Source Version.
• Web Programming -
• Rico - rich Ajax components and effects built on Prototype
• CPaint - 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.
• AjaXSLT - AJAXSLT is an implementation of XSLT in JavaScript, intended for use in fat web pages, which are nowadays referred to as AJAX applications. Because XSLT uses XPath, it is also an implementation of XPath that can be used independently of XSLT.

• NETVIBES – Netvibes create own page
• GOOGLE Personalized Pages – Drag n drop modules. RSS newsreader. Extensive selection of modules. G-mail module. EZ 2 use.
• PAGEFLAKES – Pageflakes News
• POPURLS – Popurls popular urls. Mega news links.
• PROTOPAGE – Protopage create news page.
• Bloglines – Create a personal Bloglines page loaded with the freshest news about the things you love…
• My Yahoo – Drag and drop modules, RSS newsreader with large selection of modules. Add Yahoo mail, weather, finance, search, …
• Newshutch – * Add your favorite web sites within the site or use a browser button while surfing other sites. * Save time by only seeing fresh, unread items. * Import and export your feed lists between Newshutch and other feed readers. * Quickly categorize and organize feeds the way you like. * Keyboard shortcut navigation for advanced users. * Print all entries from a feed to take with you.
• onelurv – Easy to use RSS/Atom feed reader & bookmark manager.
• WETPAINT – DO it yourself wiki. Nice template choices. EZ to use. Professional.
• 24 Eyes – Premium RSS Dashboard on the Internet.
• START – Start create a news page.
• FAVOOR – Favoor create news page with RSS.
• SQUEET – Tools for Publishers and Readers of Syndicated Feeds.
• TITLEZ – Book trends, Data and Insight.
• WINDOWS LIVE PERSONAL HOMEPAGE & SEARCH – Create personal homepage & live search.
• LINKEDFEED – More you use it, better it serves you. News & more.
• SMILEY TODAY – Drag & drop modules anywhere on page. Page background is all smileys!
• MAXIGATE – Create your own maxigate.
• MAGNOTO – Refigerator & other backgrounds with magnets and other cool drag and drop modules. Also, has a mobile site. Fun.
• SUPRGLU – Suprglu autoloads news, blogs & websites. Cool!