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.
This script uses Ajax (DHTML interacting with the server) to let you
dynamically include the contents of an external page onto the current
document.
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.
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
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).
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
This is a basic example showing you how to use AJAX. In this
This is a list based folder tree. What you have to do is to create a <UL><LI> list. The
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.
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.
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
chatbox, tagboard or mini chat
File Uploaders
Use AJAX and jQuery to add dynamic file upload to your site.
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
This is
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
A list of very good looking and flexible dialog boxes.
GoogieSpell is a spell checker that you can use in your own web-application.
Create an AJAX powered poll. Requires PHP and mySQL.
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.
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.
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.