Noupe » AJAX

30 Fresh AJAX Tutorials And Techniques

vitaly — Mon, 04 Jan 2010 13:33:52 +0000

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.

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.

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)

Free Slideshow, Gallery And Lightboxes Scripts

Guest Posting — Wed, 14 Oct 2009 10:26:08 +0000

by Obaid ur Rehman

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need.

Free Slideshows And Lightboxes Scripts

Polaroid Gallery v.1.01

Polaroid Gallery is a free open-source Flash gallery developed by Christopher Einarsrud.

Active Slideshow Pro

Create dazzling multimedia presentations, slideshows and banners with Active Slideshow Pro. This extension builds on the success of Active Slideshow and gives you new spectacular effects and optimal control over your slides, texts, transitions and sounds.

PicLens Slideshow

Take your favourite images full-screen. This template is based on PicLens and combines the power of PicLens and Media RSS technology to give you an easy way to add immersive multimedia slideshows to your own website. The exported Piclens gallery can also easily be used as a complete Web page.

Plogger

Plogger is the next generation in open-source photo gallery systems. A Web application not bloated with superfluous features or complicated configuration settings. Plogger is a simple yet powerful tool, everything you need to share your images with the world.

Shadowbox

Shadowbox is an online media viewer application that supports all of the Web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.

PhatFusion Slideshow

Transition between images.

Galleriffic

Galleriffic was inspired by Mike Alsup’s Cycle plug-in, but with performance in mind for delivering a high volume of photos.

NoobSlide

Fancybox

FancyBox is a tool for displaying images, HTML content and multimedia in a Mac-style Lightbox that floats over top the Web page.

Auto Generating Gallery

If you are creating a fairly small gallery, hand-coding a grid of thumbnails will probably do. But for larger galleries or doing a lot of adding, editing and swapping of photos, you will probably want a better solution. And that solution is: an automatically generating photo gallery!

Dynamic Image Gallery and Slideshow

Barack Slideshow

Pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the most attractive ones done by a presidential candidate. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.

jQuery Multimedia Portfolio

This plug-in for jQuery automatically detects the extension of each media file and applies the right player.

(E)2 Photo Gallery

(E)2 Photo Gallery is a open-source gallery built with MooTools JavaScript Library in a compact, modular and object-oriented framework. Tell the (E)2 Photo Gallery what folder your images are stored in, and it will automatically load them using PHP.

Flickrshow

Flickrshow is a lightweight, cross-browser JavaScript slideshow, giving you an easy way to display Flickr images on your website.

ProtoFlow

ProtoFlow is a coverflow effect written in JavaScript. It uses Prototype and Scriptaculous to do the bulk of the work, and it uses Reflection.js to do all of the image reflection stuff.

Flip 3D Flash Slideshow

A very nice Flash-based template. Each image that flips to the next casts a subtle reflection on the ground. The size of the images can be easily adjusted by editing the template files. And adding a background image is a piece of cake.

Imago

Imago is an AJAX image gallery focused on simplicity and ease of use. It’s in plain JavaScript and builds on the mature AJAX library MooTools. No server-side scripting is required! Neither is Flash. Whether your photos are on Flickr, SmugMug or your own server, Imago can show them.

Thumbnoo

PictoBrowser

A free Web application that displays Flickr and Picasa images on websites and blogs.

jQuery Gallery

Here is an image gallery with smooth transitions, thumbnails and pretty reflections.

PostcardViewer

PostcardViewer is a free customizable Flash image viewer. The interface looks like a set of postcards shuffled on a table.

Spry

Spry is a JavaScript-based framework that enables the rapid development of AJAX-powered Web pages. Not a JavaScript guru? No problem. Spry is designed to feel like an extension of HTML and CSS, so anyone with basic Web production skills can create a next-generation Web experience by adding the power of AJAX.

3D Curve Photo Gallery

PhotoViewer

Moopix

Slideshowpro

Lightbox Photo Gallery and Slideshow for Picasa

This template uses the excellent Lightbox JavaScript by Lakesh Dakar.

Vista photo gallery

Vista Photo Gallery is a photo album builder that allows you to create and publish rich, interactive photo galleries for your website.

UvumiTools Gallery Plugin

The UvumiTools Gallery allows you to display fancy photo galleries on your website without requiring you to be a master programmer, thanks to the powerful MooTools JavaScript framework. Just include a couple JavaScript and CSS files.

Parallax Gallery

TiltViewer

TiltViewer is a free customizable 3-D Flash image viewing application.

jQuery plugin – Easy Image or Content Slider

Lightview

DevKick Galleria

