30 Fresh AJAX Tutorials And Techniques

January 4th, 2010

By Paul Andrew

Using AJAX on websites and applications is pretty much taken for granted nowadays. Users expect it. They want to be able to edit a page in-place, they want search queries to be auto-suggested, and they want to be able to submit a form without refreshing the page. Why? Because those things make browsing quicker, easier and, more importantly, enjoyable.

As great as AJAX is, though, it is not for every website or application. Part of the developer’s job is to know exactly where AJAX (or any technology for that matter) is needed. Too little can lead to user frustration. Too much causes misunderstanding. A balance and some restraints are always needed.

In this round-up, we have collected 30 fresh AJAX tutorials and techniques, covering almost every aspect of AJAX development: forms, applications, polls, editing, parsing, visual effects and much more.

AJAX Tutorials And Techniques

An AJAX-Based Shopping Cart with PHP, CSS and jQuery
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, and with help of the simpletip plug-in, you will be able to deliver a high-end interactive check-out process.
View the demo.

Fresh AJAX Resources

Creating an AJAX Web App Using the API
Using Twitter’s URL shortener,, and the jQuery library, you will be taken through the process of building an AJAX Web app. This is a great beginner tutorial, giving a detailed introduction to APIs and the basics of PHP and jQuery.
View the demo.

Fresh AJAX Resources

A Twitter List AJAX-Powered Fan Page
Twitter recently launched its new “lists” feature, which allows you to compile a list of your followers and organize them into categories. Using the newly expanded API (with list-management functionality added), you will learn how to create a widget that flips lists the other way round: this fan widget that goes in the sidebar allows visitors to fill in their Twitter name and join a special fan list from your Twitter account.
View the demo.

Fresh AJAX Resources

Learn How to AJAXify Comment Forms
Learn how to take a simple boring contact form and add some simple animation with an AJAX post request to submit the form to your MySQL database asynchronously.

Fresh AJAX Resources

A Simple AJAX Website with jQuery
Using jQuery, PHP and CSS, you will go through the process of creating a basic AJAX website. The finished product will load pages through AJAX from the PHP back-end and even completely support the browser history (something that is normally difficult to achieve with any AJAX or Flash website).
View the demo.

Fresh AJAX Resources

Create a Twitter-Like “Load More” Widget
In this tut, you will learn the technique—used by both Twitter and the Apple App Store—for loading more information. Simply by clicking the link or button, more content will appear, as if by magic. You will use AJAX, CSS, Javascript, JSON, PHP and HTML to build this widget. This tutorial features both the jQuery and the MooTools versions of the script.
View the demo.

Fresh AJAX Resources

A Simple Twitter App with Ruby on Rails
In this three-part tutorial series, you will set up a simple messaging model that holds posted messages. You will also learn how to post a message asynchronously.
View the demo.

Fresh AJAX Resources

AJAX Multiple-File-Upload Form Using jQuery
With this article, you will learn to develop an AJAXified multiple-file-upload form that uses much less server-side code and has a nice user interface. Thanks to the power of jQuery, the time spent on actual development is substantially reduced.
View the demo.

Fresh AJAX Resources

How to Send Facebook-Style Mail with PHP, AJAX and jQuery
The Facebook website is choc full of unique features, especially the system for sending mail and messages. Using PHP, AJAX and jQuery, you can recreate this technique using this step-by-step tutorial.
View the demo.

Fresh AJAX Resources

How to Create Your Own Stats Program (JavaScript, AJAX, PHP)
Chances are, you use an analytics programs such as Google Analytics, Get Clicky or Urchin to track every move and twitch on your website. They all track page views, visits, unique visitors, browsers, IP addresses and much more. But how exactly is this accomplished? Follow this tutorial and learn how to create your own basic Web statistics program using PHP, JavaScript, AJAX and SQLite.
View the demo.

Fresh AJAX Resources

AJAX Post Pagination in MooTools
Patiently browsing through the archive of posts on your WordPress website can be frustrating. A fix for this problem would be to use MooTools and AJAX to do the loading.

Fresh AJAX Resources

jQuery AJAX delete
Being able to remove content with Ajax is useful for any Web designer. Using a few lines of jQuery, you can remove both a DIV and a record from the database with AJAX. In this demo, you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment’s DIV, and the slide-up animation allows you to remove the DIV.
View the demo.

Fresh AJAX Resources

Voting System with jQuery, AJAX and PHP
Dzone offers users the chance to 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.
View the demo.

Fresh AJAX Resources

