Smashing Magazine - we smash you with the information that will make your life easier. really.

50 Excellent AJAX Tutorials

Advertisement

AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

For more on AJAX see:

Useful AJAX Tutorials

Build an AJAX-Powered Shopping Cart
NETTUTS shows us how to build an AJAX-powered shopping cart using PHP, jQuery and some plug-ins.

Ajaxdemo in 50 Excellent AJAX Tutorials

AJAX Username Availability Checker Using MooTools 1.2
When allowing a user to register a username, you can use AJAX with MooTools to let them check the availability of the username being submitted.

Useravail in 50 Excellent AJAX Tutorials

Introduction to AJAX Calls Using jQuery and PHP
If you’re not familiar with using AJAX calls with jQuery and PHP, this is a good starting point.

Ajaxcalls in 50 Excellent AJAX Tutorials

AJAX and XML: AJAX for Tables
IBM.com has a lot of useful articles on using AJAX. This one shows how to create tabs and tables.

Ajaxtables in 50 Excellent AJAX Tutorials

AJAX and XML: AJAX for Chat
Learn how to create a simple chat box for a website.

Ajaxchat in 50 Excellent AJAX Tutorials

Creating a Dynamic Poll with jQuery and PHP
This poll is created with PHP, XHTML and jQuery. AJAX effects are used to eliminate the need for a page refresh when the poll is submitted.

Ajaxpoll in 50 Excellent AJAX Tutorials

RSS AJAX JavaScript Ticker
This AJAX ticker may be useful for displaying news headlines or similar content to visitors.

Ajaxticker in 50 Excellent AJAX Tutorials

Building Your First AJAX Application with PHP
An introductory post for getting started with AJAX.

Firstajax in 50 Excellent AJAX Tutorials

Taking AJAX Further with PHP
Following up on the preceding introduction, this post goes a bit further.

Ajaxfurther in 50 Excellent AJAX Tutorials

jQuery/JavaScript – Customizable AJAX Pagination
AJAX can also be used to improve the pagination of a website.

Ajaxpage in 50 Excellent AJAX Tutorials

One Form, Many Uses – Server-Side jQuery with Jaxer
AJAX can help you get more use out of one form rather than create multiple forms.

Jaxer in 50 Excellent AJAX Tutorials

How to Call Server-Side Function from Client-Side Code Using PageMethods in ASP.NET AJAX
This post shows a work-around for calling server-side functions from the client side.

Serverside in 50 Excellent AJAX Tutorials

Developing Portlets Using JSF, AJAX, and Seam – Part 1, Part 2, and Part 3
An in-depth three-part series to help you create portals.

Portlets in 50 Excellent AJAX Tutorials

AJAX Forms with jQuery
Trevor Davis shows how to create a form that will check an email address for validity, makes sure there are no blank fields and display an error if something isn’t right or complete.

Ajaxforms in 50 Excellent AJAX Tutorials

Easily Build Powerful Client-Side AJAX Paging Using jQuery
This is another useful tutorial on improving pagination with AJAX.

Ajaxpaging in 50 Excellent AJAX Tutorials

Use jQuery and ASP.NET AJAX to Build a Client-Side Repeater
This tutorial shows how to improve user experience and reduce server load by using a client-side repeater.

Repeater in 50 Excellent AJAX Tutorials

Develop AJAX Applications Like the Pros – Part 1: Using the Prototype JavaScript Library and Script.aculo.us
The first part of this three-part series includes an introduction to the Prototype JavaScript library.

Likethepros in 50 Excellent AJAX Tutorials

Develop AJAX Applications Like the Pros – Part 2: Using the Prototype JavaScript Framework and Script.aculo.us
The second of the three parts moves on to the Scriptaculous library.

Develop AJAX Applications Like the Pros – Part 3: Use DWR, Java, and the Dojo Toolkit to Integrate Java and JavaScript
The third and final part takes you through the process of setting up a message board.

PHP Components: Autosuggest
Using PHP and AJAX, you can add an autosuggest feature to a search box.

Autosug-300x133 in 50 Excellent AJAX Tutorials

