AJAX Tutorials

This is a user-contributed list of AJAX tutorials for those new to Asynchronous JavaScript with or without XML. Feel free to leave a comment if you feel an important tutorial has been omitted.

  1. AJAX security - read about AJAX security issues and vulnerability postings
  2. jQuery plugins - a directory of plugins for jQuery.
  3. How jQuery works - a basic jQuery tutorial.
  4. Tutorial: AJAX Made Easy - On the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a simple trick, and hopefully this one will do the same.
  5. Efficient JavaScript code - Opera has one of the fastest and most efficient JavaScript engines of any browser, but when you have multiple User JavaScripts installed, it is important that they run efficiently to keep Opera’s performance as high as possible. Well written code will help to minimise the performance impact of User JavaScripts.
  6. Create a photo gallery using CSS - This sample chapter, taken from Sams Teach Yourself CSS in 10 Minutes, discusses how to create a photo gallery using a series of floated div elements.
  7. Developing PHP the Ajax way, Part 2: Back, Forward, Reload - A major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part “Developing PHP the Ajax way” series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.
  8. 30 second AJAX tutorial - as simple as they get
  9. Ajax: What is it Good For? - sliding interface and image gallery code examples
  10. AJAX: 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.
  11. AJAX Tutorial with Prototype - I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip code is in the database, and returns the city and state.
  12. AJAX Tutorial from W3Schools - very basic one
  13. AJAX:Getting Started - from Mozilla Developer Center
  14. Guide to Using AJAX and XMLHttpRequest - Although the XMLHttpRequest object might sound complex and different from any other JavaScript object you have ever used, it really isn’t. A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object. As we know, with the Image object you can dynamically specify a new URL for the image source without reloading the page. Similarly with the XMLHttpRequest object, you can dynamically specify a URL to get some server data without reloading the page.
  15. AJAX: Usable Interactivity with Remote Scripting - This article aims to give you an introduction to the foundations of remote scripting, in particular, the emerging XMLHttpRequest protocol. We’ll then walk through an example application that demonstrates how to implement that protocol, while creating a usable interface.
  16. Ajax Tutorial from HTMLSource - includes a guide to cross-browser AJAX
  17. Make an AJAX Website in Less than 10 Minutes - I’ve been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously. If you’re like me and you learn best from working with examples you’re only 10 minutes away from your first AJAX website.
  18. Make all your tables sortable with AJAX - 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.
  19. Using Ajax with PHP and Sajax - For years, the goal of creating a truly responsive Web application was hampered by one simple fact of Web development: To change the information on part of a page, a user must reload the entire page. Not anymore. Thanks to asynchronous JavaScript and XML (Ajax), we can now request new content from the server and change just part of a page. This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work.
  20. Learn xajax in 10 Minutes - xajax is designed to be extremely easy to implement in both existing web applications as well as new projects.
  21. Nice forms with AJAX - Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web.
  22. Submit a form with Ajax - for CakePHP
  23. Building a Drag-and-Drop Shopping Cart with AJAX - The rise of AJAX over the past several months has taken over the development world and breathed new life into the Web. Although these techniques have been possible for many years now, the maturity of Web standards like XHTML and CSS now make it a viable alternative that will be viewable by all but the oldest browsers.
  24. Drag & Drop Sortable Lists with JavaScript and CSS - self-explanatory
  25. Mastering Ajax: Advanced requests and responses in Ajax - For many Web developers, making simple requests and receiving simple responses is all they’ll ever need, but for developers who want to master Ajax, a complete understanding of HTTP status codes, ready states, and the XMLHttpRequest object is required. In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax.
  26. AJAX: Instant Tutorial - Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it’s content and load them into your existing page without having to refresh the whole page. This means that services like email don’t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.
  27. Mastering Ajax: Make asynchronous requests with JavaScript and Ajax - Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.
  28. Alternate Ajax Techniques - By now, nearly everyone who works in web development has heard of the term Ajax, which is simply a term to describe client-server communication achieved without reloading the current page. Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques aren’t limited to just XMLHttp. There are several other methods; we’ll explore some of the more common ones in this series of articles.
  29. Everything AJAX - relevant links
  30. 50 AJAX toolkits and frameworks - a great roundup
  31. YShout - a PHP+AJAX Shoutbox
  32. Easy AJAX inline text edit - 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.
  33. Developing AJAX Applications the Easy Way - AJAX is the buzzword of the moment among web developers, so much so that you could be sick of introductions to AJAX by now (if that’s the case, skip down to “The Chat Web Page”). AJAX is a technology that is hotly debated from many angles, but it has stuck because it encapsulates something that is new from a user’s perspective. The functionally that is newly available to all web users is “in-page replacement”: the ability for a web page to change using data from a web server without totally redrawing itself. This functionality has been around in Mozilla and Internet Explorer for a while, but it is only recently that Safari and Konqueror users have been able to join in.
  34. The Dojo Toolkit in Practice - When you start to build an Ajax application, you quickly run into situations where you feel like you are reinventing the wheel. The XMLHttpRequest object is what a lot of developers jump on when they think about Ajax, but that is just the start, and is the easy part.
  35. prototype.js just for AJAX - prototype.js library is too large for just using AJAX. In its current version (1.4.0_pre10) it weighs 36KB and contains lots of other features that are most probably not needed when just dealing with AJAX.
  36. Google Web Toolkit - Google Web Toolkit (GWT) is a Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don’t speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript’s lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.
  37. ASK - AJAX Source Kit - The thing with AJAX is that it needs JavaScript to work and a direct consequence surrounding its hype is that a lot of web sites have implemented it without catering to common usability and accessibility factors. This is something that has saddened me, and therefore I developed ASK - AJAX Source KIT to address that while at the same time offer a light-weight library to implement AJAX functionality without having to worry about web browser differences.
  38. AJAX validation on Rails - I wanted AJAX requests in Rails to result in error handling and message reporting that was at least as nice (and almost as easy) as doing the same thing without AJAX.
  39. Responsible asynchronous scripting - Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.
  40. 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.
  41. Creating a MySQL connection with PHP/AJAX - In this tutorial I will explain how to open a mysql database connection using PHP and the all popular AJAX. The purpose of this article is to demonstrate how the XMLHttpRequest object works within php and the advantages of using it. This tutorial will be the first in a series of articles leading to the development of a fully functional dynamic web events application.
  42. Getting Started with Ajax - The DOM plays into Ajax in a number of ways. How you use the DOM depends a good deal on how you handle the content returned from the server. You can treat the con­tent as simple text using the responseText property of the server response, or you can treat it as XML using responseXML. Assuming the content you pull back from the server is an (X)HTML snippet and you’ve gotten it as responseText, you could drop that content into a particular spot on the page using innerHTML. On the flip side, if the content you pull back is XML and you’ve gotten it as responseXML, you can traverse its DOM, cherry-picking or performing functions on the elements, attributes, and text nodes.
  43. Using Ajax from Perl - If you’re even remotely connected to web development, you can’t have failed to have heard of Ajax at some point in the last year. It probably sounded like the latest buzzword and was one of those things you stuck on the “must read up on later” pile. While it’s definitely a buzzword, it’s also quite a useful one.