Luyenkim.

Net

Top 126 Ajax Tutorials

23/10/2007

These are 126 external links to ajax tutorials from other sites. Helpful tutorials to learn Ajax. Getting Started

- An Ajax Hello World project to Get You Going : First program at Mike On Code
- Rasmus 30 second AJAX Tutorial : first program using Ajax at CoderLab
- Instant Tutorial : Quick tutorial at AleemBawany
- Ajax Toybox : Simple first programs including, Hello, World, Dynamic City, State Lookup, Ajax to Clean Your Clock,
Ajax Calculator and an RSS News Ticker.
- A simple Ajax example : a simple program demo for Ajax at MD Groves
- Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples : Ajax examples including Error Handing, Time Out,
Simultaneous Requests, Activity Monitoring, Form Submittal, Event Handlers, Queued Requests, Request Parameters
- An Introduction to Ajax : introduction to Ajax at Prokata
- Implementing simple Ajax interaction in your Web Application using XMLHttpRequest object : Intro + explanatory
diagram at JavaReference
- Nitty Gritty Ajax : Intro and Tutorial at WebMonkey
- A List Apart: Articles: Getting Started with Ajax : An excellent intro ; Chapter 27 of Web Design in a Nutshell at A List
Apart
- Ajax Beginners Tutorial : Intro at AjaxProjects
- Guide to Using XMLHttpRequest : Using XMLHttpRequest with PHP and MySQL at WebPasties
- Ajax : Tutorial at YourHTMLSource
- Javascript Remote Scripting with PHP : Tutorial at SimpleTutorials
- How To: Learn AJAX in 20 minutes : Intro at Sematopia
- Take Command with Ajax : Intro tutorial; at SitePoint
- Ajax Tutorial : Ajax tutorial at W3Schools.com
- Ajax Tutorial : at Tizag.com
- Ajax Hello World : at Jot.com
- Fundations of Ajax (PDF : by Ryan Asleson
- All Request, All The Time : XMLHttpRequest explanation at WebMonkey
- Very Dynamic Web Interfaces via Ajax : at XML.com
- A Simpler Ajax Path : at OnLamp
- Alternate Ajax Techniques, Part 1 : Detailed intro at WebReference
- Ajax:Getting Started : Long intro at Mozilla Developer Center
- Dynamical HTML and XML: The XMLHttpRequest Object : at Apple.com
- Mastering Ajax Part 1 : Introduction to Ajax : at IBM
- Mastering Ajax Part 2 : Make asynchronous requests with JavaScript and Ajax : at IBM
- Mastering Ajax Part 3 : Advanced requests and responses in Ajax : at IBM
- Mastering Ajax Part 4: Exploiting DOM for Web response : at IBM
- How to Develop Web Applications with Ajax, Pt. 1 : App Development Series at WebReference
- How to Develop Web Applications with Ajax: Pt. 2 : App Development Series at WebReference
- Developing Web Applications with Ajax, Pt. 3 : App Development Series at WebReference
- Ajax Workshop 1: Ajax basics & building a simple email verification with prototype.js. : at AjaxLessons
- Ajax Workshop 2: Building Tabbed Content : at AjaxLessons
- Ajax Workshop 3: Shopping Cart using Script.aculo.us : at AjaxLessons
- Ajax Workshop 4: Live Data with JSON & Prototype.js : at AjaxLessons
- AJAX Was Here - Part 1: Client Side Framework : at CodeProject
- AJAX Was Here - Part 2: ASP.NET Integration : at CodeProject
- AJAX WAS Here - Part 3 : Auto Complete TextBox : at CodeProject
- Step by Step to AJAX : at DevArticles
- The AJAX Revolution. Join in. : Five-part detailed tutorial ; at telerik.com
- Very Dynamic Web Interfaces : at XML.com
- Ajax from Scratch: Implementing Mutual Exclusion in JavaScript : Basic tutorial at Developer
- AdvancedAJAX 1.1 : at Anakin Bookmarklets
- Creating Huge Bookmarklets : Create bookmarklets; bypass various bytes/characters/size restrictions. Chat
- Ajax Chat Sources Code for Download : chat using PHP and MySQL
- Building an AJAX-Based Chat: The Barebones Structure : at DevArticles
- Lace - Ajax Chat : free web chat application ;demo; download.
- Most Simple Ajax Chat Ever : at LinuxUser.at Drag and Drop
- Drag & Drop Sortable Lists with JavaScript and CSS : sorting for lists and sorting in two dimensions
- Easy Ajax in symfony : creates a drg-and-drop shopping cart; with demo
- Building a Drag-and-Drop Shopping Cart with Ajax : at Sys-Con Brasil
- Scriptaculous Lists with PHP : drag-and-drop at GregPhoto
http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

- Fun with Drag and Drop with RICO : drag-and-drop with RICO demo
- Rico Drag n’Drop p2: Rico.Draggable : drag-and-drop with RICO details Dynamically Content Loading
- Ajax Dynamic Content : at DHTMLGoodies
- Dynamically loaded articles : at DHTMLGoodies Forms and Autocomplete
- Accessible Forms and Unobtrusive Javascript : at DotVoid
- Submit a form with Ajax : at CakeBaker
- Niceforms : at BadBoy
- Alter data with Ajax forms : at Symphony-Project
- Ajax Dynamic List : at DHTMLGoodies
- Chained Select Boxes : at DHTMLGoodies
- Dynamic Client Lookup : at DHTMLGoodies File Uploader
- Better File Uploads with Ajax and JavaServer Faces : file upload with progress-bar; at Java.net
Image/Display/Edit/Gallery/Lightbox/Slideshow
- Prototype Javascript Lightboxes : window on any page; at Xilinus
- Lightbox JS : at HuddleTogether
- Lightbox Gone Wild : at ParticleTree
- Building aB: Customizing Lightbox : at AlwaysBeta
- Ajax: What is it Good For? : Ajax powered Fading Image Gallery at DHTML Nirvana.
- minishowcase : simple php/javascript online photo gallery, powered by AJAX/JSON at frwrd
- Zen Photo : a simpler web photo album
- Ajax Image Gallery : ajax gallery demo at StrangerThanFiction
- Ajax Image Gallery : A very basic Ajax image gallery example
- S5: A Simple Standards-Based Slide Show System : at MeyerWeb
- Ajax-S : at RobertNyman
- Slide Show with Controls : at Zapatec
- Miniature slideshow for DIVs using Scriptaculous : at BigBold
- Ajax flickr Slideshow : at Fettig
- Live Thumbnails: Watch em Grow : at WebMonkey
- Canvas Reflection Demo : at NeonDragon
- iPhoto-like image resizing using Javascript : at AgilePartners
- Ajax Banner Rotation : PHPied
- Image crop - DHTML user interfaceat DHTMLGoodies Keyword Suggest
- Creating an Autosuggest Textbox with JavaScript, Part 1 : at WebReference
- Creating an Autosuggest Textbox with JavaScript, Part 2 : at WebReference
- Creating an Autosuggest Textbox with JavaScript, Part 3 : at WebReference
- How to create the Google Suggest feature with ASP.NET 2.0 : at DotNetJunkies Live Search
- HOWTO: Animated Live Search / Ordered List : at OrderedList
- Live search explained : at JustAddWater Misc/General
- Ajax Using ASP.NET 1.1 : Ajax and ASP.NET; at AjaxProjects
- What Is Ajax? : Ajax and ColdFusion ; at Sys-Con
- Kick-start your Java apps : Ajax and Java : at IBM
- Ajax for Java developers: Build dynamic Java applications : at IBM
- AJAX: Asynchronous Java + XML? : at Developer.com
- Kick-start your Java apps, Part 2 : Ajax and Java : at IBM
- AJAX in action : Ajax and Java Technology : 15-minute video on AJAX and Java technology at Sun.com
- Using JavaServer Faces Technology with AJAX : at Java.net
- Ajax using XMLHttpRequest and Struts/ : by Frank Zammetti
- Building a Shelf in WordPress : More-tab-slideout-area tutorial; at Asymptomatic
- A Tale of Two IFrames or, How To Control Your Browsers History : iframes tutorial; at CodingParadise
- Saving Session Across Page Loads Without Cookies, On The Client Side : saving state tutorial; at CodingParadise
- Simple Ajax Functions - Snippets : common functions; at AjaxTutorial
- Building a Spy : Digg Spy tutorial ; at StromCode
- Create Your Own Ajax Effects : animated text; at ThinkVitamin
- XMLHttpRequest Tracing for Ajax debugging : Ajax Debugger Progress Bars
- CakeTimer - An Ajax File Uploads Progress Bar : This is a demonstration of an Ajax powered progressbar to monitor
file uploads with (Cake)PHP. Rounded Corner
- Rico rounded corners without all of Rico : at encytemedia RSS
- RSS Ticker with Ajax feed ticker; : at AjaxProjects
- Simple Ajax RSS ticker script : feed ticker; at DHTMGoodies
- Slide In RSS items : feed slide in animation; at DHTMGoodies
- Dragable RSS boxes : drag-and-drop boxes; at DHTMGoodies
- Ajax RSS reader : at IBM Shopping Cart
- Flexstore on Rails Tutorial : by Christophe Coenraets
- Fly to basket : shopping cart; at DHTMGoodies Lists/Sorting
- How to Make Sortable Lists : lists and drag-and-drop- tutorial; at Symphony-Projects
http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

- Creating sortable lists with PHP and Ajax : at PHPRiot

- Make all your tables sortable : at Kryogenix Tabbed Pages
- Building Tabbed Content : at AjaxLessons
- Ajax Design Patterns : at Snyke Trees
- List based folder tree : at DHTMLGoodies
- Update a tree with Ajax : at DHTMLGoodies Username Availability
- Ajax username availability checking : check username ; at MDGroves Voting
- Ajax Poller : at DHTMLGoodies
- Digg-like Ajax Voting : at Symphony-Project

Sưu tầm

{mospagebreak title=60 More AJAX Tutorials}With the popularity of AJAX growing every day I've had the opportunity to
collect and try out many more tutorials in the last several months. These examples and how-to's represent the best
tutorials that I've personally used or otherwise had the opportunity to work with out of the overall group. This post is
intended for individuals who learn best by example. Most of the listed tutorials come complete with instructions and
source code. I've also categorized all of the tutorials for easy browsing. Enjoy!
Please let me know through email or a comment if you know of any other great AJAX tutorials and I'll be glad to post
them. Also special thanks to all of the folks who produced all of these wonderful free tutorials.

Also See: Round-up of 30 AJAX Tutorials

AJAX Activity Indicator Tutorial

CakeTimer - An Ajax File Uploads Progress Bar
This is a demonstration of an AJAX powered progressbar to monitor file uploads with (Cake)PHP.

HowTo add Ajax in-progress indicators

Ok, so my little del.icio.us app (click link to read about how I added Ajax functionality to a simple Rails app) is pretty cool,
but it was missing one big thing. When the user clicks the "Get Results" link she has no idea that the page is
communicating with the server.

AJAX Bookmarklets Tutorial

Creating Huge Bookmarklets
A bookmarklet is a special piece of JavaScript code that can be dragged into a user's link toolbar, and which later can
be clicked on to implement cross-site behavior. People have done all sorts of cool stuff with it.

AJAX Chat Tutorials

AJAX Chat Sources Code for Download
After a slow start (following the announcement of the XHTML (ajax) Chat) things got finally busy. I had so many requests
that I have decided to offer the complete sources for download.

Lace - Ajax Chat

Lace is a free, lightweight Ajaxian communications engine suitable for a shoutbox, chat room or similar. Version 0.1.3
brings with it several bug fixes, a tiny bit of code reorganization and most importantly, an oft-requested User List.

Most Simple Ajax Chat Ever

Very easy to use AJAX chat demo.

AJAX Client-Server Communication Tutorials

Implementing simple AJAX interaction in your Web Application using XMLHttpRequest object
Everybody till now must have atleast heard about AJAX (Asynchronous JavaScript And XML). This example will give you
an idea about how you can implement simple AJAX interaction in your web application.

Make asynchronous requests with JavaScript and Ajax

In this article, you'll begin with the most fundamental and basic of all Ajax-related objects and programming approaches:
The XMLHttpRequest object. This object is really the only common thread across all Ajax applications and -- as you
might expect -- you will want to understand it thoroughly to take your programming to the limits of what's possible.

Advanced requests and responses in Ajax

n this article, I move beyond the basics in the last article and concentrate on more detail about three key parts of this
request object, the HTTP ready state, the HTTP status code and the types of requests that you can make

AJAX
In this tutorial, you'll be introduced to Ajax, a technology that allows you to send these requests through small JavaScript
calls, meaning the user doesn't have to wait for the page to refresh.
http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

All Request, All The Time

Let's build a simple application that accepts input from the user, passes it to some PHP on the server that checks it
against a database, and returns the result to the browser. It comes in three parts.

AJAX Drag and Drop Tutorial

Drag and Drop Tutorial (with a cool video)
Adding items to a shopping cart in common e-commerce applications isn't very close to the actual "add to cart"
metaphor, since it requires clicking an "add to cart" button, watch a new page (the shopping cart), and then go back to
the shop or checkout with buttons. Ajax allows to get closer to the cart metaphor, by enabling drag-and-drop interactions
and giving immediate visual feedback, without leaving the shop.

AJAX Dynamically Content Loading Tutorials

Dynamically loaded articles
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.

Ajax - Dynamic Content

This small generic script makes it easy for you to load content of external files into HTML elements on your page.

AJAX Forms and Autocomplete Tutorials

Scriptaculous Lists with PHP
The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to
implement, and they're just so much nicer than the standard listbox with up/down arrows that we see in most of today's
applications and administration tools.

Alter data with Ajax forms

Displaying rich formatted questions and lists, even paginated, is not enough to make an application live. And the heart of
the askeet concept is to allow any registered user to ask a new question, and any user to answer an existing one. Isn't it
time we get to it?

Dynamic Client Lookup

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.

Chained Select Boxes

This script uses Ajax to popuplate a select box with cities based on which country you choose.

Ajax Dynamic List

This script shows you a list of options based on what you type into a text input. Example: Type in "A" and Ajax will get
you a list of all contries starting with "A".

AJAX Framework and Toolkit Tutorials

My-BIC - Tutorials and How To's
A collection of easy to follow tutorials using the My-Bic Framework including a, hello world - getting your ajax setup,
posting comments via AJAX and changing views from a drop down. There are beginner and intermediate tutorials here.

New Echo2 Tutorial Series

Part 1 of a multipart Echo2 tutorial series, entitled "Ajax with Echo2 and Eclipse" is now available from our web site. The
related archive with the Echo2 distribution plus the EchopointNG library is available here.

AJAX Design Patterns - Using The Dojo Toolkit

Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a
complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.

Using Dojo and JSON to Build Ajax Applications

In this article, I will show how to build Ajax-enabled applications using Dojo and JSON--two very different but
complementary technologies that can significantly enhance the interface and usability of web applications.

AJAX General Tutorials

Building a Spy
Step by step instructions on how to build a Digg like spy page.

Building a Shelf in WordPress

http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

Nice tutorial on how to build a sliding shelf in Wordpress.

AJAX from Scratch: Implementing Mutual Exclusion in JavaScript

This AJAX from Scratch series of articles describes fundamental techniques needed to develop AJAX Rich Internet
Applications in JavaScript from scratch.

Saving Session Across Page Loads Without Cookies, On The Client Side
This is a mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large
amounts of data beyond cookies size limits.

A Tale of Two IFrames or, How To Control Your Browsers History

This is a mini-tutorial on the black art of iframes and browser history, known to AJAX experts but rarely presented
clearly.

AjaxWorld Special: What Is AJAX?

Learn more about AJAX and ColdFusion

Simple Ajax Functions - Snippets

I've created a list of very common JavaScript functions for Ajax. They have been created in quick reference fashion and
do not contain any fancy stuff. Instead of creating one function which can handle various tasks depending on passed
values, they are split into seperate basic task functions. The reason for this is simplicity.

AJAX Using ASP.NET 1.1

You've heard of it. It is the latest buzz term for web programmers these days. AJAX is an acronym that stands for
Asynchronous JavaScript and XML. AJAX gains its popularity by allowing data on a page to be dynamically updated
without having to make the browser reload the page. I will describe more about how AJAX works, and then go into some
sample code to try out.

Speed up Your AJAX Based Webapps

It sets the expiry of the JavaScript to years and not days. Once the JavaScript file is downloaded it is never downloaded
again, ofcourse unless you force it by removing the file in the cache. If you visit the site often the JavaScript will not be
removed from the cache.

Kick-start your Java apps, Part 2

This tutorial guides you through the development of a small human-resources application, first using conventional
JavaServer Pages (JSP) based technology, and then migrating it to a highly interactive solution using Ajax.

Howto 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.

Create Your Own Ajax Effects

Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today. The basic and prebuilt
effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own,
homegrown, do-it-yourself effects. We're going to show you how to take basic effects and build on them to create your
own.

AJAX Getting Started Tutorials

An Introduction to AJAX
A very nice introduction to AJAX.

Nitty Gritty Ajax

In the course of this tutorial, we're going to look at what Ajax can do. Then we'll use a JavaScript class to simplify your
first steps toward the ultimate in speedy user interactivity.

A simple AJAX example

Based on Rasmus's 30 second AJAX tutorial, I've cobbled together a very rudimentary example of one approach to
AJAX programming. A "Hello, World" AJAX program, if you will. You can view the demo here on my site, and download
the source code (document attachment at the bottom of this article).

A List Apart: Articles: Getting Started with Ajax

The start of 2005 saw the rise of a relatively new technology, dubbed "Ajax" by Jesse James Garrett of Adaptive Path.
Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest()
object to communicate with server-side scripts.
http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

Ajax Toybox
Justin has put together a nice group of AJAX tutorials including, Hello, World, Dynamic City, State Lookup, Ajax to Clean
Your Clock, Ajax Calculator and an RSS News Ticker.

Introduction to Ajax
When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill
down into several different technologies (which is why I'll spend the first several articles in this series breaking apart each
one of them).

Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples

A great group of AJAX examples.

Rasmus' 30 second AJAX Tutorial

I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became "AJAX".
And it really isn't as complicated as a lot of people make it out to be. Here is a simple example from one of my apps.

An Ajax "Hello World" project to Get You Going

Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique
before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at
my version of this ultra-simple introduction to Ajax with sincere thanks to the original author.

Ajax Beginners Tutorial

In this tutorial we'll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to
allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.

AJAX Image and Gallery Tutorials

Image crop - DHTML user interface
This script gives you an Image crop/resize DHTML user interface. Drag a rectangle around the area you want to crop.
Click the "Crop" button and let Ajax send crop data to the server and the cropped image back to you. PHP uses
ImageMagick on the server to crop and convert the image.

Prototype Javascript Lightboxes

This class is based on Prototype 1.5. The code is inspired of 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.

AJAX Sortable List Tutorial

How to Make Sortable Lists
Many web applications need to offer an interface to order items - think about categories in a weblog, articles in a CMS,
wishes in an e-commerce website... The old fashion way of doing it is to offer arrows to move one item up or down in the
list. The AJAX way of doing it is to allow direct drag-and-drop ordering with server support.

AJAX RSS Tutorials

Simple Ajax RSS ticker script
This very small and simple script reads RSS data from an external source and shows them inside a predefined box DIV
or other tag) on your page. What you have to do is to specify the url to the RSS feed, how many items you want to show,
and for how many seconds you want the script to display each item.

