You should definitely start with the basics of Javascript. Start with things like printing "Hello World" to the page. Move on to basic language features like variables, loops, conditionals, and functions. I recommend the W3Schools Introduction to Javascript. Don't get too caught up in trying to do object-oriented programming in Javascript. It is painful and confusing, even for some experienced Javascript programmers.
Next I strongly recommend learning to use a cross-browser Javascript library, rather than trying to do everything by hand (specifically: interacting with the DOM, performing XmlHttpRequests aka AJAX calls, etc.). I recommend the jQuery library. It provides a solid foundation for all of the cool AJAX-y things you want to do, and there are loads of plugins available for it.
jQuery is a Javascript framework that allows easy and reliable interactions with the Document Object Model (DOM). In simplest terms, the DOM is the representation of all the HTML elements in a web page. The DOM is slightly different from browser to browser, and interacting with it "by hand" is tedious and error prone. jQuery solves this problem by essentially doing all the hard work behind the scenes. It is much more powerful than that, really, but that's the major feature. It also provides support for page events, custom events, plugins, CSS manipulation, and much more.
JSON is another term you mentioned. It stands for JavaScript Object Notation. JSON is simply a lightweight way to represent structures in Javascript (and other languages too, actually). To be honest, the Wikipedia JSON Article provides a much better summary of how JSON is used with AJAX than I ever could, so you might want to give it a read.
Here is the basic order of events:
- Your Javascript code makes an AJAX call to a web page. You can do this using the AJAX functions in jQuery.
- The result produced by that web page is a JSON object. For example, it might produce a string that looks like:
{ 'firstname':'Robert', 'lastname':'Smith' }
- The result is received by your AJAX call and evaluated using the special Javascript "eval" function.
- You are left with a native Javascript object that you can work with in your code. You can then do stuff like:
document.write('Hello ' + result.firstname + ' ' + result.lastname)
Here are a few useful links I have collected over the past year or so that have helped me. I hope they help you too!
The most important thing to remember is: learn by doing. Experiment. Try new things. Make a bunch of proof of concept pages. With Javascript, that's really the best way to get your feet wet. Good luck!