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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
from http://www.noupe.com/ajax/30-fresh-ajax-tutorials-and-techniques.html