Creating a Dynamic Poll with jQuery and PHP
When you combine the neat functionality of PHP and the cleverness of jQuery, you can produce some pretty cool results. In this tutorial, you will create a poll using PHP and XHTML, then use some jQuery AJAX effects to eliminate the need for page refreshing and to give it a nice touch of animation.
View the demo.

Fresh AJAX Resources

AJAXify WordPress Comment Posting
Many WordPress plug-ins will AJAXify comments, but how do they do it? In this step-by-step tutorial, you will learn how to enable AJAXed comments with client-side JavaScript comment-form validation for any WordPress blog.
View the demo.

Fresh AJAX Resources

Create a Dynamic Scrolling Content Box Using AJAX
If you use Google Reader, then you may have noticed how it shows feed items. After you click on a feed, it loads a few items first, and as you scroll down to view more items, it adds more items dynamically to the list. This tutorial shows you how to create a similar content box that loads content dynamically as the user scrolls to the bottom of the box.
View the demo.

Fresh AJAX Resources

Create an In-Place Editing System
Making users click through multiple pages just to edit a single field is annoying. This tutorial shows you how to create an in-place editing system, as found on popular websites such as Flickr and then take things further with AJAX.
View the demo.

Fresh AJAX Resources

Submit A Form Without Page Refresh using jQuery
This article outlines a great way to use jQuery and AJAX to enhance the user experience, not just by validating the form but by submitting the contact form without having to refresh the page.
View the demo.

Fresh AJAX Resources

How To Parse XML Using jQuery and Ajax
In this tutorial you will learn how to parse or process an XML document and display the data on a page in HTML. This process can be used to filter raw RSS feeds, set up a cool site map on your blog or even lay the groundwork for your own auto-complete search.
View the demo.

Fresh AJAX Resources

Caching AJAX Results in Javascript
AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within the page. Unfortunately, many people do not properly cache request information when they can. The author shows you his improved method for caching AJAX requests.

Fresh AJAX Resources

How to Create an AJAX File Uploader
The application you will build in this tut uses jQuery’s versatility to allow multiple file uploads without a page refresh or redirection, complete with front- and back-end validation to prevent unwanted files from being uploaded to your server.
View the demo.

Fresh AJAX Resources

How to Create a Simple Web-Based Chat Application
The multiple-user Web-based chat application that you will build in this tutorial includes a log-in and log-out system, with AJAX-style features. The finished product would be perfect for a live support system for your website, as seen on the Vodafone and T-Mobile websites.

Fresh AJAX Resources

Facebook-like Auto-Suggestion with jQuery, AJAX and PHP
This article shows you how to recreate the unique auto-suggestion search feature of Facebook using jQuery, PHP and, of course, AJAX.
View the demo.

Fresh AJAX Resources

20 More Excellent AJAX Effects You Should Know
This article rounds up 20 relatively easy AJAX effects and techniques that can be used to spice up any page.

Fresh AJAX Resources

Record Text Selections Using MooTools or jQuery AJAX
This post demonstrates a useful technique for keeping track of what text users are highlighting and copying on a given Web page. It is helpful because it gives you an indication of what visitors really want from your website.

Fresh AJAX Resources

Automatically Update a Web Page with Dynamic Elements
You may know how to hide and display optional JavaServer Faces (JSF) components using JavaScript and CSS. To do this, you would first identify all JSF components and write them into JSF pages. But that is impossible when you are developing a Web page that contains dynamic elements that are unknown until runtime. With this article, learn how you can clear old UI components while automatically updating the dynamic elements of a Web page, as well as use Java code to add new elements and put them in their proper spot on a Web page. You’ll also learn how to bind different event handlers to different dynamic elements of a Web page, how to register a listener listening to changes of server-side data to invoke a page refresh, and how to use AJAX techniques to refresh only the dynamic parts of the Web page.

Fresh AJAX Resources

Build a Web Presentation Application using AJAX
How does Google Docs have such amazing functionality? It leverages Web 2.0 technologies, which provide robust functionality with relatively simple code. In this article, learn how to build a Web application to create slideshow presentations using AJAX.

Fresh AJAX Resources

Calendar Eightysix
Calendar Eightysix is an unobtrusive, developer-friendly JavaScript calendar and date-picker that offers a better user experience for date-related functionality. It is highly customizable and offers unique and quick navigation by jumping back and forth between months, years and decades without drop-down boxes.
View the demo.

Fresh AJAX Resources

jCart: AJAX/PHP Shopping Cart
jCart is a customizable jQuery plug-in that offers a simple e-commerce solution by handling visitor input without reloading the page.

Fresh AJAX Resources

