views:

555

answers:

14

I am currently developing a website using basic cgi to turn out pages. I would like the website to be changed to have a better (read dynamic) interface.

What techniques (if not AJAX) and/or tutorials would you recommend to get me started?

A: 

Your best bet is to start with a Javascript library that provides a reasonable interface for AJAX such as Prototype. There are plenty of resources for learning the basics of such libraries. For example: http://www.prototypejs.org/learn

trotterdylan
MooTools, jQuery, ExtJS are also great frameworks to start with.
Abyss Knight
This is bad advice. Your best place to start is with XMLHttpRequest. Once you're clear on the capabilities of the API, then you can decide on a framework if you need one.
64BitBob
+1  A: 

If you're somewhat new to the javascript side of things you should probably get started using a framework.

Jquery is lightweight and nice and has good tutorials and documentation.

Kristian J.
A: 

How about learning jQuery?

Swaroop C H
+3  A: 

I suggest jQuery, lightweight and very easy to get to grips with quickly, a great irc and web community. For ajax its as easy as $.ajax(url, callbackFn); - http://docs.jquery.com/Ajax

Good tutorials at www.learningjquery.com

redsquare
+5  A: 

You may want to check out HTML::Prototype, JQuery or CGI::Ajax

Leon Timmermans
Why the hell was this downvoted?
Leon Timmermans
I would like to up-vote you as your answer was really helpful from the server side of things POV, but don't have enough karma, it seems :(
dsm
@Leon Timmermans I never seen any advantage in usign jQuery.pm or any js-related module on server-side , can you enlighten me and tell me what particular advantage it offers ?Thanks
xxxxxxx
+9  A: 

AJAX is best approached by picking up the following:

  1. The Javascript language.
  2. An understanding of the DOM.
  3. An understanding of XMLHttpRequest.

Once you have those under your belt, you can make an informed decision about what APIs or frameworks you'd like to use. The back-end doesn't matter much, but I do recommend using JSON as your protocol of choice over XML. XML parsing is fraught with inconsistencies that will require code hacks to work around. JSON is much more straightforward.

See my answer on "Has anyone migrated from Struts 1 to another web framework?" for more information.

64BitBob
A: 

If you aren't looking to dive into the nuts and bolts as much, there is TIBCO General Interface. It is free, open source and runs in Tomcat. GI is an AJAX based IDE that runs in a browser and is used to make AJAX websites.

I don't work for TIBCO and am just trying to help. If you had to pay for the tool, I probably wouldn't have suggested it.

-Steven

+1  A: 

I find the W3 Schools tutorials are always a good place to start before going onto more in depth tutorials.

http://www.w3schools.com/ajax/default.asp

will
+1  A: 

If you really want to understand what you're doing, JavaScript: The Definitive Guide is a great reference for learning JavaScript and has a section dedicated to how XMLHttpRequest works and what the cross-browser concerns are when using it.

Once you get a handle on that, look into using a framework like jQuery or Prototype that takes care of the grunt work for you.

17 of 26
+14  A: 

The term "AJAX" is a little bit misleading, and can easily cause confusion for people trying to learn it. The term itself really only applies to fetching or sending data from the server asynchronously (ie, without reloading the page), but it tends to be used to describe any modern Javascript-heavy system. (In fact, even when you are talking about fetching or sending data asynchronously, the term "AJAX" isn't entirely correct - it was originally coined to mean "Asynchronous Javascript and XML", but most modern implementations use JSON in place of XML).

So, I suspect, what you're really talking about is 'modern Javascript'. Using Javascript on a web site (as has been noted previously) involves several related but distinct technologies, and it is very helpful when starting out to understand what these are, where they start and end and how they interact.

First you have the Javascript language itself. Although there are several implementations, this is actually relatively simple, and you should have very little trouble picking up its syntax.

Then there's the DOM or Document Object Model. This is the browser's Javascript-based interface to the page itself. The DOM is actually rather complicated in comparison to the Javascript language, and is likely to be the place where you have the most trouble (not least because the DOM provided by different browsers tends to be subtly different).

In order to actually start learning this stuff, I suggest that you start by looking at basic DOM manipulation. Learn how to create elements dynamically using the DOM, how to assign events, how your code interacts with the page, etc. There are a huge number of resources out there on the web to look at, and several books. As has been mentioned, O'Reilly's Javascript: The Definitive Guide is an excellent resource. If you want a reliable web resource, try PPK's site. You will also want to install Firebug - it's extremely useful for debugging. It also makes an excellent learning tool, you can open the console and 'play' with any page you want to. The DOM browser and tab-completion makes it very easy.

You could start by looking at Javascript in isolation, but it's simple enough that you'll probably pick up everything you need just by looking at a handful of examples. Instead I would suggest that as you progress, you revisit the Javascript language itself. Learn about its object prototyping (and how it differs from the more traditional OOP Classes you might be accustomed to.) These concepts can take a little while to 'click' with some people, and there's absolutely no need to know it when you're starting out, so I'd recommend glossing over it for now.

Notice I haven't mentioned AJAX or any frameworks yet - you will find it much easier if you have a basic grounding in Javascript and the DOM before you start looking at a framework. When it comes to DOM manipulation, these frameworks simply provide 'shortcuts' and utility functions - if you don't know what it's doing behind the scenes, it can be very tricky to resolve any problems.

I'd also recommend using a framework to handle the complexities of AJAX, simply because (unlike DOM manipulation and event handling) there's very little reason for you to understand the complexities of XMLHttpRequest unless you really want to. Let the framework take care of it and all the browser compatibility problems that arise.

Good luck!

Dan
The way I meant it was 'Getting information from the server in response to user interaction and inserting it back into the document without doing a page reload'. Thanks for your answer, it is very informative.
dsm
A: 

See also Using Ajax from Perl from perl.com

xdg
A: 

I got my first introduction to AJAX (and JavaScript, for that matter) from Ajax Hacks which provided a good foundation for understanding what it is all about, and what goes on behind the scenes in the do-it-for-you libraries everyone pushes.

ysth
+3  A: 

Lots of good answers here about learning AJAX (or JavaScript/DOM) as a standalone entity, but the CGI::AJAX module from CPAN is the quickest, easiest way to set yourself up to have a webpage which uses AJAX to update a page on-the-fly using a Perl backend. It requires no knowledge of DOM, XML, JSON, or any language other than Perl, a little HTML, and the barest hint of JavaScript.

All you have to do is assign a JavaScript event handler (e.g., onkeyup='...') specifying which Perl function to call and what data to provide as input and create a div to receive the output. CGI::AJAX will handle all of the communication to the server and DOM manipulation for you from there.

Dave Sherohman
That sounds pretty amazing, I'll certainly have a look at it right after i understand how the thing actually works (not a big fan of magic behind the scenes :)
dsm
+1  A: 

I would recommend the book Head Rush Ajax from Head First Labs.

It will walk you through the process of learning Ajax from the ground up.

They make minimal assumptions regarding what you may or may not already know.

The author does a good job of presenting the building blocks for understanding and using AJAX.

Regards...

Bob Minteer