This is another article in our series — AJAX Help. We hear from a lot of readers who would like more Tutorials to help them learn AJAX. So, we’re pleased to provide an excellent list by Max Keisler.  We look forward to hearing from you with comments about the tutorials, and if you know of another good one, or have written one yourself, be sure to leave a link in the comments below.  But before we get to the Tutorials that Max has reviewed, we present a video tutorial on using FireBug to debug your AJAX applications — something you’ll soon want to do after learning from the tutorials and writing your own scripts.

Introduction to Debugging AJAX Application with Firebug

Above, watch this video to learn how to debug the applications you’ll create after learning how to write AJAX applications with the tutorials below.

Top AJAX Tutorials

by Max Keisler

With the popularity of AJAX growing every day I’ve had the opportunity to collect and try out many more tutorials in the last several months. These examples and how-to’s represent the best tutorials that I’ve personally used or otherwise had the opportunity to work with out of the overall group. This post is intended for individuals who learn best by example. Most of the listed tutorials come complete with instructions and source code. I’ve also categorized all of the tutorials for easy browsing. Enjoy!

AJAX Getting Started Tutorials

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.

A simple AJAX example
Based on Rasmus’s 30 second AJAX tutorial, I’ve cobbled together a very rudimentary example of one approach to AJAX programming. A “Hello, World” AJAX program, if you will. You can view the demo here on my site, and download the source code (document attachment at the bottom of this article).

A List Apart: Articles: Getting Started with Ajax
The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts.

An Introduction to AJAX
A very nice introduction to AJAX.

Introduction to Ajax
When it comes to Ajax, the reality is that it involves a lot of technologies — to get beyond the basics, you need to drill down into several different technologies (which is why I’ll spend the first several articles in this series breaking apart each one of them).

These AJAX tools are presented with working examples under each code sample.

Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples
A great group of AJAX examples.  You’ll see the code you need plus working examples beneath each tool technique.

{smartads}

Rasmus’ 30 second AJAX Tutorial
I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became “AJAX”. And it really isn’t as complicated as a lot of people make it out to be. Here is a simple example from one of my apps.

An Ajax “Hello World” project to Get You Going
Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at my version of this ultra-simple introduction to Ajax with sincere thanks to the original author.

Ajax Beginners Tutorial
In this tutorial we’ll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.

AJAX Activity Indicator Tutorial
CakeTimer - An Ajax File Uploads Progress Bar
This is a demonstration of an AJAX powered progressbar to monitor file uploads with (Cake)PHP.

HowTo add Ajax in-progress indicators
Ok, so my little del.icio.us app (click link to read about how I added Ajax functionality to a simple Rails app) is pretty cool, but it was missing one big thing. When the user clicks the “Get Results” link she has no idea that the page is communicating with the server.

AJAX Bookmarklets Tutorial
Creating Huge Bookmarklets
A bookmarklet is a special piece of JavaScript code that can be dragged into a user’s link toolbar, and which later can be clicked on to implement cross-site behavior. People have done all sorts of cool stuff with it.

AJAX Chat Tutorials
AJAX Chat Sources Code for Download
After a slow start (following the announcement of the XHTML (ajax) Chat) things got finally busy. I had so many requests that I have decided to offer the complete sources for download.

Lace - Ajax Chat
Lace is a free, lightweight Ajaxian communications engine suitable for a shoutbox, chat room or similar. Version 0.1.3 brings with it several bug fixes, a tiny bit of code reorganization and most importantly, an oft-requested User List.

Example of simple AJAX chat script in action -- clean and modern looking interface.

Most Simple Ajax Chat Ever
Very easy to use AJAX chat demo.

AJAX Client-Server Communication Tutorials
Implementing simple AJAX interaction in your Web Application using XMLHttpRequest object
Everybody till now must have atleast heard about AJAX (Asynchronous JavaScript And XML). This example will give you an idea about how you can implement simple AJAX interaction in your web application.

Make asynchronous requests with JavaScript and Ajax
In this article, you’ll begin with the most fundamental and basic of all Ajax-related objects and programming approaches: The XMLHttpRequest object. This object is really the only common thread across all Ajax applications and — as you might expect — you will want to understand it thoroughly to take your programming to the limits of what’s possible.

Advanced requests and responses in Ajax
n this article, I move beyond the basics in the last article and concentrate on more detail about three key parts of this request object, the HTTP ready state, the HTTP status code and the types of requests that you can make

This tutorial (AJAX link below) is a good starting place if you're new to programming with Asynchronous JavaScript And XHTML (AJAX).

