Easiest way to retrieve cross-browser XmlHttpRequest

Question

What is the easiest and safest way to retrieve XmlHttpRequest object that works across all browsers? Without any extra libraries. Is there a code snippet you use often?

P.S. I know there are tons of examples on the net, but this is precisely the reason I am asking: there are too many different examples, and I just want something simple and proven to work.

jQuery and other libraries is NOT an option. Why does jquery leak memory so badly?

Answer 1

While I would recommend using a full library to make usage easier, making AJAX requests can be fairly simple in modern browsers:

var req = new XMLHttpRequest(); req.onreadystatechange = function(){     if(this.readyState == 4){         alert('Status code: ' + this.status);         // The response content is in this.responseText     } } req.open('GET', '/some-url', true); req.send(); 

The following snippet is a more advanced snippet based on a snippet from quirksmode.org and even supports very old browsers (older than Internet Explorer 7):

function sendRequest(url,callback,postData) {     var req = createXMLHTTPObject();     if (!req) return;     var method = (postData) ? "POST" : "GET";     req.open(method,url,true);     // Setting the user agent is not allowed in most modern browsers It was     // a requirement for some Internet Explorer versions a long time ago.     // There is no need for this header if you use Internet Explorer 7 or     // above (or any other browser)     // req.setRequestHeader('User-Agent','XMLHTTP/1.0');     if (postData)         req.setRequestHeader('Content-type','application/x-www-form-urlencoded');     req.onreadystatechange = function () {         if (req.readyState != 4) return;         if (req.status != 200 && req.status != 304) { //          alert('HTTP error ' + req.status);             return;         }         callback(req);     }     if (req.readyState == 4) return;     req.send(postData); }  var XMLHttpFactories = [     function () {return new XMLHttpRequest()},     function () {return new ActiveXObject("Msxml3.XMLHTTP")},     function () {return new ActiveXObject("Msxml2.XMLHTTP.6.0")},     function () {return new ActiveXObject("Msxml2.XMLHTTP.3.0")},     function () {return new ActiveXObject("Msxml2.XMLHTTP")},     function () {return new ActiveXObject("Microsoft.XMLHTTP")} ];  function createXMLHTTPObject() {     var xmlhttp = false;     for (var i=0;i<XMLHttpFactories.length;i++) {         try {             xmlhttp = XMLHttpFactories[i]();         }         catch (e) {             continue;         }         break;     }     return xmlhttp; }