Reasons not to use native XMLHttpRequest - why is $.ajax mandatory?

Question

I'm writing an app that:

1. absolutely relies on sending data to server via Javascript
2. must not have JQuery library included in code.

(I don't know if my code will be included in web pages that already have jquery lib, I do not know if there's gonna be right version, I do not know if there is gonna be JQuery conflict and so... )

I must relay on native JS functionality XMLHttpRequest(ActiveX for older IE's) methods, which is simple but than I saw warning:

"Without jQuery, AJAX coding can be a bit tricky!

Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation. This means that you will have to write extra code to test for different browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code."

What is 'tricky' about that? What am I possible doing wrong? As far as I know

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

is only extra code for different browsers and my xmlhttp var should be from now on ready to do the job in IE5, IE6, IE7+, Firefox, Chrome, Opera, Safari.

Is above cross-browser code adjustment all I should do or is there anything else I should take care about when using native XMLHttpRequest object?

Reentry

If you think that cross-browser JavaScript coding is straightforward and painless, this must be your first assignment :) – Argueta

Completely agree with Alvaro. Also, you can browse the jQuery sources to see what it does exactly. For example, see here -- there are lots of issues that your current code does not tackle. None of them will turn up during basic testing. – Pimentel

No, Alvaro, the thing is that I don't see any pain other than demonstrated few lines of code, and that is something I can live with. Trouble is, I can't belive it's all pain and there's no more... – Coralline

If you think cross-browser coding is not too complicated then this is either your first project or you are a very experienced javascript coder. – Meade

Maybe I wrote something wrong... I'm in trouble because I cannot use Jquery, and I'm trying to find solution here and I was wondering what is exactly the tricky part – Coralline

In my job we use many frameworks like jQuery or Mootools. I can work with it but when i am programming for myself i use "simple" javascript, build classes with it and use the basic things like document.getElementsById(...) . Frameworks are good, if you know how to programm the same thing with the basics. So you use $.ajax because it is simple, it works with different browsers and if you use jquery you have alot more then $.ajax ;) – Rousseau

Answer 1

That's the only thing necessary for cross-browser support unless you need to support really old IEs (which apparently use a different ActiveXObject).

However, using e.g. jQuery provides a bunch of additional advantages:

• Single function call, no unnecessary variables cluttering your scope.
• Automated serialization of objects into GET/POST arguments. Why do that manually (you need to encode the values properly!) when you can simply pass an object?
• Automated parsing of the response, e.g. in case of JSON you get an object and not just a string you need to parse manually.
• Nice callbacks for common events (success/failure/finished)
• Pluggable architecture to support e.g. XDomainRequest for CORS in IE.

Since you mention that you cannot use jQuery because your app will be embedded in another site that might conflict with it: You can avoid this by including jQuery and then using $.noConflict(true) to restore both the old $ and jQuery variables. To use it in your code you then write it like this:

(function($) {

})(jQuery.noConflict(true));

Cosmography

How are you doing, John Resig? – Stipulate

Answer 2

The XMLHttpRequest object is defined as a W3C standard here:

http://www.w3.org/TR/XMLHttpRequest2/

and thus the API itself should be consistent across browsers.

The only change should be, as you mentioned, how you obtain the XMLHttpRequest object. See here:

http://www.quirksmode.org/js/xmlhttp.html

for a cross-browser, non-jQuery way of doing it (obtaining the object is done in his XMLHttpFactories array.

Sevigny

AFAIK there's no browser that completely and correctly implements that standard, so behavior will be anything but consistent across the entire feature set. – Pimentel