Huge Collection Of Ajax Tutorials And Techniques

Huge Collection Of Ajax Tutorials And Techniques

The thing that was missing from the resources category on the site was this article, a collection of Ajax techniques, tips and tutorials. I hope this article will help the developers to learn or find some of the interesting features found here.

Ajax (shorthand for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

Ajax Fancy Captcha

Ajax Fancy Captcha
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize (take a look at file structure for more information).

Ajax RSS reader

Ajax RSS reader
Learn how to build an Asynchronous JavaScript and XML (Ajax) Really Simple Syndication (RSS) reader, as well as a Web component that you can place on any Web site to look at the articles in the RSS feeds.

Ajax Powered, Editable DHTML JavaScript DataGrid with Rich Script API
Ajax Powered, Editable DHTML JavaScript DataGrid
dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. Our datagrid component is easy-to-use, and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources, including XML, JSON, CSV, JS array, and HTML table. If needed, the grid data can be also loaded from custom XML format.

dhtmlxGrid allows easy implementation of nice looking (managed through css or predefined skins) DHTML tables with rich in-cell editing, fixed multiline headers/footers, resizable, sortable, and draggable columns, built-in filtering, searching, grouping and data validation capabilities. Numerous event handlers let you add necessary interactivity to grid-based interfaces. Smart Rendering technology and built-in paging support allow this datagrid component to work effectively with huge datasets. Even better performance is reached due to non-liner buffering used in paging functionality (since v1.6).

How To Build a Widget to Display your Buzzing

How To Build a Widget to Display your Buzzing
A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I’ll guide you through the process of building your own Buzz widget.

AJAX Desktop Tutorial Overview

The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.

How to Create an Infinite Scrolling Web Gallery

How to Create an Infinite Scrolling Web Gallery
When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX.

Ajax and XML: Ajax for chat

Learn to build a chat system into your Web application with Asynchronous JavaScript™ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.

Create a Twitter-Like Load More Widget

Create a Twitter-Like Load More Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

Create your own information space with Ajax and del.icio.us

This tutorial shows you how to use Ajax and a PHP proxy script to access del.icio.us Web APIs, all from a single “super page” that can be simulated as the home page to your Harry Potter book club. You’ll make this page publicly available on the Internet so that your book club can gain traction and attract new members (as an aside, you may want to make it registration-based so that you have control over who adds links to your club). The del.icio.us APIs make this possible by allowing developers to create custom applications that allow users (such as yourself and the members of your book club) to manage tags and bookmarks directly in the club’s del.icio.us account from the main club’s page, without having to stray off to del.icio.us first, or click on a button in the browser.

Cross Domain AJAX Request with YQL and jQuery

For security reasons, we cannot make cross-domain AJAX requests with jQuery. For example, I can’t call the load() method, and pass in ‘cnn.com’. As we’d be loading in scripts and such, as well as our desired content, this would present a significant security risk. Nonetheless, there may be times when this is specifically what you require. Thanks to YQL, we can allow for this functionality rather easily!

Easy AJAX inline text edit 2.0

A small piece of javascript reads al SPAN tags, checks if it has class=“editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

Ultra-lightweight Charts For AJAX

Ultra-lightweight Charts For AJAX
applications, here’s a really simple example how you can use Flash and AJAX together seamlessly within your applications. Yes, i said Flash, not Flex. In this example I created an ultra-lightweight ActionScript-only charting project that can be used within AJAX applications.

Voting system with jQuery, Ajax and PHP

Voting system with jQuery, Ajax and PHP

Quick Calendar Using AJAX and PHP

Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using WordPress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work

How To Create Your First AJAX and PHP Contact Form

How To Create Your First AJAX and PHP Contact Form
You’ve been to websites that use them, a nice little AJAX contact form. AJAX is a great way to submit data without a page refresh and is a great tool for certain elements of a website, such as a contact form. So how do we go about doing so? Today, we will take it step by step and build your first AJAX and PHP contact form. We’ll be using jQuery and the popular email validation code found on google code (originally by AddedBytes) to help us out.

How to integrate Google Calendar in your website using AJAX

How to integrate Google Calendar in your website using AJAX
One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website. For example a community that use the service to manage their events, or to display your future trips in your blog ?

Preloading Data with Ajax and JSON

Preloading Data with Ajax and JSON
Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed fancy-pants technology. In an effort to help you take it up a notch, we’d like to share a method for helping your site anticipate a user’s next move.

On most sites, there are usually only a handful of options that can be done at any given moment and often some of these options are more likely than others. By determining what is important on each page, we can preload the data of the user’s next action and store it on the client with JSON. When the user decides to perform their next action, they’ll see their results almost instantly because the info was loaded in the background.

Ajax IM

Ajax IM
Ajax IM (“Ajax Instant Messenger”) is a browser-centric instant messaging framework. It uses AJAX to create a real-time (or near real-time) IM environment that can be used in conjunction with existing community and commercial software, or simply as a stand-alone product.

Edit In Place with AJAX Using jQuery Javascript Library

I originally saw a version of this concept on Quirksmode and then a more Web 2.0-ish version on the 24 Ways site. I’m going to show you two ways that you could use jQuery to accomplish the same effect, or better.

Building a 5 Star Rating System with jQuery, AJAX and PHP

Building a 5 Star Rating System with jQuery, AJAX and PHP
In this tutorial, you’ll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we’ll also leverage the power of PHP so that you don’t even need a database!

Ajax Pagination script v1.2.2

This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth.

Ajax Tabs Content Script (v 2.2)

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. We got our inspiration for this script from Yahoo’s homepage, which employs such a concept to show news in an organized fashion.

Learn how to AJAXify Comment Forms

Learn how to AJAXify Comment Forms
In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.

AJAX file upload tutorial

First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.

Creating a Dynamic Poll with jQuery and PHP

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

ConvincingMail AutoComplete

ConvincingMail AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup list to display items that returend by the webservice for the prefix typed into the textbox.

A Twitter List Powered Fan Page

A Twitter List Powered Fan Page
Recently, Twitter rolled out a great new feature on their site – lists. You can now create and compile a list of twitter users and make it easier for others to follow all at once.

Also, at the same time, they expanded their API to include list management functionality. This allows us to use these new tools to create a widget that flips lists the other way around – a fan page you can put in your sidebar, that allows your visitors to fill in their twitter name and join a specially crafted fan list in your twitter account.

jQuery File Tree

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Safer Contact Forms Without CAPTCHAs

When it comes to spam, hardly anything’s worse than an insecure contact form. Imagine getting a nasty note from your web hosting company that your site has been used to send out massive amounts of email about black market erection medication and, oh by the way, your site is offline until you get it fixed – thank you very much.

So what I’m going to show you today is a simple method for adding an extra layer of security to ANY contact form on your site – even if you don’t use my super secure and wonderfully flexible Ultimate Form Mail.

AjaxControlToolkit TabContainer Themes

AjaxControlToolkit TabContainer Themes
After working on a YUI TabView theme for the AjaxControlToolkit’s TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web. I was especially curious in seeing what it would take to include images in each of the tab panel header’s.

Using AJAX with CAPTCHA

This article shows one way to use AJAX along with a series of images to create a secure CAPTCHA system. CAPTCHA is a way to tell humans and computers apart and is used all over the web, especially if you’re signing up for new email accounts.

Validate a username using Javascript and PHP ( AJAX )

Who doesn’t hate these long forms ? You fill each field in them and when you submit, it will return something like : ‘ SORRY BUT YOUR USERNAME IS ALREADY TAKEN ‘.
In this tutorial I m gonna show you how to check if a username is valid without leaving the page using ajax (Asynchronous Javascript And XML).

Nice Ajax effect for message box using Mootools

Nice Ajax effect for message box using Mootools

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more

Auto-populating Select Boxes using jQuery & AJAX

If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery can hugely simplify this task by adding a dash of AJAX.

Build an Ajax Dropdown Menu

In our example, we’ll use a pair of dropdown menu boxes (SELECT tags in HTML). A selection in the first box affects our list of choices in the second box. It’s not exactly cutting edge (Thau did something similar using JavaScript), but it’s a proof of concept.

Ajax/PHP Shoutbox Tutorial

This is a tutorial on how to make an Ajax powered shoutbox. As because it is an Ajax powered, there are no iframe involve and the update of the shoutbox content is almost instant.

Ajax.InPlaceEditor

The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options.
The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

jsProgressBarHandler

jsProgressBarHandler
jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

How to Load In and Animate Content with jQuery

In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

Avoid unnecessary Ajax traffic with session state

Where possible, creating Web applications — including Ajax-based applications — in a RESTful way avoids a large class of bugs. However, a pitfall of REST (REpresentational State Transfer) is sending duplicate data across similar XMLHttpRequests. This tip shows how the moderate use of session cookies can maintain just enough server-side state to significantly reduce client-server traffic, while still allowing fallback to cookie-free operation.

A Better Ajax Back Button Solution

If you’ve spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I’ve been using in my applications for the last year or so.

The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.

24 Best Practices for AJAX Implementations

24 Best Practices for AJAX Implementations
Implementing AJAX technology can be a hit or miss thing. Do it well and you’ll have users raving over the slickness it provides to the general user experience while if you mess it up, you’ll be at the receiving end of their wrath. Here are 24 tips to guide you with implementing AJAX technology within your web application.

Vista-like Ajax Calendar version 2

vista-like Ajax Calendar version 2
The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

Nice Titles revised

You may have noticed I’m using Stuart Langridge’s Nice Title script on this site. With the help of Ethan I’ve made a couple of modifications to the original version, so I thought I’d highlight them here and let you grab a copy if you wanted.

Phototype: image manipulation with Javascript

Phototype: image manipulation with Javascript
Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let’s start a quick tour.

Prototype window

Prototype window
This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by 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, but it’s not mandatory.
It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.

GreyBox

GreyBox
A pop-up window that doesn’t suck.

Max’s AJAX file uploader

Max's AJAX file uploader
Max’s AJAX file uploader is a simple and easy to use script, which allows you to upload files to your webserver without reloading the current page. During the upload an animated progress bar is shown. The server side is written in PHP.

I believe you’ll find interesting and useful these articles too:

 
 
 
 
 

Sponsors