What are the steps to learn AJAX based web application development?

There is no one true way to learn AJAX development. The best way to get started is, well, just to get started. The absolute minimum you need to know is,

• Basic JavaScript, with an emphasis on JS scoping rules and the UI thread

First bookmark https://developer.mozilla.org/en/JavaScript/Reference

The 'A' in AJAX stands for Asynchronous, which means that you have to learn how to write callback functions (which are all closures). The scoping of JS closures can be tricky if you haven't worked with them before. Read http://javascript.crockford.com/code.html on 'Function declarations' to get started and read up on situations on stackoverflow.com after that.

Read up on Function#apply and Function#call,

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

• Learn the basics of the DOM and CSS

The DOM is just a big tree of nodes with properties. In combination with CSS this gives you the visual page that you see in the browser. Using JS you can add visual effects and create/remove new node structures on the fly. See http://books.mozdev.org/html/mozilla-chp-5-sect-2.html

• Learn about DOM Events

Events are how people interact with your page/application. Most frameworks provide helper/lib calls for handling this, but using them is pretty pointless if you don't understand the underlying behavior. http://www.quirksmode.org/js/events_properties.html

JavaScript is one of these 'building block' languages where the standard library provides only the basics. For example, there are no namespaces, but there are several ways in which you can usefully fake them. Every framework does it differently. Get a grip on the basics without using a framework before you commit to a specific framework for a project.

There's a lot more to learn, but this should get you started. If you want a depressingly long list of skills you need to master, try this SO question, http://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

The most important thing is just to get started. Build some trivial hobby project and you'll find the most important things you need to learn fast enough.

Here is my suggestion:

1. Learn basic javascript;
2. Master html DOM;
3. Learn advanced javascript;
4. Try with the first experiments by calling static html documents;
5. Learn the basics of a server-side language (as PHP). Among those basics, the fundamental ones for Ajax include methods for passing data between scripts;
6. Try with the first experiments involving calls for dynamic data;
7. Try with the second ones;
8. Once you feel secure enough, chose a framework or library that will strongly reduce your development time.

Your map is fine in my opinion, but I suggest to couple all of your steps with some little app, which contain all things you want to learn. It would be great if you will manage to make it useful not only to yourself, but your work mates.

Edit: cbrandolino roadmap is very good. But anyway, try to apply all new knowledge to something useful.

Some frameworks like GWT and Flex can be learnt as it is and you don't get any extra benefit by learning javascript.

Postpone learning JavaScript, if you know any of Java, C, C++, C#, PHP.

1. Learn jQuery
2. Profit
3. [optional] Get to know more about basic JavaScript or try another js lib (like Dojo) if you really feel the urge.