AJAX
In this tutorial, you’ll be introduced to Ajax, a technology that allows you to send these requests through small JavaScript calls, meaning the user doesn’t have to wait for the page to refresh.

All Request, All The Time
Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts.

AJAX Drag and Drop Tutorial
Drag and Drop Tutorial (with a cool video)
Adding items to a shopping cart in common e-commerce applications isn’t very close to the actual “add to cart” metaphor, since it requires clicking an “add to cart” button, watch a new page (the shopping cart), and then go back to the shop or checkout with buttons. Ajax allows to get closer to the cart metaphor, by enabling drag-and-drop interactions and giving immediate visual feedback, without leaving the shop.

AJAX Dynamically Content Loading Tutorials
Dynamically loaded articles
This is a basic example showing you how to use AJAX. 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 DIV.

Get a free package of AJAX scripts useful for creating your own Content Management System.

Ajax - Dynamic Content
This small generic script makes it easy for you to load content of external files into HTML elements on your page.

AJAX Forms and Autocomplete Tutorials
Scriptaculous Lists with PHP
The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to implement, and they’re just so much nicer than the standard listbox with up/down arrows that we see in most of today’s applications and administration tools.

Alter data with Ajax forms
Displaying rich formatted questions and lists, even paginated, is not enough to make an application live. And the heart of the askeet concept is to allow any registered user to ask a new question, and any user to answer an existing one. Isn’t it time we get to it?

Dynamic Client Lookup
This script uses AJAX to autofill a form. Open the demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.

Chained Select Boxes
This script uses Ajax to popuplate a select box with cities based on which country you choose.

Ajax Dynamic List
This script shows you a list of options based on what you type into a text input. Example: Type in “A” and Ajax will get you a list of all contries starting with “A”.

AJAX Framework and Toolkit Tutorials
My-BIC - Tutorials and How To’s
A collection of easy to follow tutorials using the My-Bic Framework including a, hello world - getting your ajax setup, posting comments via AJAX and changing views from a drop down. There are beginner and intermediate tutorials here.

New Echo2 Tutorial Series
Part 1 of a multipart Echo2 tutorial series, entitled “Ajax with Echo2 and Eclipse” is now available from our web site. The related archive with the Echo2 distribution plus the EchopointNG library is available here.

AJAX Design Patterns - Using The Dojo Toolkit
Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.

Using Dojo and JSON to Build Ajax Applications
In this article, I will show how to build Ajax-enabled applications using Dojo and JSON–two very different but complementary technologies that can significantly enhance the interface and usability of web applications.

AJAX General Tutorials

AJAX from Scratch: Implementing Mutual Exclusion in JavaScript
This AJAX from Scratch series of articles describes fundamental techniques needed to develop AJAX Rich Internet Applications in JavaScript from scratch.

Saving Session Across Page Loads Without Cookies, On The Client Side
This is a mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large amounts of data beyond cookies size limits.

A Tale of Two IFrames or, How To Control Your Browsers History
This is a mini-tutorial on the black art of iframes and browser history, known to AJAX experts but rarely presented clearly.

AjaxWorld Special: What Is AJAX?
Learn more about AJAX and ColdFusion

Simple Ajax Functions - Snippets
I’ve created a list of very common JavaScript functions for Ajax. They have been created in quick reference fashion and do not contain any fancy stuff. Instead of creating one function which can handle various tasks depending on passed values, they are split into seperate basic task functions. The reason for this is simplicity.

AJAX Using ASP.NET 1.1
You’ve heard of it. It is the latest buzz term for web programmers these days. AJAX is an acronym that stands for Asynchronous JavaScript and XML. AJAX gains its popularity by allowing data on a page to be dynamically updated without having to make the browser reload the page. I will describe more about how AJAX works, and then go into some sample code to try out.

Speed up Your AJAX Based Webapps
It sets the expiry of the JavaScript to years and not days. Once the JavaScript file is downloaded it is never downloaded again, ofcourse unless you force it by removing the file in the cache. If you visit the site often the JavaScript will not be removed from the cache.

Kick-start your Java apps, Part 2
This tutorial guides you through the development of a small human-resources application, first using conventional JavaServer Pages (JSP) based technology, and then migrating it to a highly interactive solution using Ajax.

Create Your Own Ajax Effects
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today. The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own.

AJAX Image and Gallery Tutorials
Image crop - DHTML user interface
This script gives you an Image crop/resize DHTML user interface. Drag a rectangle around the area you want to crop. Click the “Crop” button and let Ajax send crop data to the server and the cropped image back to you. PHP uses ImageMagick on the server to crop and convert the image.

Prototype Javascript Lightboxes
This class is based on Prototype 1.5. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file.

