25 Excellent Ajax Techniques and Examples

Jun 2 2008 by Jacob Gube | 101 Comments

Ajax allows for rich-internet applications that mimic the responsiveness and complex user interfaces typically associated with desktop applications. Moving applications to the web browser opens many possibilities, including the ability to save user data, connecting with other users for collaboration and sharing, and making deployment and using the application easier since web browsers are standard-issue with most computers regardless of operating system.

If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before.

1. Ajax RSS reader

Ajax RSS reader - Screenshot

Build a simple RSS reader that takes remote XML data from RSS feeds using Ajax, PHP, and MySQL. This example allows users to view feed content from multiple sources in one page. At the bottom of the article, you’ll find an animated demonstration of the RSS reader.

2. Ajax Desktop Tutorial

Ajax Desktop Tutorial - Screenshot

This tutorial is a step-by-step guide on how to create a desktop/homepage similar to Pageflake and Netvibes. The goal of this tutorial is to showcase some common techiques involved in developing web-based applications like manipulating the Document Object Model (DOM), listening to events (i.e. certain mouse movements), and working with remote data.

3. Ajax for Chat

Learn to build a simple web-based chat client using asynchronous JavaScript, XML, and PHP. The tutorial’s example utilizes the Prototype JS framework, MySQL, and PHP.

4. Create your own information space with Ajax and del.icio.us

This article outlines the basic foundations of using Ajax alongside an API service. It uses the del.icio.us API, but the methods and concepts can be adapted to other popular services such as Digg’s or Flickr’s. It’s an essential resource for those contemplating on creating web applications that use remote XML data – a couple of live examples are popurls and SocialBlade, which obtains information from social media sites using available API services. This tutorial requires you to register (for free).

5. Ultra-lightweight Charts For AJAX

Ultra-lightweight Charts For AJAX - Screenshot

See how to create a super-lightweight (1.78 KB) charting component using Flash with Ajax. The example allows you to generate visual graphs using dynamically-loaded data. The solution involves ActionScript-JavaScript communication, and covers the use of the setData and setStyle ActionScript methods for generating and styling the charts.

6. Quick Calendar Using AJAX and PHP

Quick Calendar Using AJAX and PHP - Screenshot

Learn how to create a calendar component using Ajax and PHP. Ajax is used for navigating through the calendar months without refreshing the page.

7. How to integrate Google Calendar in your website using AJAX

How to integrate Google Calendar in your website using AJAX - Screenshot

This tutorial shows you how to create a web page component that calls a publicly available Google calendar. Google Calendar allows you to easily create, share, and manage events and is an excellent feature for community websites.

8. Edit In Place with AJAX Using jQuery

Edit In Place with AJAX Using jQuery - Screenshot

In this example, users are given the ability to edit the XHTML of the web page they’re currently viewing. The example is a proof-of-concept – presenting how this functionality can be achieved using jQuery. Normally, you’d want to send the user’s edits to server-side code to perform processes such as validation or saving the changes in a database.

9. Creating an AJAX Rating Widget

Creating an AJAX Rating Widget - Screenshot

Learn the concepts of creating a rating system without prompting the user to click a submit button or refreshing the page. The tutorial showcases how you can do this in a variety of ways by including examples for the following four JavaScript frameworks/libraries: Dojo, jQuery, mootools, and Prototype JS.

10. AJAX file upload tutorial

AJAX File Uploader - Screenshot

In this tutorial, you’re shown how to create a file uploader. The tutorial uses JavaScript and PHP.

11. Use AJAX and PHP to Build your Mailing List

This tutorial from SitePoint walks you through the development of a mailing list form that accepts submissions asynchronously. It uses MySQL for storing the data inputted by the user and Prototype JS for simplifying Ajax requests and binding event handlers.

12. Safer Contact Forms Without CAPTCHAs

Safer Contact Forms Without CAPTCHAs - Screenshot

One way to reduce spam from public web forms is to implement a system to verify if the submitter is human by using image CAPTCHAs. Problems arise with accessibility when individuals using visual assistive technologies are presented with the test (and thus cannot continue on). This simple technique uses an Ajax call to a server-side script to drop a cookie on the user’s computer.

13. Using AJAX with CAPTCHA

Using AJAX with CAPTCHA - Screenshot

Avoiding the use of image-based CAPTCHAs is a good idea. With that said, many sites still prefer using this technique to distinguish between humans and computers. If forgoing web accessibility is appropriate for your situation, this article outlines a unique method for administering CAPTCHA tests. The user is presented with a sequence of descriptions (i.e. Animal, Costume, Boy), and asked to click on a set of images in sequential order. The clicks are recorded and validated, returning the appropriate status message. Though probably not an ideal solution to CAPTCHAs, it does outline a fundamental technique for developing responsive user interfaces – use it for inspiration.