AutoCompleter Tutorial
This tutorial produces a result similar to the preceding tutorial.

Autocomplete in 50 Excellent AJAX Tutorials

A Dynamic AJAX Table Example Using Dojo and RESTful Web Services on Glassfish
This tutorial takes you through the process of creating a dynamic table as you would see on a travel-booking website.

Glassfish in 50 Excellent AJAX Tutorials

AJAX Overhaul – Part 1: Retro Fit Existing Sites with AJAX and jQuery
Have an existing website that needs some enhancements? This tutorial series takes you through the process.

Retro in 50 Excellent AJAX Tutorials

AJAX Overhaul – Part 2: Retro Fit Existing Sites with jQuery, AJAX, Tooltips, and Lightboxes
The second part of this series takes you further through the process of improving a shopping website with tooltips and lightboxes.

Retro2 in 50 Excellent AJAX Tutorials

AJAX Overhaul – Part 3: Retro Fit Existing Sites with jQuery, AJAX Tabs, and Photo Carousels
The third part of the series adds some nice AJAX effects with tabs and carousels.

Retro3 in 50 Excellent AJAX Tutorials

AJAX Overhaul – Part 4: Retro Fit Existing Sites with jQuery and AJAX Forms
The final part of the series looks at enhancing the purchase form.

Retro4 in 50 Excellent AJAX Tutorials

Auto Populating Select Boxes Using jQuery and AJAX
Learn how to allow users to choose a top-level category in a select box that will trigger the subcategory box to autopopulate.

Populating in 50 Excellent AJAX Tutorials

Using AJAX to Validate Forms
Use PHP and jQuery with some AJAX to create a form that validates the data entered.

Validate in 50 Excellent AJAX Tutorials

Easy AJAX with jQuery
This tutorial includes some introductory information on AJAX and jQuery and will help you get started.

Easyajax in 50 Excellent AJAX Tutorials

Quick and Dirty AJAX (video)
This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX.

Dirty in 50 Excellent AJAX Tutorials

Load Content While Scrolling with jQuery
This tutorial creates a scrolling effect similar to DZone’s.

Scrolling in 50 Excellent AJAX Tutorials

Wicket – Updating ListViews Using an AjaxLink
Create a table that will update without a full page refresh when a link is clicked.

Wicket in 50 Excellent AJAX Tutorials

AJAX for Evil: Spyjax
A look at the dark side of AJAX: viewing browsing habits.

Spyjax in 50 Excellent AJAX Tutorials

How to Integrate Google Calendar in Your Website Using AJAX
Calendars have a great use in a number of websites.

Googlecal in 50 Excellent AJAX Tutorials

Edit in Place with AJAX Using jQuery JavaScript Library
Allow a visitor to edit the HTML of a page they are visiting.

Creating an AJAX Rating Widget
Create a rating widget that allows visitors to rate an item with stars or some other measurement.

Rating in 50 Excellent AJAX Tutorials

Use AJAX and PHP to Build Your Mailing List
Allow visitors to subscribe to a mailing list without a page refresh.

Mailing in 50 Excellent AJAX Tutorials

Nice AJAX Effect for Message Box Using MooTools
Use this AJAX effect to give visitors a message based on some action.

Message in 50 Excellent AJAX Tutorials

Build an AJAX Dropdown Menu
This is a fairly simple tutorial on creating a drop-down menu.

Making AJAX Work with Screen Readers
For accessibility purposes, this article covers how AJAX effects can affect users of screen readers.

Screenread in 50 Excellent AJAX Tutorials

How to Load In and Animate Content with jQuery
Another NETTUTS tutorial for enhancing a website with jQuery and AJAX.

Animate in 50 Excellent AJAX Tutorials

Continuous Pagination
Another look at the subject of pagination by demonstrating continuous pagination, in which the user keeps scrolling down rather than going to another page.

Pagination in 50 Excellent AJAX Tutorials

Making Element Selection and AJAX simple with DOMAssistant
A tutorial to get you started with the DOMAssistant JavaScript library.

Selection in 50 Excellent AJAX Tutorials

