35 Must Know AJAX Tutorials, Techniques and Resources

35 Must Know AJAX Tutorials, Techniques and Resources

Posted on by in Resources


Ajax, which stands for Asynchronous JavaScript and XML is a tool/language  that is used on many web sites that allows data and content to be dynamically updated without refreshing the entire page.  This can increase you sites overall interactivity, speed and usability with things like online polls, editable calendars, instant messaging systems and search fields that autofill, making the user experience easier and most of all enjoyable.

Ajax can mimic the load time, complexity and interactivity of applications that are usually installed on your desktop, giving the user a more complex web experience.

As part of New Years Resolution #2 and #6, check out these 35 must know Ajax tutorials, techniques and resources that will help beginners learn the concepts and techniques involved in Ajax development and hopefully teach more advanced developers a few new tricks.

Monket Calendar
An Ajax enabled online calendar.  Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page.

Ajax Monket Calendar Tutorial

Ajax Monket Calendar Tutorial

Dynamically loaded articles
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 area

Dynamically Loaded Article Module Tutorial

Dynamically Loaded Article Module Tutorial

Easy Calendar With AJAX and PHP
Create a calendar component using Ajax and PHP.  Allows you to navigate months without refreshing the page.

Easy Ajax Calendar Tutorial

Easy Ajax Calendar Tutorial

Scriptaculous Lists with PHP
Drag-and-drop effects

Scriptaculous Lists Ajax Tutorial

Scriptaculous Lists Ajax Tutorial

Continuous Pagination
Tutorial demonstrating continuous pagination, in which the user keeps scrolling down rather than going to another page

Continuous Pagination Ajax Tutorial

Continuous Pagination Ajax Tutorial

Ajax Website Slider
This web slider will enhance your website and give it that extra something. This looks great, and is easy to make too!

Ajax Website Slider Tutorial

Ajax Website Slider Tutorial

AutoCompleter Tutorial
This tutorial teaches you how to make those very cool input fields that auto complete based on what you type.

Ajax Auto Completer Tutorial

Ajax Auto Completer Tutorial

AJAX Made Easy
Build a calculator in AJAX

Ajax Made Easy - Calculator Tutorial

Ajax Made Easy - Calculator Tutorial

To-Do List With PHP and AJAX
A to-do list that will allow you, or your user, to create, update, and delete items asynchronously

To-Do List With PHP and AJAX Tutorial

To-Do List With PHP and AJAX Tutorial

Ajax Username Availability Checker
Every once in a while you find a great usage of Ajax. One great usage is the username availability checker.

Ajax Username Availability Checker Tutorial

Ajax Username Availability Checker Tutorial

AJAX File Uploader Tutorial
Build an AJAX-powered component that can upload a file to a dedicated server and monitor the progress of a file upload request in real time.

AJAX File Uploader Tutorial

AJAX File Uploader Tutorial

Voting System with jQuery, AJAX and PHP
Vote up or down on any particular link, giving an indication of how well an article has been received. In this tutorial, you learn how to recreate this unique voting system using jQuery, AJAX and PHP.

Ajax Voting System Tutorial

Ajax Voting System Tutorial

AJAXify WordPress Comment Posting
Learn how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog

AJAXify WordPress Comment Postings

AJAXify WordPress Comment Postings

How to 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.

Integrate Google Calendar with Ajax

Integrate Google Calendar with Ajax

AJAX Tutorial with Prototype
This tutorial shows how to build a zip code verifier.

AJAX Tutorial with Prototype

AJAX Tutorial with Prototype

Ajax Contact Form
Learn how to create an Ajax contact form that emails the recipient without the page reloading.

Ajax Contact Form Tutorial

Ajax Contact Form Tutorial

Shoutbox using  AJAX (with jQuery) Tutorial
Create a dynamic ajax based shoutbox with jQuery from scratch

Create a Shoutbox using Ajax Tutorial

Create a Shoutbox using Ajax Tutorial

jQuery AJAX delete
Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax

jQuery - Ajax Delete

jQuery - Ajax Delete

Ajax IM
An incredible Ajax instant messenger that works just like Yahoo! messenger or any other IM client, except it’s embedded on the website as opposed to a desktop client. Ajax IM is incredibly robust, and could add quite a bit to your user’s experience.

Ajax IM Tutorial

Ajax IM Tutorial

Ajax Web Chat Application
Create your very own web chat using Ajax. This is pretty cool if you are looking to creating a live chat app for your website. 

Ajax Web Chat Tutorial

Ajax Web Chat Tutorial

Ajax File Upload Tutorial
An easy tutorial teaching you how to make a simple Ajax file uploader Some neat graphics in this tutorial.

Ajax File Upload Tutorial

Ajax File Upload Tutorial

LightForm
It uses FormCheck2 for validation of fields and NiceForms to style form objects.

Lightform

Lightform

An AJAX-Based Shopping Cart
In this tutorial, you will create an AJAX-driven shopping cart and store all of the products in a MySQL database, using PHP to process the data. jQuery will deliver the AJAX on the page

Ajax Based Shopping Cart Tutorial

Ajax Based Shopping Cart Tutorial

Ajax Star Rater
This nifty little script allows users to rate just about anything you specify. It’s not tied to any platform, so you could literally use the script for anything that used PHP and MySQL.

Ajax Star Rater

Ajax Star Rater

Resources

Mastering Ajax, Part 1: Introduction to Ajax
“Understanding Ajax, a productive approach to building Web sites, and how it works”

Resource - Mastering Ajax

Resource - Mastering Ajax

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