14. Ajax-based login form

Ajax-based login form demo - Screenshot

Create a basic login form that asynchronously validates the inputted data. The example uses the jQuery form plugin and PHP to process the request.

15. Nice Ajax effect for message box using Mootools

Nice Ajax Effects for messages - Screenshot

In this example, a message box that fades after a specified duration is displayed when the user clicks on the “save” button. This is a model for supplying users with the status of their request, and an real Ajax request should typically happen when the user clicks on the “save” button.

16. AutoCompleter Tutorial

AutoCompleter Tutorial - Screenshot

The AutoCompleter tutorial teaches you how auto completion of input fields can be accomplished. The example uses jQuery, PHP, and MySQL.

17. Auto-populating Select Boxes using jQuery & AJAX

Auto-populating Select Boxes using jQuery & AJAX - Screenshot

A key technique in Ajax applications is to populate content without a page refresh. In this tutorial, you’ll witness how this is done with a PHP and JavaScript (jQuery to make it easier).

18. Build an Ajax Dropdown Menu

Here’s a basic example of working with external data to load content into a drop-down menu – from our beloved Webmonkey. Though the example uses a text file, you can use your own data source when applying the technique to your own purposes.

19. Ajax/PHP Shoutbox Tutorial

Ajax Shoutbox - Screenshot

Make an Ajax-powered shoutbox using PHP and JavaScript. This tutorial walks you through the server-side and client-side requirements of creating a shoutbox, which can be adapted to other functions such as a commenting system.

20. Building Tabbed Content

Building Tabbed Content - Screenshot

Learn how to build a tabbed content component with the data populated via Ajax. The tutorial uses PHP and Prototype JS.

21. How to Load In and Animate Content with jQuery

Load In and Animate Content - Screenshot

This step-by-step tutorial shows you how to load data into a web page using jQuery to handle the Ajax request and manipulation of the DOM.

Best practices and workaround techniques to common issues

22. The Hows and Whys of Degradable Ajax

The Hows and Whys of Degradable Ajax - Screenshot

This article discusses the concept of creating Ajax-based applications that degrades effectively when JavaScript is not detected, providing increased accessibility and bulletproof-ness. Completely successful degradation means that an application is still usable and information is still accessible without reliance to JavaScript or CSS.

23. Avoid unnecessary Ajax traffic with session state

This article presents a method for minimizing unneeded database/computational processes and avoiding large status updates if no changes have occurred. By using client cookies to keep track of the session’s state, you can cut down on processes that may be redundant. Though the article presents an example using Python for server code – the model remains the same in virtually any language you use.

24. A Better Ajax Back Button Solution

Here’s a workaround to issues pertaining to Ajax-loaded content breaking web browser controls and bookmarking capabilities. The solution involves firing off a function at a set interval that checks the #value of the URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this method.

25. Making Ajax Work with Screen Readers

Making Ajax Work with Screen Readers - demonstration Screenshot

One of the biggest drawbacks of loading content via Ajax is that it fails to indicate an update of the content to users who are reliant on screen readers. For people who are not visually-impaired – messages and status indicators can be visual queues that the content is changing; this isn’t effective for users with visual impairments. This article draws out the underlying issues and proposes techniques to make Ajax-based applications work with screen readers.

There we have it… some brilliant Ajax techniques and examples. I hope you’ve found some links of interest that will help you in a future project or in advancing your command of Ajax.

Have you got your own favorite link? Let’s see it by dropping a message in the comments section.

101 Comments

chazzuka

June 2nd, 2008

great list and thanks for listing mine up above :)

SEOHat

June 3rd, 2008

Ajax/PHP Shoutbox Tutorial is very useful, thanks for the pointers, great post!

Lawrence

June 3rd, 2008

Excellent revisions. As an ajax programmer, i find useful information. Thanks!

dectus

June 3rd, 2008

