Nov
12

Excellent Ajax Examples

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5 out of 5)
Loading ... Loading ...

If you’re interested in expanding your understanding of Ajax techniques and practices, check out these Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before.

  • Prototype Window

    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.

    Demo | Download

  • AJAX Star Rating Bar

    This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.Note that this script isn’t tied to any specific system (such as WordPress)

    Demo | Download

  • Ajax Contact Form

    It’s a bit over the top… well… for a contact form that is. But yesterday morning I decided that I wanted to have a little fun so I put together an unobtrusive AJAX contact form (works even with JavaScript disabled)

    Demo | Download

  • Heatmap for your website

    ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.on the browser’s client: Javascript (tested on Firefox 2.0, I E 6 and 7, )
    click on Demo link :-
    (login/password: demo/demo)

    Demo | Download

  • Gray Box

    GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox???
    * It does not conflict with pop-up blockers
    * It’s only 22 KB!
    * It’s super easy to setup

    Demo | Download

  • Digg - like spy script

    Following many requests, I have upgraded the jQuery spy code to support multiple items returned from the AJAX response and custom timestamp functions - so that requests can be completely tailored.

    Demo | Download

  • Bubble Tooltips

    Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute.Installation & Customization of Bubble Tooltips is quite easy.

    Demo | Download

  • Reflection.js

    Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome.

    Demo | Download

  • Edit-in-Place with Ajax

    As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button. But all of this has been made easy to use and implement: 2.0!

    Demo | Download

  • Ajax Tabs Content script

    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. Fetch and display an external page inside a container when a tab is clicked on.

    Demo | Download

  • Dragable RSS boxes script

    The layout of my demo page and the dragable boxes is specified in the css/dragable-boxes.css file. I have put in some comments which will help you understand it. All the boxes are created as sub elements of a div with id.

    Demo | Download

  • AJAX poller script

    A poller script that uses Ajax to send vote to the server & receives results from the server. This script requires that you have PHP installed on your server and access to a mySql database. This is a step by step guide on how to configure this script

    Demo | Download

  • Dragable content script

    In this script you can drag nodes to a set of boxes. You make elements draggable by assigning them to the class “dragableElement”. You can configure the script to remember the position of the dragable elements in a cookie.

    Demo | Download

  • Lightbox/Modal window

    The Lightbox Effect without Lightbox. When I first started trying to figure out how to do this, I wasted a lot of time trying to hack the Lightbox code and it was ugly. I thought better of using code I wasn’t proud of, so here’s how I did it:

    Demo | Download

  • Fisheye List Widget

    The Dojo Toolkit is an open-source JavaScript toolkit for building great web applications. It shortens the time between idea and implementation by providing a well conceived API and set of tools for assisting and fixing the issues…

    Demo | Download

  • Google X Pulled

    Today is an amazing day: A small idea - a fun late-night coding jaunt to help me learn Javascript & DHTML - has just launched on Google Labs. I never expected it to make it as far as it has when I wrote it a month ago…

    Demo | Download

  • Create Pie Charts

    Pie & Donut (doughnut) is a very universal and fully configurable Flash chart. Using it, you can easily have good-looking, animated pies or donuts on your website. You can also use it for creating elaborate navigation menus. Key features:

    Demo | Download

  • Ajax subscription box

    Mailist is a PHP based subscription mailing list. A stylish interface, twinned with ajax, provides seamless additions with no page reloads. Mailist has customisable email headers and footers, outbox. Demo Password: Demo.

    Demo | Download

  • Googlemap with geocode

    SOLMETRA Maps is a PHP class meant to simplify display of Google Maps on your site.SOLMETRA Maps uses third party geocode webservice. Easy to set up and use. Geocode support. Autopan and autozoom to a point on a map.

    Demo | Download

  • Glider

    This script uses the Prototype javascript framework and the effects.js library from Scriptaculous. You must include Prototype version 1.5+ in your pages before including this script. This library is known to work in recent versions of IE 6/7,FF,saf

    Demo | Download

  • Browser-based IM

    ajax im (”asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in intranet, and social sites. u.name: test   psw : test

    Demo | Download

  • Ajax Domain Search script

    Ajax Domain Search Script is an open source domain name search script designed to be compact and display instant domain search results by using Ajax. It wrote in PHP language with simple, clean and easy to understand.

    Demo | Download

  • Amberjack site tours

    Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours.
    By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

    Demo | Download

  • Ajax login form

    This sample will show you how to create an ajax based login function using PHP and Jquery, this is just a simple example of Jquery implementation, before we continue it is better for you to learn a bit about jquery uname: admin psw: 123456

    Demo | Download

  • Easy Ajax with ASK

    The purpose of ASK is to offer you a simple way to get content into your page on-the-fly through asynchronous JavaScript and XmlHttpRequest, without sacrificing accessibility or usability.
    browser: IE 5+, FF 1.0+, Safari 1.2+

    Demo | Download

  • Slideshow Alternative

    First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…

    Demo | Download

  • Roll your own Slideshow

    The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, The interface to the slideshow is simple

    Demo | Download

  • Carousel Component

    First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…

    Demo | Download

  • Ajax message box

    My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.

    Demo | Download

  • Unobtrusive table sort

    My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the “Unobtrusive Table Sort Script”, that addresses speed issues present

    Demo | Download

  • AutoCompleter

    The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys

    Demo | Download

  • ModalBox

    ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.

    Demo | Download

  • Magnetic AJAX

    This is just like the magnetic word kits you’ve seen before except this is on the internet! It saves state when you release a piece.
    It updates itself every 7 seconds, so if you’re on it at the same time as someone else is and they move .

    Demo | Download

  • Transparent message

    Transparent message is a new way to display information on a web page.

    Instead of using the ugly alert() javascript function, it shows the message in a overlay layer of your HTML page.
    It includes a Ruby On Rails helper …

    Demo | Download

  • ThickBox

    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

    Demo | Download

  • Suckerfish HoverLightbox

    From time to time I come across some truly impressive techniques that are a great blend of CSS, XHTML, and sometimes JavaScript. Personally, I am not a big fan of implementing JavaScript, but it is sometimes unavoidable.

    Demo | Download

  • Ajax Animate Content

    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.

    Demo | Download

  • Web Based Diagram

    Welcome to Smoot and thanks for giving it a shot. Briefly, Smoot is a Web-based tool for creating diagrams of icons and links between them. Features include Google Maps and Google Earth integration, configurable tool palettes.

    Demo | Download

  • jQuery Portlets

    A bit of a friendly challenge was put to me by Chris Heilmann, a London based Yahoo developer and JavaScript guru / author. So, I have updated this little demo with improved expand / collapse toggle behavior.

    Demo | Download

  • Highslide JS

    Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features & advantages:

    Demo | Download

  • Timeline

    The Timeline project has graduated and moved on with its life. Visit the new home page for more information on how to join the new mailing lists, synch with the new code repositories, issue tracking, etc. Please excuse …

    Demo | Download

  • GoogieSpell

    GoogieSpell is a spell checker that you can use in your own web-application. Support for around 27 languages.Well tested and works on IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera etc. Generic, extendable and easy to install

    Demo | Download

  • AJAX file upload

    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.

    Demo | Download

  • Ajax Events

    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

    Demo | Download

  • jQuery Tool Tip

    Hot on the heels of ThickBox comes jTip, a jQuery tool tip solution. Of course, a tool tip type solution is anything but monumental; you don’t have to tell me that. Regardless, given my keen liking for the great jQuery library…

    Demo | Download

  • Phoogle Maps

    Phoogle Maps (pronounced like Foogle Maps) is a PHP class that integrates itself with the Google Maps API and with the Google Geocoding API to make an easy to use interface to display Google Maps on your site.

    Demo | Download

  • Smooth Gallery

    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…

    Demo | Download

  • Plotr - Javascript graphics

    Some time ago I was looking for a charting framework for Prototype and I couldn’t find it, just because there’s none. So that’s where it all started. I came across PlotKit, a well written piece of javascript that enables developers…

    Demo | Download

  • Tablekit

    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. All the documentation can be found with demo.

    Demo | Download

  • Cross Fading Slideshow

    To set it up all you need is an HTML block element. All immediate descendants become slides. To start the effect you simply have to give the parent element a class of ‘crossfade’. If FastInit is present it’ll use that to start it automatically…..

    Demo | Download

  • FrogJS Javascript Gallery

    FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed.

    Demo | Download

  • Advanced RSS Ticker

    RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from CNN. Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site.

    Demo | Download

  • Humanized Messages

    Humane Messages is a system for displaying and temporarily logging non-modal messages, for use in web applications. It’s simply a large and translucent message that’s displayed over the contents of your screen.

    Demo | Download

  • NoFunc - Sexy Box

    This will create a basic “lightbox” or “thickbox” interface using AJAX Requests and HTML masking. We’re working on making this site more compatible, most of the code should now be working in IE 5.5, Opera, Safari, and Firefox.

    Demo | Download

  • DHTML Color Picker

    Originally was developed for ColorJack: Studio. We’re working on making this site more compatible, most of the code should now be working in IE 5.5, Opera, Safari, and Firefox.
    another color picker?  Color Picker v2

    Demo | Download

  • Flexigrid

    This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.Connect to an ajax data source (XML and JSON[new])

    Demo | Download

  • Chart Plotting

    PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started.

    Demo | Download

  • 35mm Photo Viewer

    This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.Connect to an ajax data source (XML and JSON[new])

    Demo | Download

  • Javascript Calendar

    The javascript calendar available here is a free, lightweight widget which shows a calendar for use in picking dates on form fields.Lightweight, only 6kb in size! - Pure DHTML. No slow, external pages being loaded in iframes.

    Demo | Download

  • Carousel

    includes.Static and Ajax content, Prototype Carousel is not anymore supported BUT a new version is available with Prototype UI library .Carousel are great to display a large set of data like images. The current version

    Demo | Download

  • Javascript Zoom Effect

    loupe.js 1.3 allows you to add a loupe (magnifier) to images on your webpages. It uses unobtrusive javascript to keep your code clean. It uses unobtrusive javascript to keep your code clean. Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.

    Demo | Download

  • TJPzoom

    As you may have realized, this is an image magnifier. It’s a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :). If you move your mouse over the picture, you can see a little zoom window with a magnified…

    Demo | Download

Some Useful link for AJAX

W3schools Ajax Tutorial
Loading gif generator
Ajaxian
Ajax Rain
Ajax
Ajax.NET Professional Example
BesTuts - The best tutorials
DHTMLSite - AJAX Scripts
Learn Ajax in 20 minutes
Ajax at ASP.Net
Open Source Ajax/JavaScript
Ajaxlines
Best ajax scripts
Ajaxtalk.com


2 Responses
  • Alexwebmaster Mar 3 2009 @ 9:31 am

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  • Tim McMorris Mar 6 2009 @ 5:22 pm

    Awesome set of tools and scripts you’ve collected!! I’ve been trying to figure some of this stuff out for a while now. Keep up the good work!

  • Leave a Reply

    Tag Cloud

    Categories

    Archives