Jan 04 2010

30 Fresh AJAX Tutorials And Techniques

Advertisement

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 Bit.ly API
Using Twitter’s URL shortener, bit.ly, 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: twitter.com/speckyboy.

(al)

About the Author

Comments and Discussions
  • mupet, 04 January 2010

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

  • Mohamed Jama, 04 January 2010

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

  • Eugen R., 04 January 2010

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

  • Cypher, 04 January 2010

    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.

  • Cory, 04 January 2010

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

  • Nice article, Great INFO.

  • Jason, 04 January 2010

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

  • Dota, 04 January 2010

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

  • arnold, 04 January 2010

    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?

  • teguh, 04 January 2010

    great article, very usefull for me.

  • Xsss4hell, 04 January 2010

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

  • komal, 05 January 2010

    Hi
    nice one
    very help ful for me

  • Selom, 05 January 2010

    U the best.

  • othman, 05 January 2010

    Great list ! Thanks for collecting these

  • Brandon Arnold, 05 January 2010

    Lots of great tools to keep me busy :)

    Thanks!!!!

  • Web Ideas, 05 January 2010

    Nice tuts and tricks! Thanks!

  • Farid Hadi, 01 February 2010

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

  • Elving, 09 February 2010

    Great collection! Am faving this :)

  • mocine, 16 February 2010


    thx, love this articles

  • Betarades, 16 February 2010

    Nice article. Really good info.

  • link building blog, 21 February 2010

    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!

  • Designs Wallet, 22 February 2010

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

  • Tutorials Palace, 22 February 2010

    nice tuts

  • James, 01 March 2010

    Jquery to help

  • jovenne, 04 March 2010

    Great!

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

    Thanks for the tutorial.

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

  • Janjua, 19 April 2010

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

  • Asker, 20 April 2010

    really useful

  • Suigetsu, 27 April 2010

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

    gracias

  • Deepak Kaletha, 05 June 2010

    Great lists, i like this lists m

  • Sidra Blue, 05 June 2010

    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.

  • Amit, 09 July 2010

    Great collection of ajax based applications..

    Thanks 4 posting.

  • Free Unique Articles, 14 July 2010

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

  • Darrick Brodersen, 06 August 2010

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

  • Suparak Panyaupatump, 09 October 2010

    Thanks Paul Andrew, Its useful for me :)

  • us cellular android, 15 December 2010

    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.

  • Mike, 02 January 2011

    I think its a perfect blog .

  • Alam, 16 January 2011

    Its all about design

  • Brandon Livingston, 18 January 2011

    Dude, gimme more!

  • toy story 3 toys lotso, 18 January 2011

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

  • Olinklist, 04 February 2011

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

  • Rachael Hwee, 17 February 2011

    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

  • Marva Schronce, 17 February 2011

    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.

  • Dennis Southerland, 22 April 2011

    Dietitian was the franz.

  • Orval Eadens, 10 May 2011

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

  • Altha Hinote, 30 May 2011

    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.

  • Jonas Serfoss, 18 August 2011

    these really were wonderful

  • Damian, 03 September 2011

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

  • Fountains, 15 September 2011

    These techniques will really help me, thank you!

  • fabio, 22 September 2011

    Thank you! excellent!

  • Akash, 02 December 2011

    Nice Article .

  • Web Agency Studio, 10 February 2012

    Very useful stuff !

    Thanks for techniques. Should really help.

    Thank you!

  • Nathz25, 18 April 2012

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

  • Peter Fisher, 21 June 2012

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

  • Yudi m putra, 23 July 2012

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

  • Yepi, 09 August 2012

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

  • renu kaushik, 18 August 2012

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

  • diwaker srivastava, 06 September 2012

    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.

  • Gloria, 20 November 2012

    Thanks for AJAX Multiple-File-Upload Form Using jQuery

  • marko, 17 February 2013

    thank you very much thank served me very useful

  • Tony, 30 March 2013

    Wish they all worked still =[

  • marko, 18 June 2013

    excellent tutorials I served a great help thanks

  • stoixima, 04 March 2014

    Very useful stuff !

  • Gourav, 22 March 2014

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

search form
 
image description image description