cool list!
will use some of them for my photoblog (http://photoblog.dectus.com)

AK

June 3rd, 2008

I especially like the mootools and scriptaculous from woork.

Jack Webber

June 3rd, 2008

Wow, Ajax seems to be a very nice and useful tool. I like it!

JW
http://www.FireMe.To/udi

Matt

June 3rd, 2008

Another great post. I use a lot of jQuery on my site because its so easy to integrate into Drupal. Some good Ajax implementations in Drupal modules, read easy to get going, are http://drupal.org/project/ajax_validation , http://drupal.org/project/username_check , and http://drupal.org/project/jstools .

Adam Fitch

June 3rd, 2008

Decent selection of practical use applications.

nemo

June 3rd, 2008

Good example of many of these things is Zimbra. They have an awesome Ajax web interface to their email server; http://www.zimbra.com

seo

June 3rd, 2008

I like the captcha idea. I shall see if I can use it with Pligg. Can’t see what it would not work. Thanks!

Jason Nethercott

June 3rd, 2008

Brilliant list!
I’m completely new to Ajax but just reading through the list gives me a much better picture of some of its capabilities. It will be great to come back later and have a good look at the tutorials. Thanks.

Brandon

June 3rd, 2008

Wow great stuff here. I’ll be book marking this to go through everything. I’ve already done a couple of these while getting started on Ajax, but I can see there’s plenty more to learn. Thanks, it’ll keep me busy for a while!

Ash

June 3rd, 2008

Regarding number 10. that isn’t ajax its using iframes.

Ajax file uploaded is impossible by design. unless browser side hacks are done.

Punit Pandey

June 3rd, 2008

Good post. keep it up.

Ramesh Raj Baral

June 3rd, 2008

Thats a great collection and these are all the things that we need to do when using general web sites.I greatly liked them.
Thanks!

Mikael Bergkvist

June 4th, 2008

Nice collection.
Maybe we should have been included though? ;-)

http://www.widgetplus.com

website design

June 4th, 2008

still, this is lame.

Alejandro

June 4th, 2008

Nice compilation, thank you

stelt

June 4th, 2008

About #5: I’d use SVG instead of the inaccessible Flash.
More on SVG via http://svg.startpagina.nl

Gabe

June 4th, 2008

Nice list.

Xx JustMe xX

June 5th, 2008

that’s nice.
I’ll bookmark this page ^_^

http://www.mara7net.com/phpbb/

Ravi Shankar

June 5th, 2008

This is really a great hub of Ajax collection. Keep going

joko

June 6th, 2008

thanks alot

Alastair

June 7th, 2008

I came from blog.artvaygraphics.com/?p=150 – nice work on the images! Bookmarked in del.icio.us.

Stef

June 8th, 2008

Me too – didn’t even realize he/she was copying your content until I saw those images.

Matt Foster

June 10th, 2008

Good stuff, I particularly like the “avoid unnecessary ajax traffic” A very good article indeed… “Bandwidth saved is bandwidth earned”, classic!

web design company

June 12th, 2008

Awesome roundup of Ajax tutorials

Luis

June 13th, 2008

Muy buenos tutos gracias
saludos

Aaron Leventhal

June 26th, 2008

I would replace #25. A more up-to-date article on AJAX accessibility (WAI-ARIA live regions) is here:
http://ejohn.org/blog/ajax-accessibility/

can I mention it on my weblog?

July 30th, 2008

Hello,
Can I mention your good weblog on my wordpress weblog indicated in the website field ?
Best regards,
dgs

krishna.net.np

August 5th, 2008

Just Cool Collections, I liked them and will be using too.

Abe

August 25th, 2008

Great tutorial collection, thanks!

tutorial

September 9th, 2008

hey all type turoial

Tim

September 13th, 2008

What about an AJAX progress thermometer/slide to show the progress of some action, for example, file upload?

newees

October 25th, 2008

great complation thanks

Jack King

October 28th, 2008

Thank you so much for including information for accessiblity when it comes to AJAX. I work with visually impaired staff and students at UC Berkeley and appreciate the power and quick load time that AJAX can offer but the accessiblity issues are critical for our department.

mmf

October 30th, 2008

Cool Collection
I liked them .
Thanks

Etienne

November 6th, 2008

Cool, will see how much AJAX i can put into my site!!

Gazikent

November 11th, 2008

I especially like the mootools and scriptaculous from woork.

Deepak

November 21st, 2008

Really very good collection.

Ali

December 5th, 2008

Cool Collection
I liked them .
Thanks

Alayına Gider

December 14th, 2008

Thanks for good collections

Nitin S

December 17th, 2008

Great list of Ajax Example, it’s very useful for ajax programmer.
Thanks

Web Designer

December 27th, 2008

I never knew that Ajax can also be used with PHP! I always that it is something we use only with Asp.net. Thanks for sharing those tutorials.

Epoxy

February 26th, 2009

Very nice list thanks. I like the one where you integrate Google calender in your website.

amjad khan

March 4th, 2009

are baap re……… too much contents to understand ajax now i can rule over the ajax:)

krishna

April 2nd, 2009

THX a lot for the examples

very cools stuffs

webfocus

May 25th, 2009

special thanks for working examples!

Chobii

June 1st, 2009

I like it. It helped me a lot.Thanks…..

ajay

June 3rd, 2009

thanks , very for all script ?

Gaz

June 21st, 2009

Awesome post.

Another great site for ajax scripts:

