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?

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?

• javascript
• jquery
• xmlhttprequest
• jqxhr

• 8 If you think that cross-browser JavaScript coding is straightforward and painless, this must be your first assignment :) – Álvaro González Commented Nov 13, 2012 at 9:42
• 1 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. – Jon Commented Nov 13, 2012 at 9:43
• 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... – Miloš Đakonović Commented Nov 13, 2012 at 9:45
• If you think cross-browser coding is not too plicated then this is either your first project or you are a very experienced javascript coder. – slebetman Commented Nov 13, 2012 at 9:48
• 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 – Miloš Đakonović Commented Nov 13, 2012 at 9:52

2 Answers 2

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 mon 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));

The XMLHttpRequest object is defined as a W3C standard here:

http://www.w3/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/js/xmlhttp.html

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