Galleria is a JavaScript image gallery written in jQuery. It loads images one by one from an unordered list and displays thumbnails when each image is loaded. It can create thumbnails, scaled or unscaled, centered and cropped, inside a fixed thumbnail box defined by CSS.

FrogJS Javascript Gallery

FrogJS is a simple unobtrusive JavaScript gallery. It’s not a replacement for other thumbnail galleries such as Lightbox JS, but is a different way of showcasing galleries. It is best for page-by-page galleries, such as photo stories.

jQuery virtual tour

A Simple Twitter App with Ruby on Rails – Messages With Ajax

Editorial — Tue, 23 Jun 2009 21:01:11 +0000

Ruby on Rails is a web application framework that promotes rapid development. Clients’ demands are ever increasing yet they still expect the same quality of output.

Frameworks, like Rails, help to achieve this; why?… here are some of the reasons:

The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication
The third part of this tutorial: A Simple Twitter App with Ruby on Rails – Building Friendships

Convention over Configuration (CoC):
This is used to reduce the amount of up-front configuartion. The idea is; if you abide by certain coding conventions, you will have little, to none, configuration to do.
Object-Relational Mapping (ORM):
ORM reducing coupling to the database. This abstraction allows you changed the DBMS provider with little trouble.
Structured Code:
The MVC pattern forces you to organise your code in a clean, structured way. This results in more maintainable code.
Plugins:
Plugins save you from re-inventing the wheel every time you want to add functionality to your app. For instance, making you web app capable of performing searches can be easily added with the acts_as_ferret plugin. There are many more plugins!

Who is this Tutorial for?

This tutorial is for people who have learnt the basics of Rails and want to take things to the next level. This tutorial is not a beginners guide for getting started with Rails. If you are just starting out with Rails I suggest this article from Six Revisions.

What this Tutorial Covers

In the first part of this three part series, we cover setting up a simple message model, which will hold the messages posted. Further to this, we will learn how to post a message asynchronously, using AJAX.

View Demo of Twitter App with Ruby on Rails

Basic Application Design

Ok, so you’ve decided to create a “twitter” style micro-blog using Ruby on Rails. First, we need to think about our basic requirements and from this we can model our application.

There are many ways that this can be done, but we will use a simple technique in which you jot down a few paragraphs about how and what the application is expected to do then highlight the nouns. So, lets try it.

My web app should work in a similar way to twitter. Users should be able to register with the site and create short posts. Users should be able to follow other users. Each user should be able to see their own posts plus the users they are following.

Note that I’ve been selective in what nouns I’ve highlighted. You only really need to take notice of the nouns which you feel will need to store data to the database.

I know there is more to twitter than this, but lets leave it simple. As you can see the “nouns”, which will need to store data to the database are “posts” and “users”. So we require two models:

In the first part of the tutorial, we are going to deal with posts only.

Post
User

Creating the Project Files

Before we do anything we need to create a project for our twitter web app.

  > rails twitter -d mysql

As you can see, I will be using MySQL as the DBMS, however, feel free to use whatever database you want.

Open the database.yml file in the config folder and modify the password as required. An example is shown below.

development:
  adapter: mysql
  encoding: utf8
  database: twittest_development
  pool: 5
  username: root
  password: yourpassword
  host: localhost

Now, create the database with the “rake” command.

  > rake db:create

Implementing the basic Message Model

So let’s go right ahead and generate the “Post” model and migrate it.

  > ruby script/generate model post message:text
  > rake db:migrate

Controller

Now, let’s create a controller for the post model.

  > ruby script/generate controller posts

We need to set up some methods for interacting with the model. Edit your “posts_controller.rb” file and add the following methods:

class PostsController < ApplicationController
  def index
    @posts = Post.all(:order => "created_at DESC")
    respond_to do |format|
      format.html
    end
  end

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end
end

We only need two methods, “index” and “create”. The index method creates an instance variable containing all the posts in descending order. The create method is used to create a new post.

Views

Let’s create the “index” view. First, we’ll create a partial for posts. Create a file called “_post.html.erb” in the views/posts folder and add the code below.

Posted <%= time_ago_in_words(post.created_at) %> ago
<%= post.message %>

The index view is now very simple. Create a file called “index.html.erb” in the views/posts folder and add the code below.

<%= render :partial => @posts %>

Create some Posts

Open a console session and create a few new messages, as shown below.

  > ruby script/console
  Loading development environment (Rails 2.3.2)
  >> Post.create!(:message => "My first post" )
  >> Post.create!(:message => "Post number two!" )

Create a Form for Posts

