60 Ajax Tutorials

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.