Home arrow AJAX & Prototype arrow The Best AJAX Tutorials

The Best AJAX Tutorials

We already provided you with some of the top AJAX tutorials in the past, but there are many more that can help you implement the technology into your designs. Here are seven more AJAX tutorials that should be useful for beginners and more experienced users alike.

By: wubayou
Rating: starstarstarstarstar / 0
July 20, 2011

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

24 Best Practices for AJAX Implementations

This tutorial gets listed first because itís a must-read for anyone jumping into AJAX or looking to brush up their skills in the technology.  Thereís a host of background information on AJAX, as well as tips on how to implement it properly in your websites or applications.  You could go straight to the other tutorials and give them a shot, but why not get well-versed in the subject first?  Some of the practices discussed include utilizing proper events and callback functions, using proper animations, using a proper IDE, and more.  Reading through this tutorial and its supplementary links will give you a solid foundation to build on with future AJAX projects.

Link: http://net.tutsplus.com/tutorials/javascript-AJAX/24-best-practices-for-AJAX-implementations/

Building a Sleek AJAX Email Signup Form

An email signup form is a must for any site that wants to keep its visitors informed.  It may not take up a lot of space on your site, but you want your form to at least look good and work properly without any bugs.  This tutorialís main focus is on AJAX, which will allow you to submit data to the server, validate it, and receive a response quickly, without the need for a page refresh.  In addition to the AJAX, the tutorial also includes some PHP and JavaScript to give you a solid all-around lesson across various platforms.  The tutorial is on a beginner to intermediate level and takes around an hour to complete.  Instead of just listing the steps to complete the process, it explains the reasoning behind what you are doing so you actually learn the correct methods that can be applied in the future.

Link: http://net.tutsplus.com/tutorials/javascript-AJAX/building-a-sleek-AJAX-signup-form/

Creating an AJAX Web App Using the Bit.ly API

URL shortening services seem to have a strong presence on the web as of late.  They help to create clean and concise URLs out of ones that are excessively long.  This is a great help on sites like Twitter, where less is more.  One of the most popular URL shortening services is Bit.ly, and this tutorial shows you how to create your own AJAX web app via a combination of the bit.ly API, or application programming interface, and the jQuery library.

The tutorial begins with a brief explanation of what APIs are prior to jumping into action.  The process keeps users that have JavaScript disabled in mind, so you wonít run into any problems with the finished product.  An added perk of the tutorial comes near the end, where you learn how to add thumbnail previews of the shortened links.  This is a great addition that will help users get a taste of what theyíre clicking on, just in case they are skeptical.

Link: http://blog.themeforest.net/tutorials/creating-an-AJAX-web-app-using-the-bitly-api/

AJAX User Poll Using jQuery and PHP

Polls are a nice little method to generating user interaction on your site.  You can use a poll to get feedback on a current event or product, or you can even use one to get feedback from visitors on how to improve your site itself.  This tutorial will show you how to create a user poll script that employs jQuery, PHP, and AJAX.  You begin by setting up the database structure which will store the various poll questions, options, and votes.  Next is the PHP code and instructions on how to process votes and display results.  The HTML structure and JavaScript code round out the tutorial.  In the end, youíll have a simple poll that you can add to your website to help get your visitors more involved.

Link: http://webdeveloperplus.com/php/AJAX-user-poll-using-jquery-and-php/

A Twitter List Powered Fan Page

Itís impossible to deny the power of Twitter, as the social network has spread through the web like wildfire.  Twitter lists allow users to create a concise list of the siteís members so that others can begin to follow them in one quick swoop.  This feature provides some nice functionality, as you can create lists and put them as a sidebar on your profile for others to join.  All they need to do is enter their Twitter username.

The tutorial shows you how to create your own Twitter list using XHTML, CSS, jQuery, AJAX, and PHP.  As you read through, you will notice that the author mentions changes to Twitterís APIs that nullify some of the steps.  To get the final result, however, just scroll down to the comment section, as one of the siteís visitors added an updated solution to make it work.

Link: http://tutorialzine.com/2009/11/twitter-list-AJAX-fanpage/

AJAX-enabled Sticky Notes with PHP and jQuery

If you are tired of having Post-it notes plastered all over your desk, why not create some of your own, but in a virtual manner?  This tutorial will show you just how to do so.  The end result is a sticky note management system that is AJAX-enabled.  A couple of perks with the note system include the ability to create notes with a real-time live preview, as well as the ability to move the notes around the screen to keep things organized.  Another nice touch is the choice of three different colors for the notes.  All movements are sent to the back-end through AJAX.  The movements/positions are also saved in the database. 

The tutorial is rather simple and does not take a lot of time to complete.  Some CSS is thrown in towards the end to add styling to the notes with the text-shadow property, among others.  It may not be the most complex tutorial around, but it can add a little dynamic functionality to your site that can be fun to play around with.

Link: http://tutorialzine.com/2010/01/sticky-notes-AJAX-php-jquery/

How to AJAXify WordPress Comment Posting

Comments are another way to get visitors interacting on your site.  If youíre successful in starting conversations in your comments section, your visitors are more likely to return to your site in the future.  WordPress is one platform thatís quite popular with bloggers.  This tutorial will teach you how to employ AJAX comments with client side JavaScript comment form validation on your WordPress site by modifying the platformís theme files.

The tutorial is concise and easy to follow.  If you arenít in the mood for going through the entire process to add AJAX comments to your site, the author created the WDP AJAX Comments plugin which automates the process for you.  The plugin should come in handy if you modify your blogís theme on a frequent basis.

Link: http://webdeveloperplus.com/wordpress/how-to-AJAXify-wordpress-comment-posting/


 
 
>>> More AJAX & Prototype Articles          >>> More By wubayou
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: