In this article tripwire magazine present a list of more than 70 useful AJAX-based techniques and tools you should always be aware of when developing Ajax-based web-applications. The article gives you instant access to Ajax menus, calendars, interactive elements, animation, basic javascripts, visual effects, auto-completion, instant field editing that you browse quickly without looking through endless search results or bookmarks.
Asynchronous JavaScript and XML or Ajax is not a technology or a programming language as some may think. Ajax is a combination of well known and proven web technologies that used togehter in the right way can improve the responsiveness and user experience of web applications significantly. With Ajax every user action that normally would generate an HTTP request for a new page on the server takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. Further when information is needed the Ajax engine requests only the information needed saving the load time of a full web page.
Ajax incorporates:
- Presentation using XHTML and CSS;
- Dynamic display and interaction using the Document Object Model;
- Data interchange and manipulation using XML and XSLT;
- Asynchronous data retrieval using XMLHttpRequest;
- JavaScript binding everything together.
Since Ajax came out we have seen that web-developers can create amazing web-applications with it. Web-applications like Netvibes, GMail and many others a level of interactivity and responsiveness that we never thought possible. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications.
Section 1: What is a Joomla Template and how to use it
Section 1: Ajax Pop-up Windows
Section 2: On Screen Editng
Section 3: Dynamic Content
Section 4: Ajax Menus
Section 5: Ajax Auto Completers
Section 6: Chat and Shouting
Section 7: Grids
Section 8: Ajax Calendars
Section 9: Dialog Boxes
Section 10: Ajax Spell Checkers
Section 11: Ajax Polls
Section 12: Activity Indicators
Ajax Pop-up Windows
LightWindow is similiar to the other “lightbox style” scripts. It allows you to put more or less ANYTHING in the pop-up window. Quite powerful.
GreyBox can be used to display websites, images and other content in a beautiful way.
- It does not conflict with pop-up blockers
- It’s only 22 KB!
- It’s super easy to setup
- It’s super easy to use
- You can easily alter the style as it is controlled through CSS
An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.
Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website
On Screen Editng
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.
- Show user the data field normally (for instance: the title of a picture)
- When mouse rolls over that title, make the background of the word yellow
- If the user clicks on the word, change that word to a input box with the word in it. Also show a “save” and “cancel” button
- A user can rename the picture and then push “save.”
- Run a little script that updates the name into the database
- Remove the input box and the buttons and return to the original title display (updated with new title).
Dynamic Content
A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files.
Very good looking image slider. It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.
RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from popular news sites. With this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion!
Pausing RSS scroller is an innovative scroller that combines PHP and external JavaScript to let you show any RSS feed on your site- and beyond! By bypassing Ajax in favour of dynamically loaded JavaScript, the scroller can be included on any site, enabling you to syndicate your feed for other sites to display, just by allowing webmasters to cut and paste the frontend portion of this script.
This is an Ajax enhanced ticker script that lets you use a text file as the contents of the ticker to show! Easily define your messages, which support rich HTML, all inside this external text file. Now there’s no more excuse to not update the contents of your ticker more often! Note that due to Ajax limitations, the ticker script and text file to draw from need to be on the same domain/server.
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.
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>.
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.
Create very flexible and useful draggable content boxes.
Want to dynamically include the contents of another page onto the current without resorting to server side means (ie: server side includes)? This script uses the IFRAME tag, and by automatically resizing it based on the actual height of the containing page, allows you to seamlessly display external content on your page. In other words, the iframe is automatically resized to be only as tall as the external page’s height.
Looking for a “contractible” way to display content on your page that’s easy to implement as well? The Combo-box Viewer script allows users to selectively view HTML content on your page via the SELECT menu.
Are you fed up with that lame old directory manager your hosting company provided you with for you website or blog? If you are already familiar with windows or mac file browsers, why should you have to change the way you work for the web? Try Relay for a change.
Nice script to check if a set of links are valied.
Ajax Navigation, Menus, Tabs
MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
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.
Does your page contain lengthy chunks of text, a series of images, or long forms that dissuade people from reading them top to bottom? This script lets you transform long content on your page into a series of virtual pages, browseable via pagination links.
One of the most versatile scripts of its kind, we created this one to compact arbitrary content on your page so they’re expandable on demand. This allows you to save space within your webpage and even add to the aesthetics of the webpage’s design in many cases.
Switch Content Script II is a flexible script that adds contact/expand functionality to arbitrary block content on a page using a simple “icon” to toggle its state.
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
Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers. Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the “title”, or “title” plus “description” etc) to display. All this is done on the client side via the script’s exposed methods.
This script loads content from the server and inserts it into an empty HTML element(example a DIV tag) on your page. New pages can be appended dynamically and the script will scroll down to the content of the new pages.
script handle both vertical and horizontal accordions, really nice!
Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session.
Ajax Auto Completers
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.
Ajax.Autocompleter allows for server-powered autocompleting text fields. [demo]
Very flexible and professionally looking auto complete Ajax script
his AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
From Tools
Here’s a form validation script that is very powerful and easy to use.
High quality javascript form validation tool with good documentation and many demos
wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms.
What we have done is created one ‘master’ form, and applied access restrictions to certain elements by ‘tagging’ them with css classes. We then used server side jQuery to manipulate the DOM and disable or completely remove unwanted elements. The DOM that the client receives, contains only the information that’s relevant to them.
A nice ajax login form using 3 javascript files, 2 php files and 1 stylesheet.
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.
This script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it. Very cool
Chat and shouting
chatbox, tagboard or mini chat
File Uploaders
Use AJAX and jQuery to add dynamic file upload to your site.
Grids
TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.
Sortable Ajax Tables
MochiKit to do sortable tables from data given by the server in either JSON or XML format.
Really nice table sort script with good documentation
Ajax Calendars
This is
a nice DHTML week planner. It used Ajax to get events/appointments from the
server. This
script makes it easy for you to move, resize and edit events without having to reload the page.
An Ajax enabled online calendar. Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page, all with an iCal style interface.
This is a cross browser Javascript calendar
Dialog boxes
A list of very good looking and flexible dialog boxes.
Ajax Spell Checkers
GoogieSpell is a spell checker that you can use in your own web-application.
Ajax Polls
Create an AJAX powered poll. Requires PHP and mySQL.
Activity indicators
The Ajax activity indicators 
are often used by web developers to let the users know when the Ajax application is loading.
This is not a script but it’s a quiuseful Create easily your own ajax loader icon easily with 3 simple steps.
A collection of reallly good looking statusindicators , free download.
Large collection of activity indicators to dhow your users that something is happening.
again loads of really good looking indicators that you can use for free.
Ajax Libraries
AJS is a ultra lightweight JavaScript library that is around 2 years old. It is inspired by MochiKit, but differs by being small and expressive. The current version is only 33 KB (uncompressed!), whereas MochiKit and other libraries such as JQuery, Mootools or Prototype is over/around 100 KB.
Regardless of what you do using Ajax, they all rely on the same basic functions. This is a very small Ajax routine (less than 3 Kb) that enables you to easily use Ajax on your site to send “GET” or “POST” requests asynchronously.
This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document.
Ajax Includes scriptto let you input a list of external pages for the script to choose and selectively include one onto the current page.
- Daily 1 (“dailyw”): The script will include a different file for each day of the week (Monday, Tuesday, etc).
- Daily 2 (“dailym”): The script will include a different file for each day of the month (1st to 31st).
- Random (“random”): The script will randomly pick one from the list of files to include.
—
source: http://www.tripwiremagazine.com/2009/01/70-ajax-techniques-you-just-cant-affort-to-miss.html#Ajax Menus