Slider Using PHP, AJAX, and JavaScript
Create a nice slider using PHP, JavaScript and AJAX.

ASP.NET AJAX Calendar Extender
Seven different tips and tricks for working with this calendar extender.

Log-in/Sign-up Screen Using AJAX Modal Pop-up Extender
This is a quick look at creating log-in and sign-up forms.

Signup in 50 Excellent AJAX Tutorials

Dealing with Large Data in AJAX
Get your AJAX application to meet your data requirements.

Creating a Gmail-Like AJAX Status Display
Use Prototype and AJAX to create this status display.

Gmail in 50 Excellent AJAX Tutorials

Creating an AJAX-Enabled Calendar Control
Another tutorial that focuses on enhancing calendars with AJAX effects.

Control in 50 Excellent AJAX Tutorials

JavaScript Error Publishing using ASP.NET AJAX
Use AJAX to display errors in code.

Error in 50 Excellent AJAX Tutorials

(al)

Steven Snell has been designing websites for several years. He actively maintains a few blogs of his own, including DesignM.ag, which regularly provides articles and resources for web designers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    rss_ems
    October 16th, 2008 1:50 pm

    so nice! thanks

  2. 2
    Shir Gans
    October 16th, 2008 2:04 pm

    This is really great stuff! Thanks !
    I always come back for this kind of posts… just like the useful javascripts you gave last month.

  3. 3
    jonbergan
    October 16th, 2008 2:36 pm

    Wow. That is a fantastic line up. You’ve got some really good tut’s in there. I was especially interested in the AJAX chat example and some of the jQuery stuff. I’m not a huge fan of jQuery only because I prefer to code from scratch but it definitely has its uses.

    Great work as always :)

  4. 4
    Albert
    October 16th, 2008 2:53 pm

    Just a collection of many websites wich have collected ajax based scripts. Though, there are quote a few wich are awesome.

  5. 5
    arthack
    October 16th, 2008 2:59 pm

    Wordpress does not have a good effect AJAX recommend?

  6. 6
    dragoshell
    October 16th, 2008 3:11 pm

    Hey, great post!
    It would be nice if you’d post something about AHAH/AXAH too :D
    http://microformats.org/wiki/rest/ahah

  7. 7
    Janckos
    October 16th, 2008 3:43 pm

    Gracias.

  8. 8
    Okibi
    October 16th, 2008 4:30 pm

    Nice collection, some I hadn’t seen that i’m defiantly going use.

  9. 9
    GalaxySpectrum
    October 16th, 2008 5:44 pm

    Thank you for this useful collection :-)

  10. 10
    dendy b sulistyo
    October 16th, 2008 7:13 pm

    awwweesome!

  11. 11
    Binny V A
    October 16th, 2008 9:00 pm

    I have written an Ajax tutorial – A Gentle Introduction to Ajax. Its really useful for beginners.

  12. 12
    ashvin
    October 16th, 2008 9:12 pm

    Smashin’ Ajax! thanx for the share and keep these kinda posts comin’

    :p

  13. 13
    ericb
    October 16th, 2008 9:35 pm

    great list! the AJAX Overhaul sets would be very useful. thanks for sharing!

  14. 14
    sn
    October 16th, 2008 11:21 pm

    świetne :)

  15. 15
    Patrick
    October 16th, 2008 11:58 pm

    Very Nice Sharing.
    Thanks

  16. 16
    Jose
    October 17th, 2008 1:06 am

    I found another excellent AJAX tut in one of the links you posted..

    Top 5 ASP.NET AJAX Articles You Must Read

    Also love the jquery tuts..way to go!!

  17. 17
    Jash Sayani
    October 17th, 2008 1:07 am

    Wow! Thanks a lot !

  18. 18
    Thijs
    October 17th, 2008 1:17 am

    Great article!

  19. 19
    Mariusz
    October 17th, 2008 1:21 am

    Groobe!

  20. 20
    nata
    October 17th, 2008 3:51 am

    maravilloso!

  21. 21
    yeya
    October 17th, 2008 5:16 am

    Excellent article!!!. Thanks!!!

  22. 22
    Jay
    October 17th, 2008 5:25 am

    Great article!
    Anybody know if there’s any tutorial to create chat application like Facebook’s ?

  23. 23
    AnswerG
    October 17th, 2008 6:11 am

    Thanks ! Great one. will read the full article later.

  24. 24
    fav8r
    October 17th, 2008 6:48 am

    a lot of AJAX !!! Can i try all of this !!

  25. 25
    eater
    October 17th, 2008 7:46 am

    дякую

  26. 26
    yojan
    October 17th, 2008 8:19 am

    somewhere i saw the similar list…but i think that was 20 excellent ajax ???

  27. 27
    Roshan Bhattarai
    October 17th, 2008 10:45 am

    Thanks for including my post of slider using PHP, Ajax and Javascript….

  28. 28
    That Namelezz Guy
    October 17th, 2008 11:59 am

    Great article, really useful!

  29. 29
    sgambella
    October 17th, 2008 1:34 pm

    excellent resource. some good ideas. we have long been fans of jquery, mootools and a range of other ajax components.

  30. 30
    MeltingIce
    October 17th, 2008 4:35 pm

    Aw, they didn’t include my tutorial that I wrote. Its on jQuery and ajax if anyone is interested: ajax tutorials with jQuery

  31. 31
    Steven Snell
    October 17th, 2008 6:00 pm

    Jay,
    I’m not aware of a tutorial for doing that.

    Roshan,
    You’re quite welcome. Thanks for the great tutorials.

  32. 32
    Jemima Holbert
    October 18th, 2008 12:54 am

    Thanks dude.Useful tutorial.
    Hope everyone makes use of this tutorial.
    thanks again for this great class.

  33. 33
    Farid Hadi
    October 18th, 2008 2:06 am

    Nice list.
    Good job guys.
    Thanks.

  34. 34
    srganesan
    October 18th, 2008 5:02 am

    superb work

  35. 35
    Praba
    October 18th, 2008 12:06 pm

    Gr8 set of articeles, worth it for millllions…..

  36. 36
    Breno
    October 20th, 2008 6:19 am

    Muito bom esse matérial…
    Brasil Acre

  37. 37
    Justin Leaf-Wright
    October 20th, 2008 6:21 am

    mmmmmmm AJAX….

    Starting to like it more and more..

    Leafydesignz

  38. 38
    jimmy
    October 20th, 2008 9:35 am

    thanx a lot !

  39. 39
    michael
    October 25th, 2008 3:01 am

    cool list… love it!!!

  40. 40
    Mohammed Hashim
    October 30th, 2008 6:37 am

    Thanks for this very great post

  41. 41
    Zappa
    November 8th, 2008 12:54 pm

    Only PHP… Why there are not simple AJAX usings without marking the server-side technology..
    But in general – great!

  42. 42
    pawseries
    November 23rd, 2008 11:11 pm

    At all I do not know what to tell in this occasion. Probably, what all will be better than now? And as a whole very much even it is informative!

  43. 43
    Carlo Van Tañeca
    January 15th, 2009 11:14 pm

    Thanks for the list. ^_^

  44. 44
    Burçlar
    March 19th, 2009 1:29 pm

    thank you great tutorial

  45. 45
    abdulla
    May 6th, 2009 11:00 pm

    hi all,
    can somebody help to create news system in flash …. like in the home page will be 2 news i need to do the admin part … the admin can edit /delete/ add new news dynamicy..

    is there anybody can help me with it

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: Correct way to learn PHP

    Start off by reading all the 15 parts of PHP 101 on Devzone.

  • Re: Using Tutorials?

    I say you're okay. I wouldn't straight up jack someone else's design and present it as my own, even if it was a tutorial, but it's certainly acceptable to learn some…

  • Correct way to learn PHP

    So, I'm a designer but I wanna expand my abilities and learn PHP, to be more exact I wanna learn CI - Codeigniter!

  • I wanna make comics!

    Hello,I'm designer but I've never involved in vector painting so I need your help

  • Re: Twitter

    @gatorwebdesignShould tweet something really...

Post your job