Resource - Building Your First AJAX Application

Resource - Building Your First AJAX Application

What’s AJAX?
Web 2.0 Cheatsheet for Ajax

Resource - Whats Ajax PDF

Resource - Whats Ajax PDF

blog.joshuaeichorn.com
Collection of Online Resources for Ajax Programming From Joshua Eichorn

Ajax Resource - blog.joshuaeichorn.com

Ajax Resource - blog.joshuaeichorn.com

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.

Resource - Nitty Gritty Ajax

Resource - Nitty Gritty Ajax

70+ Ajax techniques you just can’t afford to miss
tripwire magazine present a list of more than 70 useful AJAX-based techniques and tools

70+ Ajax techniques you just can’t afford to miss

Resource - 70+ Ajax techniques you just can’t afford to miss

Ajaxian
Ajax Programming Resources and Articles

Resources - Ajaxian

Resources - Ajaxian

AjaxDaddy
Ajax Examples in Action

Ajax Daddy Resource

Ajax Daddy Resource

AJAXload
This site will help you generate AJAX load icon for your project

Resource - Ajaxload

Resource - Ajaxload

Ajax Mint
Endless Ajax Resources

Resource - Ajax Mint

Resource - Ajax Mint

AJAX:Getting Started
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started

Resource - Ajax: Getting Started

Resource - Ajax: Getting Started

Tags: , , , ,

24 Responses to “35 Must Know AJAX Tutorials, Techniques and Resources”

  1. [...] Continued here: 35 Must Know AJAX Tutorials, Techniques and Resources | Web Design … [...]

  2. [...] This post was mentioned on Twitter by vasudevkamath and Martin Sk., Cool Theme. Cool Theme said: 35 Must Know AJAX Tutorials, Techniques and Resources | Web Design … http://bit.ly/6Q3Tao [...]

  3. [...] Continue reading here: 35 Must Know AJAX Tutorials, Techniques and Resources | Web Design … [...]

  4. uberVU - social comments

    06. Jan, 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by blogspinner: 35 Must Know AJAX Tutorials, Techniques and Resources | Web Design …: AJAXify WordPress Comment Posting Learn ho… http://bit.ly/8sIu1C

  5. [...] 35 Must Know AJAX Tutorials, Techniques and Resources [...]

  6. [...] 35 Must Know AJAX Tutorials, Techniques and Resources [...]

  7. [...] 35 Must Know AJAX Tutorials, Techniques and Resources [...]

  8. [...] 35 Must Know AJAX Tutorials, Techniques and Resources Take a look at 35 must know Ajax tutorials and resources. Find out how Ajax will increase you sites overall interactivity and usability with things like polling, auto fill search fields and more. [...]

  9. Annette

    07. Jan, 2010

    Good points, I think I will definitely subscribe! :) . I’ll go and read some more!

    [Reply]

  10. Igor

    07. Jan, 2010

    What a great list! We will definitely use it at http://www.MyTaskHelper.com ASAP

    Especially I like Ajax File Uploading.
    Cheers!

    [Reply]

    bmackler Reply:

    @Igor, great news. glad it will come in handy for you. Yes, the ajax file uploading tutorial is really useful.

    [Reply]

  11. [...] 35 Must Know AJAX Tutorials, Techniques and Resources [...]

  12. Noel Wiggins

    07. Jan, 2010

    Could you imagine if the magic industry was as free with their trade secrets as the web development industry is?…

    what fun would that be, and plus not to mention the number of un employed magicians in line at the un employment office.

    So why must our industry spill the beans on how the magic is done in web design.

    Especially with ajax, this is truly where the magic happens.

    I know why, because it makes it easier for all designers to do a better job for its clients.

    I love the ideas and information sharing that we do with our creative process and wouldn’t change it for the world…

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

    [Reply]

    bmackler Reply:

    @Noel Wiggins, What a great comment and insight. Thats the amazing thing about our community. such little competition between design bloggers, everyone really tries to work together in order to make the industry that much better. It should always stay that way

    [Reply]

  13. [...] this article: 35 Must Know AJAX Tutorials, Techniques and Resources Share and [...]

  14. Ajax Tutorials

    11. Jan, 2010

    [...] To know how to play with Ajax follow this link [...]

  15. aosorio

    20. Jan, 2010

    Hola muy buen tutorial desde México algo en español jajajaj saludos y me sirvio mucho….

    [Reply]

  16. [...] here to read the rest: 35 Must Know AJAX Tutorials, Techniques and Resources | Web Design … Share and [...]

  17. Joyeria en plata

    25. Aug, 2010

    My faves have got to be the last one and Anthony Hicks, but each of them have their own unique and winning design.!!!!!!!!!!!

    [Reply]

  18. [...] 30 Awesome JQuery Contact Form50 jQuery Form Plugins to Enhance your Forms | Web Site Designers35 Must Know AJAX Tutorials, Techniques and Resources | Web Design Tutorials and Inspiration | Learn… [...]

  19. Casas en venta

    16. Aug, 2011

    I like to use ajax until certain point, to only make agile the load of the page. Good resources, I am will serve safe me for my Web

    [Reply]

  20. Jean-Bernard1347

    29. Apr, 2012

    Hi there very cool blog!! Guy .. Excellent .. Wonderful .. I will bookmark your blog and take the feeds also

    [Reply]

  21. Pleksi

    19. May, 2012

    Very useful topic really thank very much

    [Reply]

  22. recetas

    09. Apr, 2013

    I have some problems with IE7 and some AJAX code, you should continue to provide support for IE7

    [Reply]

Leave a Reply