AJAX Fancy Captcha
The Fancy Captcha jQuery plug-in is an intuitive and fresh way to complete those “verify humanity” tasks, offering reasonable protection against unwanted guests, namely bots and spammers. It works by asking you to verify yourself simply by dragging and dropping an item into a circle.

Fresh AJAX Resources

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic design resource blog. Follow him on Twitter here:


Tags: ,

65 comments for „30 Fresh AJAX Tutorials And Techniques
  1. mupet on January 4th, 2010 at 6:02 am

    Great lists, i like this lists most of them are new tutorials

  2. Mohamed Jama on January 4th, 2010 at 7:35 am

    Nice article, but only very few are “fresh”.

  3. Eugen R. on January 4th, 2010 at 7:59 am

    Let’s be honest they all are good but in no way ‘fresh’.

  4. Cypher on January 4th, 2010 at 11:10 am

    This might be good for beginners but all this stuff has been around for ages.

    Also everything is only using jQuery. I would suggest including different frameworks (at least Prototype) and not be so biased.

  5. Cory on January 4th, 2010 at 11:48 am

    Great tips…I find myself using ajax more and more…this will be a good reference for my next project. Thanks :)

  6. **..Cute Web Designer...** on January 4th, 2010 at 12:25 pm

    Nice article, Great INFO.

  7. Jason on January 4th, 2010 at 12:51 pm

    Lots of good stuff to read here. Thanks for sharing my parsing xml with jQuery tutorial!

  8. Dota on January 4th, 2010 at 5:15 pm

    i learn ajax now, after reading some book i think ajax is not hard to learn

  9. arnold on January 4th, 2010 at 5:21 pm

    I think, we need more round-up like this.
    Thanks for the effort on searching cool tuts.
    Im hoping a round-up jQuery plugins and also PHP? maybe?

  10. teguh on January 4th, 2010 at 6:25 pm

    great article, very usefull for me.

  11. Xsss4hell on January 4th, 2010 at 10:02 pm

    Nice List, but I miss the “Refinable search” pattern also known as Filterable list. You know.. the like sliders and checkboxes

  12. komal on January 5th, 2010 at 2:51 am

    nice one
    very help ful for me

  13. Selom on January 5th, 2010 at 5:42 am

    U the best.

  14. othman on January 5th, 2010 at 7:42 am

    Great list ! Thanks for collecting these

  15. Brandon Arnold on January 5th, 2010 at 1:38 pm

    Lots of great tools to keep me busy :)


  16. Web Ideas on January 5th, 2010 at 11:49 pm

    Nice tuts and tricks! Thanks!

  17. Farid Hadi on February 1st, 2010 at 11:15 pm

    Wow! This is a long list of great tuts! Thanks for sharing it with us.

  18. Elving on February 9th, 2010 at 3:55 pm

    Great collection! Am faving this :)

  19. mocine on February 16th, 2010 at 3:16 am

    thx, love this articles

  20. Betarades on February 16th, 2010 at 3:54 pm

    Nice article. Really good info.

  21. link building blog on February 21st, 2010 at 1:44 pm

    Easily, the article is really the sweetest on this precious topic. I fit in with your conclusions and will eagerly look forward to your forthcoming updates. Just saying thanks will not just be adequate, for the extraordinary clarity in your writing. I will immediately grab your rss feed to stay informed of any updates. De lightful work and much success in your business dealings!

  22. Designs Wallet on February 22nd, 2010 at 2:39 am

    I think this is the best listing and it will very helping for jquery and js users

  23. Tutorials Palace on February 22nd, 2010 at 3:05 am

    nice tuts

  24. James on March 1st, 2010 at 1:28 am

    Jquery to help

  25. jovenne on March 4th, 2010 at 11:50 am


    This tutorial seems good for beginners like me.. I will put much time studying with this one.

    Thanks for the tutorial.

  26. création sites internet on March 9th, 2010 at 7:43 am

    Nice and useful article highlighting all the possibilities of Ajax. Thanks.

  27. Janjua on April 19th, 2010 at 11:54 am

    Very great article ! Thanks a lot, I love it !!!

  28. Asker on April 20th, 2010 at 1:29 am

    really useful

  29. Suigetsu on April 27th, 2010 at 1:41 pm

    este es el mejor web site que he vistado para consegir examples claros


  30. Deepak Kaletha on June 5th, 2010 at 3:37 am

    Great lists, i like this lists m

  31. Sidra Blue on June 5th, 2010 at 10:39 pm

    Very good list. We built a lot of online shopping carts, but that first one on this list is new to us! Would definately help us heaps for future clients.

  32. Amit on July 9th, 2010 at 6:18 am

    Great collection of ajax based applications..

    Thanks 4 posting.

  33. Free Unique Articles on July 14th, 2010 at 10:28 pm

    I was just looking for this information, very thanks for sharing it

  34. Darrick Brodersen on August 6th, 2010 at 7:11 am

    This blog is great. I have learned lots of things from here. Thanks

  35. Suparak Panyaupatump on October 9th, 2010 at 7:11 pm

    Thanks Paul Andrew, Its useful for me :)

  36. us cellular android on December 15th, 2010 at 5:23 am

    I came across your article listed on Fox news earlier in the cellphone section so I thought I would let you know. I tried to give feedback on one of the other stories twice but couldn’t get the comment to load.

  37. Mike on January 2nd, 2011 at 1:37 pm

    I think its a perfect blog .

  38. Alam on January 16th, 2011 at 8:16 am

    Its all about design

  39. Brandon Livingston on January 18th, 2011 at 9:03 am

    Dude, gimme more!

  40. toy story 3 toys lotso on January 18th, 2011 at 9:35 am

    This site has got lots of very useful stuff on it. Thank you for sharing it with me!

  41. Olinklist on February 4th, 2011 at 7:40 am

    I Love AJAX code snipet.
    Thanks for discovery it Noupe.

  42. Rachael Hwee on February 17th, 2011 at 12:12 pm

    Oh my goodness! an amazing article dude. Thank you Nonetheless I am experiencing concern with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting an identical rss downside? Anybody who is aware of kindly respond. Thnkx

  43. Marva Schronce on February 17th, 2011 at 6:03 pm

    I used to be very pleased to find this web-site.I needed to thanks to your time for this excellent read!! I definitely enjoying each little little bit of it and I have you bookmarked to take a look at new stuff you weblog post.

  44. Dennis Southerland on April 22nd, 2011 at 8:42 pm

    Dietitian was the franz.

  45. Orval Eadens on May 10th, 2011 at 9:00 pm

    Really good blog you’ve got here. You will see me going through your stuff often. Book marked!

  46. Altha Hinote on May 30th, 2011 at 11:01 pm

    It is really a great and useful piece of info. I am glad that you shared this useful information with us. Please keep us informed like this. Thank you for sharing.

  47. Jonas Serfoss on August 18th, 2011 at 4:50 pm

    these really were wonderful

  48. Damian on September 3rd, 2011 at 4:22 pm

    Nice list. Ajax sure has taken over how we handle posting and getting data. Thanks for sharing!

  49. Fountains on September 15th, 2011 at 3:48 pm

    These techniques will really help me, thank you!

  50. fabio on September 22nd, 2011 at 5:20 pm

    Thank you! excellent!

  51. Akash on December 2nd, 2011 at 10:54 am

    Nice Article .

  52. Web Agency Studio on February 10th, 2012 at 1:11 pm

    Very useful stuff !

    Thanks for techniques. Should really help.

    Thank you!

  53. Nathz25 on April 18th, 2012 at 5:33 am

    Perfect ! I really need this..! thanks :)

  54. Peter Fisher on June 21st, 2012 at 8:52 pm

    Good to see so many great tutorials. Useful book mark indeed

  55. Yudi m putra on July 23rd, 2012 at 1:11 pm

    greatt..!! i always looking for ajax and also jquery..
    thankyou… :D

  56. Yepi on August 9th, 2012 at 9:17 am

    Thanks for sharing, let me know which is your favorite :)

  57. renu kaushik on August 18th, 2012 at 3:56 am

    thanks for sharing,,,, and help me out wid AJAX its awsome

  58. diwaker srivastava on September 6th, 2012 at 9:26 pm

    Thanks Paul Andrew for such a nice article . can you have script of jquery for slider which takes image name from table and run slideshow of unlimited images.

  59. Gloria on November 20th, 2012 at 1:03 pm

    Thanks for AJAX Multiple-File-Upload Form Using jQuery

  60. marko on February 17th, 2013 at 2:38 am

    thank you very much thank served me very useful

  61. Tony on March 30th, 2013 at 4:42 pm

    Wish they all worked still =[

  62. marko on June 18th, 2013 at 5:50 am

    excellent tutorials I served a great help thanks

  63. stoixima on March 4th, 2014 at 7:14 pm

    Very useful stuff !

  64. Gourav on March 22nd, 2014 at 6:56 pm

    Its really hard to find these type of useful techniques but this list helps us to learn the things in very short span of time..