Recommendations for simple AJAX?

Question

I want to get smarter in AJAX, but not sure which way to go. I have done some DHTML programming back in the day - like 8 years ago!, before it was called AJAX. I used emacs and hand-coded all the javascript, debugged via "Alert".

At this point I think there are frameworks out there that make things nicer and easier, but which ones? Where to start? Recommendations?

1. is jQuery indispensable? Just nice to have?
2. What about project SACK?
3. Firebug?
4. any other free libraries or frameworks you recommend? or disrecommend?
5. for a very simple project I found tons of pitfalls with FF vs IE compat. Without getting into a religious debate about who is right and who is wrong, what are some tips for navigating that minefield to produce apps that work and look mostly similar on any browser. One guy had a tip: insert * {padding:0; margin:0;} at the top of his .css stack, because FF and IE both have different default padding and margins for elements like UL OL etc. Is there a list of tips like this? Guidance?
6. I don't have a Mac and really don't wanna incur the test cost of IE, FF, Opera, Safari, Chrome, across all the myriad versions and platforms. Hints? Is there a 80% solution here? Like if I test on FF & IE, can I guess it will work on the others?
7. tips on tutorial sites, getting started? There's tons of info out there, which are the good places to go. In particular, because DHTML was around 10 yrs ago, my google searches are turning up some really stale information.
8. Debugging and development tools? I found an xpath just-in-time evaluator on the web on zvon.org. It was good but not as flexible as i wanted it to be. This is something I think would be invaluable. xsl and xpath have got to be the most opaque languages I have ever used. When I started with regex, there were just-in-time regex tools available, like Expresso, etc. Those were invaluable for developing and learning regex in the early days. Last night I spent waaaay too long fiddling with an xpath expression, and I'm wondering if there are similar JIT tools for xpath. And what about debugging and developing Javascript itself?

Mostly I am interested in the client-side aspects. I am not so much interested in integrated client+server approaches like ASP.NET AJAX, for now. If you told me about a client AJAX framework or development tool that worked only with Ruby, I wouldn't be interested.

Thanks!

EDIT: why did I get voted down? Is this a bad question to ask? It seemed perfectly reasonable to me? is it impolite?

Answer 1

Personally I think jQuery is indispensable. There are a lot of browser differences with XMLHttpRequest. jQuery simplifies all that. Here is an example:

$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

You can easily change this to return JSON, HTML, etcj.

Also there are wrapper methods for this that greatly reduce the number of parameters like $.load(), $.post() and so on.

In reference to browser differences, I strongly suggest you start with a CSS reset like Yahoo's reset CSS (there are others).

In terms of development, Firefox is the standard, combined with Firebug (and typically YSlow). HttpFox and Web Developer are popular plug-ins too.

Answer 2

1. jQuery isn't indispensable, but it's very helpful.
2. never heard about it
3. I think one js framework is enough. So i recommend jQuery.
4. CSS reset is not going to fix all compatibility issues, but it can help significantly. For ultimate css reset see Eric Meyer's CSS reset.
5. Try http://browsershots.org/
6. I don't have any recommendation here.
7. For debugging javascript - firebug (firefox extension). You can also want to try fiddler to check what's passed between server and client.

Answer 3

I also would highly recomend using JQuery. It makes life so much easier.

One thing I learned about JS though is never to trust that it works. Just because you use JQuery and it works in a few browsers doesnt mean it works in the others.

You have to try it in as many borwsers on as many systems as you can.

Answer 4

For making Ajax requests, I use http://www.prototypejs.org/
For everything else, I write my own JavaScript. Even if it matter of fading a div, I still prefer to do it my way as a way of learning.

As to getting started, here is my quick tutorial:

new Ajax.Updater(domId, urlToAPage);

Where: domId = anything on your html page that has an id, as long as it is not an input object. urlToAPage = could be the page to contact and get the data from.

You can make the request more complex:

new Ajax.Updater(domId, urlToAPage, {method: 'post', parameters: pars} );

You can change method from 'post' to 'get'. Pars can be anything. Further more, it looks same for post request. So if you want to make a request to a file called hello.php and send a post parameter with two arguments, then place the response into a div called 'hello':

var domId = 'hello';  
var urltoPage = 'hello.php';  
var pars = 'hello=1&name=hsbsitez';

read more: http://www.prototypejs.org/learn/introduction-to-ajax

Answer 5

it's usually even easier than the ajax() function above. mostly i just do ....

$('#mydiv').load('http://getsomehtml.php?op=loadmeup');

once in awhile add a callback

document.body.style.cursor = "wait";
$('#mydiv').load('http://getsomehtml.php?op=loadmeup', function() {
    document.body.style.cursor = "default";
});

and I agree jQuery is indispensable. or something like it .. using raw javascript is a minefield of problems with all the browsers these days. I like visualjquery.com as a handy reference (but I wish Remy would update it to 1.3.2)

And I could not do my job w/o Firebug so that's totally required.

I run xampplite on a PC for testing. And I use NotePad++ or Eclipse PDT 2.0 for editing (esp for server-side PHP) and CVS and i'm good to go...

The way I do multi-browser testing is via a VM. I use Sun's VirtualBox and an XP virtual machine with all the browsers loaded up. I regularly use FF3 and IE7, so my VM has in it IE6, FF2, Chrome, Opera, and Safari. I sometimes use a Ubuntu 8.10 image but not really all that often.

For Regex get a copy of RegexBuddy - easily worth the $40