Falling in love with jQuery?

[Scott Selikoff]

On the book website, it says "You'll fall in love with it when you see 20 lines of code reduced to three.". Could you give an example or two of this? The description sounds appealing but I'd like more substance. What can jQuery do that would be a huge pain to do without?

[Bear Bibeault]

Event handling, Ajax, DOM manipulation and effects come immediately to mind. Especially when you factor in cross-browser issues.

[Bear Bibeault]

For example, here's an example I like to use. Following is some typical code to make an Ajax request, sending the value of a form field as a parameter, and shove the response text into a DOM element:

var request;
try {
  request = new XMLHttpRequest();
}
catch(tryMS) {
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch(tryOtherMS) {
    try {
      request = 
         new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch(failed) {
      throw new Error('Ajax unsupported by browser!');
    }
  }

}
request.open('POST','/example/url',true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      document.getElementById('targetDiv').innerHTML = request.responseText;
    }
  }
}
request.send(
  'value=' +
  encodeURIComponent(  document.getElementById('testValue').value)
);
    

Here's the equivalent code using jQuery:

 $('#targetDiv').load('/example/url',{value:$('#testValue').val()});    

And this is a fair comparison. Both code examples work across multiple browsers that support Ajax, and both properly encode the request body.

The jQuery code actually performs some error-checking and event handling that the raw JavaScript example doesn't do.

[Scott Selikoff]

Thanks Bear, that is actually the kind of comparison that's really useful.