Obviously you’re not going to get the user to use the console to create messages. So, our next task is to inject some functionality into our web app to allow the user to create messages. Twitter has an input box above the indexed messages, which is used for submitting a new message; We will keep our web app the same.

First, we will create a partial for the form, then we will render that partial at the top of the index view. Create a file called “_message_form.html.erb” in the posts view folder and add the following code:

<% form_tag(:controller => "posts", :action => "create") do %>
  <%= label_tag(:message, "What are you doing?") %>

  <%= text_area_tag(:message, nil, :size => "44x6") %>

  <%= submit_tag("Update") %>
<% end %>

Now, we need to modify the index view to render this partial at the top. Open the index.html.erb file and modify the code as follows:

<%= render :partial => "message_form" %>
<%= render :partial => @posts %>

For this to work we need to make one last modification. Open the route.rb file and map a new “posts” resource, as shown below. (Note: the comments from this file have been removed).

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end

This creates a few named routes. If you look back to the “create” method in the posts controller, you’ll see that we make use of the posts_path named route; Defining the posts resource makes this named route available.

So, lets fire up the web server and a see how things look.

  > ruby script/server

Now open a browser and go to http://localhost:3000/posts. You should see a screen, as shown below.

Adding some AJAX

AJAX allows you to make asynchronous requests to the server using JavaScript. We will make use of AJAX to make the posting a message a bit smoother.

When the user clicks on the “Update” button, we want the message to update without refreshing the browser. We have a few things to do to add AJAX functionality. First, lets change the “create” method in the posts controller:

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
        format.js
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end

The only change here is the “format.js” code, allowing the create method to respond to JavaScript. Next, we need to create a posts layout file. In the views/layout folder create a file called “posts.html.erb” and add the following code:




  <%= javascript_include_tag :all %>


  
    <%= yield %>

The main purpose of this is to make use of the “javascript_include_tag” call, which includes the relevant JavaScript files for AJAX and some visual effects. Next, we need to make a small addition to the index view (”index.html.erb”).

<%= render :partial => "message_form" %>

  <%= render :partial => @posts %>

As you can see all we have added is a div block surrounding the posts partial. This will be used later when we are specifying where the AJAX response should be placed. Nearly there! Now we will add a div_for block to our post partial (”_post.html.erb”).

<% div_for post do %>
  Posted <%= time_ago_in_words(post.created_at) %> ago
  <%= post.message %>
<% end %>

Edit the “_message_form.html.erb” partial and change the form_tag call to form_remote_tag as show in the code extract below:

<% form_remote_tag(:controller => "posts", :action => "create") do %>

The div_for operation create a div block with a unique id, this is especially useful when looping through several records. Finally, we need to create the rjs template. To do this, create a file called “create.js.rjs” in the views/posts folder and add the following code.

page.insert_html :top, :posts, :partial => @post
page[@post].visual_effect :highlight

The first line specifies that a new post partial will be rendered at the top of the posts div when the asynchronous call responds. The second line specifies that a “highlight” visual effect will be applied to that block when it is rendered.

That’s it! Start you web server again, browse to http://localhost:3000/posts and give it a go.

Make it Look Pretty!

I’ve created a stylesheet, which we can use to make things look a bit more respectful. Create a file called layout.css in the public/stylesheets folder then add the following CSS code:

body
{
  font-family: tahoma, sans-serif;
  font-size: 18px;
  background-color: #4B7399;
  width: 100%;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

#content
{
  width: 800px;
  margin: 0 auto;
  text-align: left;
}

.post
{
  padding: 5px 20px 5px 20px;
  background-color: #ffffff;
  margin: 20px 0 20px 0;
  color: #000000;
}

Finally, you will need to add stylesheet_link_tag call to the posts.html.erb layout file. As per below, the call should be placed in the head tag.


  <%= javascript_include_tag :all %>
  <%= stylesheet_link_tag 'layout' %>

OK! It doesn’t look that pretty, but it will do for our purposes.

Setting up a Home Page

To have the root URL (http://localhost:3000) direct the user towards your posts you will first need to delete the public/index.html file. Do this now.

The second thing you need to do is set up a route in your config\routes.rb file. Open routes.rb in notepad and add a new line to the end using map.root, as shown below.

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
  map.root :controller => "posts"
end

For more on routes, try the Rails API Documentation

Now if you browse to http://localhost:3000. The request will be routed to the posts controller.

Summary

This concludes the first part of the series. Depending on the popularity of this article, parts 2 and 3 will follow shortly.

What have we Learnt?

You’ve learnt how to carry out basic application design and how to use this design to work out what models are required. Further to this, you’ve learnt how to use the console to help with the development of your application. Finally, you used AJAX to perform asynchronous requests to the server.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

How AJAX Works: 10 Practical Uses For AJAX

Editorial — Sat, 13 Jun 2009 21:01:20 +0000

AJAX has gotten more and more popular over the years, and has allowed web applications to act more and more like desktop applications. AJAX can provide a lot of additional functionality that could not be accomplished any other way.

What Is AJAX? How Does It Work?

AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.

Here is how the usual AJAX script goes:

Some action triggers the event, like the user clicking a button.
The AJAX call fires, and sends a request to a server-side script, using XML
The server-side script (PHP, ASP, or whatever) takes the input from JavaScript, can access the database if it needs to, and processes the data.
Using XML again, the script sends the data back to the original client-side page that made the request
A second JavaScript function, called a callback function,catches the data, and updates the web page

Throughout this tutorial, we will discuss how various scripts use this routine to accomplish a wide variety of effects.

1. Login Forms

Instead of going to a login page, and then navigating back to the page you originally wanted, with AJAX, a user can type in their user name and password directly into the original page. From there AJAX will send a request to the server to log them in. The server let’s the page know they’ve been logged in, and the page you are on can update as needed. Digg has a login-system that works like this.

Example: Digg.com (top of page)

Plugin: jQuery Form Plugin

2. Auto-Complete

Google was one of the first major companies to start using AJAX, and Google’s search suggestion tool was one of the first ways they used it, and one of the first auto-complete tools made. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke. Auto-Complete is great for forms where you have a lot of possible inputs, and making a select drop down would be too long and cumbersome.

Example: Google Search

Plugin: jq autocomplete

3. Voting and Rating

Social bookmarking sites like Digg and Reddit let the users decide the main content of the site by voting on content that the users like. They use AJAX to handle all of the voting, so that the users are able to voice their opinions on a number of stories quickly and easily.

Example: Reddit

4. Updating With User Content

One of the things that made Twitter so popular was their simple and easy-to-use interface. When someone makes a ‘tweet’, it is instantly added to their feed, and everything is updated. Recently, Twitter has started using AJAX with their ‘trending topics’ pages. Every few seconds, the page lets the user know that more tweets have been made about the subject, giving them up-to-the-second updates.

Example: Twitter

5. Form Submission & Validation

Forms have always tricky to work with, but AJAX can make them a lot better for the users. AJAX can be used in a variety of ways, from the auto complete mentioned above, to validation and submission as well. Some sites use AJAX to check if a form meets certain requirements, such as password strength, or if something is a valid email or URL.

Example: 10 Cool jQuery Form Plugins

6. Chat Rooms And Instant Messaging

Chatting online has come a long way from the days of IRC. Chat rooms and instant messaging can now be handled in the browser completely. There are two main AJAX processes in a chat room or IM application. Think of one of them as your ears, and one of them as your mouth. Your ‘mouth’ updates the server and lets it know that you have sent a message. The ‘ears’ check with the server constantly, and updates your page with messages that have been sent by whoever you are chatting with.

Example: Meebo Chat (Uses Ajax)

Plugin: GMail/Facebook Style Chat Script

7. Slicker UIs

Creating a clean, slick user interface is a very popular use of AJAX. It allows users to accomplish more on a single page. The benefits of this are twofold: First, it makes using the web application quicker and easier for the user; Secondly, it cuts down on the number of requests you have to make to the server, which cuts down on bandwidth and load times. A free file upload service called Drop.io uses this well. Google has also really pushed the envelope of what is possible with AJAX by making desktop-like applications like Google Docs and Google Maps.

jQuery UI Library

8. External Widgets

When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online. This is how a number of plug-ins for Content Management Systems like Wordpress work, and other various scripts like Google Adsense.

Example: Google Adsense

Plugin: Script for loading external content into div

9. Lightboxes instead of pop-ups

Pop-up blockers are very common place these days, and for a good reason: pop-ups are annoying. Using light boxes, which are pop-ups inside the browser window, the pop-up blocker can’t stop it, and they aren’t quite as irritating to the user. Some people use them for advertising, like on Darren Rowe’s ProBlogger.com. They can also be used for something like a login or register box, like Reddit does when you try to vote and you are not logged in.

Example: Logo Sauce

Plugin: Lightbox Plugin

10. Using AJAX With Flash

Using AJAX along with Flash is a rarely used technique, but it can be used to generate some impressive results. The flash game website Kongregate uses this to great effect. Using their API, they have their own achievement system that involves winning ‘badges’ for completing various accomplishments in games. When a badge is earned, the API in Flash sends a response back to JavaScript, which then uses AJAX to update the user’s profile with the newly earned award.

Example: Kongregate

Plugin: jQuery Flash Plugin

I hope this article has given you a lot of ideas of how you can use AJAX to improve and expand your web applications. What are some other uses you can think of for AJAX?

Author: Joel Reyes

Joel Reyes Has been designing and coding web sites for several years, this has lead him to be the creative mind behind Looney Designer a design resource and portfolio site that revolves around web and graphic design.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

10 AJAX-based & PHP WebMail Clients For a Great User Experience

Editorial — Thu, 12 Mar 2009 01:36:40 +0000

Employees need to access their email from wherever they happen to be – on the road, at customer sites, remote offices, and at home. WebMail clients allows receiving and sending email messages using POP3 and SMTP protocols through both local and remote mail servers. Providing secure filtering of unsafe content while viewing HTML-formatted email messages. WebMail clients can operate under different popular web platforms (PHP, ASP.NET, ruby on rails, java).

Today i wanted to share with you 10 AJAX-based & PHP webmail client that delivers the look and feel, usability and performance of a desktop application. Some of the webmail clients listed below are open source code that can be easily modified to better suit user’s needs, while others are not. So You must check their license to know the rules.

1. RoundCube

RoundCube Webmail is a browser-based multilingual IMAP client with an application-like user interface. It provides full functionality you expect from an e-mail client, including MIME support, address book, folder manipulation, message searching and spell checking. RoundCube Webmail is written in PHP and requires a MySQL or Postgres database. The user interface is fully skinnable using XHTML and CSS 2.

2. Zimbra

Zimbra provides open source email and calendar groupware software, with a browser-based AJAX client to deliver a rich experience with a message conversation view and visual search builder that makes multi-gigabyte inboxes easier to use. They also integrate 3rd party applications as “mash-ups” via web services so you can view CRM data, maps, or anything else without leaving the context of a message.

3. Xuheki

Xuheki is a fast IMAP client which has a browser-based AJAX client so you can access it from anywhere to read your email. It has most features that you would expect from a fine “Mail User Agent”. Xuheki is distributed under the terms of the GNU General Public License.

4. SquirrelMail

SquirrelMail is a standards-based webmail package written in PHP. It includes built-in pure PHP support for the IMAP and SMTP protocols, and all pages render in pure HTML 4.0 (with no JavaScript required) for maximum compatibility across browsers.

5. Atmail

AtMail, a free lightweight Ajax Webmail client software that is written in PHP that allow end user receive email via web browser and WAP devices. This webmail client software can be installed on variety platform like Windows and Linux. Plus more, it support various email technology like IMAP/POP3 mailboxes, and an optional email-server mode that uses Exim as the MTA.

6. afterlogic

AfterLogic WebMail Lite PHP is easy-to-use webmail script with modern interface, supports AJAX and skins. Users can receive, view, delete, compose, and send mail through web interface (POP3 and SMTP supported). Multiple attachments, multiple mail accounts and domains, preview panel, web-based administration. Easy installation, supports PHP 4.1 and above. Open source and completely free. Can be upgraded to Pro version with extended features….

Live Demo

7. Hastymail

Hastymail is a full featured IMAP/SMTP client written in PHP. Compatible with PDAs, phones, text browsers, and with all mainstream browsers. Hastymail has a powerful plugin system that PHP developers can use to alter the way it works. Plugins can add pages within the Hastymail application (including css files), alter existing pages by inserting XHTML, modify internal data structures within Hastymail, make AJAX callbacks using their AJAX system, and even communicate with a configured SQL server.

8. Mailr

Mailr is an open source webmail application written in Ruby which uses Ruby On Rails web application framework. The application is tested with Courier-IMAP but it should be possible to use it with any other IMAP server.

9. Claros inTouch

Claros inTouch is an Ajax communication suite with key features such as webmail, address book, post-it notes, calendar (in progress), webdisk (in progress), built-in instant messenger and rss reader. It is the first open source web application which features built in spam protection and instant messaging capabilities together with web 2.0 technologies. Built with Java, utilizes JSP/Servlets with the well known J2EE technologies & uses MySQL database.

10. Postaci

Postaci is a PHP based POP3/IMAP e-mail client that is very simple and easy to use. It supports SMTP authentication. It can handle both protocols and the defaul protocol can be changed from a single configuration file. Postaci is platform independent, it can work on any operating system which supports PHP. Postaci is also database independent, it can be used with MySQL, mSQL, Microsoft SQL, Sybase,
PostgreSQL.