http://ajaxden.net

Biber Hapı

September 6th, 2009

thanks , very for all script ?

Ajax

September 11th, 2009

i need how to get pdf response from ajax response??

Gourav Singh Rajput

September 17th, 2009

Thanks, all these scripts are very useful for beginores.

kodes

September 26th, 2009

Thanks, all these scripts are very useful for beginores.

Hiphop

November 2nd, 2009

i need how to get pdf response from ajax response??

Hiphop

November 4th, 2009

123123 asda i need how to get pdf response from ajax response??

pornoizle

December 13th, 2009

btw trying to apply all scripts and learning better in that part to make some of my own and place here.

sinan

December 27th, 2009

Thanks my friend. I liked first.

ravi

January 8th, 2010

gr8 AJAx elements. useful in web development

philips

February 14th, 2010

thank you for the posting..

i relly like it…

Digisha Modi

February 20th, 2010

thanks for this great tips…. keep writing

manish

March 12th, 2010

alert(‘hello’)

napsell

April 12th, 2010

Thanks for this collection.
I like “Using AJAX with CAPTCHA”, number 13, because it’s a new idea.

chetan jain

May 16th, 2010

yery good site

Okan Can BOLAYIR

May 20th, 2010

Oww :) Super artical.

cemo

May 24th, 2010

Really good tips thx.

Sapkali Cocuk

May 28th, 2010

Thanks for this artical.

lazer epilasyon

May 30th, 2010

I really like it, thanks

bora

May 31st, 2010

thanks to share

Haber99

June 1st, 2010

Good post. I really like it. Thanks…

douu

June 2nd, 2010

thank you :)

Blogosi

June 2nd, 2010

Nice info. Thanks.

Magazin

June 3rd, 2010

btw trying to apply all scripts and learning better in that part to make some of my own and place here.

Sinema

June 4th, 2010

I really like it, thanks

Burhan

June 9th, 2010

Thanks. .great

Justin Bieber

June 12th, 2010

btw trying to apply all scripts and learning better in that part to make some of my own and place here.

teknoloji

June 22nd, 2010

I REALLY like it , thanks. Nice info

3d Mimari

June 22nd, 2010

This is an awesome set of social media icons! As always, Aext has shown me great quality posts that I expect of bloggers these days. Keep it up!

dizi

June 28th, 2010

Safer Contact Forms Without CAPTCHAs Good…

Ahsap Saksi

June 29th, 2010

thanks a lot for 5 subject.like it

Janelle Sberna

August 5th, 2010

This is a very informative piece, keep it up!

Pal

November 9th, 2010

Nice info. Thanks.

anil maurya

November 23rd, 2010

ajax based login form is a good demo, but i want to download the source code, but i find that there was an error to download the demo please send me the right link.

kitap

December 1st, 2010

Thanks for sharing, great article.I’m learn Ajax.

Dan Molleda

January 8th, 2011

Just wanted to say your blog is extremely good. I always like to hear something new about this since I have the similar blog in my Region on this subject so this help´s me a lot. I did a search on a subject matter and found a very good range of blogs but nothing like this.Thanks for sharing so a lot within your blog.

Santosh

February 1st, 2011

It’s a nice collection guys. I landed on this page when I was searching for AJAX powered Subscribe script.

If anybody has any idea then please share the same. If someone knows how to use the emails from DB in order to mail the newsletter than that will be an add-on.

Many Thanks beforehand.

swapnil

March 28th, 2011

give ajax toolkit used in asp.net

Guido

April 5th, 2011

Thanks for sharing, I’m definitely going to use some of them! Thanks!

Anil kumar Panigrahi

April 18th, 2011

Hi,

Thank you for sharing such a wonderful resources along with Ajax functionality.

hayperaktib

July 26th, 2011

thanks for the tutorials. i learned a lot from it…

Aman

July 28th, 2011

alert(“wow”);
nice work

Gagan

August 6th, 2011

Great Listing of Ajax, it would really help to everyone…

Erick22

August 25th, 2011

Very helpful!

Pawan

August 29th, 2011

Thank You

Lane

September 5th, 2011

Glad you all seem to like Ajax. Been wondering why my internet is freezing CONSTANTLY lately. No virus. Stumbled onto Ajax. Thanks a lot. The internet used to be about information. Now it’s about “bells & whistles” and I’m tired of waiting for crap to load on a page. We need MORE efficiency not LESS.

peyman pbe

September 28th, 2011

thanks very much for codes

hussein

October 24th, 2011

Thank you very much..
Q: Can I use the choutbox as a chat system ???

swapnil kamble

November 20th, 2011

Thank’s for sharing this wonderful list ????

Leave a Comment

Subscribe to the comments on this article.