AJAX Sortable List Tutorial

Learn to make sortable lists with AJAX -- an excellent tutorial for interface designers.

How to Make Sortable Lists
Many web applications need to offer an interface to order items - think about categories in a weblog, articles in a CMS, wishes in an e-commerce website… The old fashion way of doing it is to offer arrows to move one item up or down in the list. The AJAX way of doing it is to allow direct drag-and-drop ordering with server support.

AJAX RSS Tutorials
Simple Ajax RSS ticker script
This very small and simple script reads RSS data from an external source and shows them inside a predefined box DIV or other tag) on your page. What you have to do is to specify the url to the RSS feed, how many items you want to show, and for how many seconds you want the script to display each item.

Dragable RSS boxes
This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You can also create new boxes dynamically directly from the page. This is the first version of this script. New functionality will be added to this script during the following weeks and months.

Slide In RSS items
This scripts reads RSS feeds from an external source and displays them on your page. Each items appears after a predefined number of seconds by sliding in from the right side.

RSS Ticker with AJAX
Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to display the feed dynamically and with flare. As a pre-requisite then, your site itself must support PHP, though the page using this ticker can be any regular HTML file.

AJAX Shopping Cart Tutorials
Fly to basket (Shopping cart)
This is a DHTML shopping cart module. The products will fly to the shopping basket when you click on the “Add to basket” button. Ajax is used to dynamically update the content of the basket.

Flexstore on Rails Tutorial
Flexstore is a traditional Shopping Cart application that you can write in Ruby on Rails. Very comprehensive and cool.

AJAX Sorting Tutorial
Sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data.

AJAX Trees Tutorials
Update a tree with AJAX
his scripts adds an AJAX extension to my static folder tree. Open the demo and press down your mouse button on one of the nodes in thee tree. This will make a text box appear which makes it possible for you to rename nodes. AJAX is used to send this value to the server without reloading the page.

Static list based folder tree
This is a list based folder tree. What you have to do is to create a UL LI list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes.

AJAX Username Availability Tutorial
AJAX username availability checking
The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not, without having to submit a form and reload the page.

AJAX Voting Tutorial
Digg-like AJAX Vote On
This tutorial will show you how to add AJAX-enhanced interactions to askeet. The objective is to allow a registered user to declare its interest about a question.

Ajax Poller
A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs.

About the Author: Max Kiesler is an award-winning strategic designer and co-founder and principal of Ideacodes.com, a web consultancy in San Francisco focused on next generation websites. This article is is licensed under a Creative Commons Attribution 2.5 License.

This article appears in our “Online Business” department, but also ties in nicely with a recent article on how “Website Goals Increase Online Success” . Here, we look at a step by step formula to increase the business results at your websites.

by Scott Frangos

How would you convert team play into points in hocky if you couldn't see the goal?

There’s an old saying, popularized by author Stephen Covey:  “Begin with the end in mind”.  Quick… ask a web designer, what’s the “end” (goal) for a website design?  A great design.  Next, ask the marketing manager the same question.  New business, is a common reply.  Great.  But what specific goal do you want to reach (or better, your visitors to do) at your website?  And how will you monitor, and make adjustments to improve results?

Answer those questions, and you have a way to focus your redesign team on real business goals, and your online business mission.  Fail to answer them, and it’s like sending your football, soccer, or hockey team out onto a field with no goal posts.   I’m talking R.O.I. people.  If you don’t know what that is, or don’t care about it… then just go throw some money at a designer who’ll make you a good looking website.  If you’re in the group of people who care about getting results — business leads, PR, sales — then read on.

Ask your team if they are studying the expected and actual route through your site to reach those conversion pages — sometimes called the “funnel”.

I’m going to give you a simple way to think through the process of what I call “Conversion Missioning”, and point out two key steps many of your competitors simply don’t use.

Let’s make it simple.  There’s an old 3-step copywriter formula that goes like this (with my notes for our purpose here):

1. Tell them what you have (this is where the “Great Design” usually begins and ends)
2. Tell them what it will do for them (Good copywriters and marketing managers will insist on this… features AND benefits)
3. Tell them what you want them to do — make a conversion (many old-school, “brochure-style” websites fail here)

{smartads}
Make sense?  Good.  This is really what a great Yellow Pages ad does — tell them about your service or product, tell them how it helps them, and ask for the “conversion” — a phone call to you “converts” them from phone book readers to interested prospects.

But there are two more items we can add to this list.  Shsssss.  Most of your competitors aren’t even thinking of these, and they surely weren’t thinking about them when they created their site (remember, “begin with the end in mind.”):