Dragable RSS boxes

This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You
can also create new boxes dynamically directly from the page. This is the first version of this script. New functionality will
be added to this script during the following weeks and months.

Slide In RSS items

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.

RSS Ticker with AJAX

Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion!
This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to
display the feed dynamically and with flare. As a pre-requisite then, your site itself must support PHP, though the page
using this ticker can be any regular HTML file.

AJAX Shopping Cart Tutorials

Fly to basket (Shopping cart)
http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31
 Luyenkim.Net

This is a DHTML shopping cart module. The products will fly to the shopping basket when you click on the "Add to
basket" button. Ajax is used to dynamically update the content of the basket.

Flexstore on Rails Tutorial

Flexstore is a traditional Shopping Cart application that you can write in Ruby on Rails. Very comprehensive and cool.

AJAX Sorting Tutorial

Sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really
do have a vital use, their original use; they're for laying out tabular data.

AJAX Trees Tutorials

Update a tree with AJAX
his scripts adds an AJAX extension to my static folder tree. Open the demo and press down your mouse button on one of
the nodes in thee tree. This will make a text box appear which makes it possible for you to rename nodes. AJAX is used
to send this value to the server without reloading the page.

Static list based folder tree

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.

AJAX Username Availability Tutorial

AJAX username availability checking
The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use
is taken already or not, without having to submit a form and reload the page.

AJAX Voting Tutorial

Digg-like AJAX Vote On
This tutorial will show you how to add AJAX-enhanced interactions to askeet. The objective is to allow a registered user
to declare its interest about a question.

Ajax Poller
A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are
displayed in some animated graphs. Nguồn: www.maxkiesler.com

http://luyenkim.net/home9 Powered by Joomla! Tạo bởi: 27 April, 2010, 09:31