4. Quantify the value of a conversion so you can review R.O.I. (Return On Investment)
5. Track visitor actions and make adjustments to your site so you can improve your conversion rate

The yellow pages can’t help you with these steps — there’s no automatic way to track calls and calculate ROI from a phone page ad.

But a computer can do this for you — that’s the power and beauty of using your website with analytics.  Think carefully about point 4 and 5, and ask yourself if the site map you used to design your site, or your current site map shows the locations on your site where you expect to make key conversions — a contact form to convert leads, a downloadable whitepaper, a newsletter signup.  Why not?   Ask your team if they are studying the expected and actual route through your site to reach those conversion pages — sometimes called the “funnel”.  Why would you not do this?

The most important step: Finally, are you tweaking your site to improve your conversion success rate?  A simple headline or graphic change has been known to boost conversions by dramatic amounts.   C’mon.  This is the mission critical, job one, Lee Iococa jump in your face, primary purpose of your business website… that you should begin with in your mind.  Or, at least address it now.

As you think through this Conversion Mission process for your site, join in the conversation here with questions and comments below.  I will continue this series with more tips on how to work out this process at your site, and in particular focus on Google Analytics, and something called the Google Optimizer as a way to address Conversion Missioning.  And, you may like to go read the first article in the series on using Google Goals.

Subscribe via RSS:

Online Business
Join the Conversation

About the Author: Scott Frangos develops dynamic, automated WebSites at WebFadds.com, based on the WordPress platform. He always recommends a focus on the Conversion Mission of your websites.  He is also a college instructor for CSS, XHTML and Photoshop courses and enjoys martial arts and digital photography.

About WebHelperMagazine: WebHelperMagazine is a digest of tutorials and helpful articles for WebMasters, BlogMasters & Social Marketers.

FROM:  Scott Frangos, Managing Editor for WebHelperMagazine.com

Hello BlogMasters & Social Marketers -

We’re continuing to grow and develop our helpful content and advertising options here at WebHelperMagazine.com (thanks to all of our advertisers).  Our circulation is up too — from over 3000 unique visitors 3 months ago, to close to 4800 per month.  Thanks.  Below is a list of Popular Series we’re featuring (we’ve added a navigation link to the sidebar), and we’d love to hear from you with any comments and suggestions.  Write to editors [at] WebHelperMagazine.com.

Advertising Opportunities: There are three ways to advertise with a 125 x 125 banner — contact us about the top spot (currently just $50 mo.), or order position #2 or #3 direct from Performancing. There’s a current special on them (just $10.50 mo. ea.), and if you’re new to Performancing, you save $25 off your first purchase of $100 on any ads in their network.  And, those of you that are Publishers might like to consider earning money with PerformancingAds.

Popular Series at WebHelperMagazine.com

• AJAX Help:  A lot of you are interested in learning about how you can use AJAX in your Web 2.0 development work, see some visual examples, and find ways to speed up the development process with AJAX toolkits. This series for is for you.  You’ll find some tutorials, and a ton of helpful tools and examples.  And “AJAX” stands for Asynchronous Javascript And XHTML.  Not “clear” yet… it’s time you dig into the series.
• Copywriting Matters:  Quick… why does copywriting matter?  Because in this game of BlogMastering… content is everything. And, there’s a reason that a good college writing degree is composed of several intense courses — there are quite a few useful techniques to learn and develop.  In this series, some pro’s tell you about copywriting methods to help you stand out. Oh… that machine we use for the icon for the series (right) is called a manual typewriter — Dude, there were ways to write before the web and computers.
• Preparing Web Videos: Most of the public is learning that we’re on a fast track for convergence of Web, Cellphones, and Video. The savvy Social Marketer wants to stay on top of it because that’s where the game is going, so we’re continuing a series of articles with overviews and tutorials on how to make it video on your Business Blogs and CMS websites.
• SEO Matters:  I don’t have to ask why SEO matters, do I?  Good.  Now what are the best practices for Search Engine Optimization? There are some well tested techniques and emerging strategies coming at us as fast as Google can change their algorithms, so stay tuned to this series for the help you need to stay up on SEO.
• WordPress CMS Reviews:  I think most will agree that WordPress is now the major open source platform used for modern Business Blogs — and more. Since the design vision for the product has moved way beyond blogs into Content Management Systems in the past year or so, we’re  covering good examples of WordPress as a CMS solution in this series.  Do you know of a particular example — contact me direct at Scott [at] WebHelperMagazine.com

Stay tuned for more series as we develop helpful articles based on your feedback.  Thanks again readers, and advertisers!  Remember to join the conversation.