Einfachste Möglichkeit, browserübergreifend XmlHttpRequest abzurufen

Question

Was ist der einfachste und sicherste Weg zum Abrufen des XmlHttpRequest-Objekts, das in allen Browsern funktioniert? Ohne zusätzliche Bibliotheken. Gibt es ein Code-Snippet, das du oft benutzt?

P.S. Ich weiß, dass es unzählige Beispiele im Netz gibt, aber genau deshalb frage ich: Es gibt zu viele verschiedene Beispiele, und ich möchte einfach etwas Einfaches und Bewährtes haben, das funktioniert.

jQuery und andere Bibliotheken ist keine Option. Why does jquery leak memory so badly?

Answer 1

Während ich würde empfehlen, eine vollständige Bibliothek Nutzung zu erleichtern, Anfragen AJAX machen kann in modernen Browsern ziemlich einfach sein:

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

Der folgende Ausschnitt ist ein erweiterte Code-Schnipsel auf einem Schnipsel basierte von quirksmode.org und unterstützt sogar sehr alte Browser (älter als 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; 
} 

Answer 2

nicht 100% sicher Ihre Frage - aber wenn Sie fragen, für die Funktion wieder eine Cross-Browser-XMLHTTP Instanz wenden - wir dies in unserer Mutter Ajax-Bibliothek seit Jahren verwendet haben - und nie ein Problem in jedem Browser

function getXMLHTTP() { 
    var alerted; 
    var xmlhttp; 
    /*@cc_on @*/ 
    /*@if (@_jscript_version >= 5) 
    // JScript gives us Conditional compilation, we can cope with old IE versions. 
    try { 
     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP") 
    } catch (e) { 
    try { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 
    } catch (E) { 
     alert("You must have Microsofts XML parsers available") 
    } 
    } 
    @else 
     alert("You must have JScript version 5 or above.") 
     xmlhttp=false 
     alerted=true 
    @end @*/ 
    if (!xmlhttp && !alerted) { 
     // Non ECMAScript Ed. 3 will error here (IE<5 ok), nothing I can 
     // realistically do about it, blame the w3c or ECMA for not 
     // having a working versioning capability in <SCRIPT> or 
     // ECMAScript. 
     try { 
      xmlhttp = new XMLHttpRequest(); 
     } catch (e) { 
      alert("You need a browser which supports an XMLHttpRequest Object") 
     } 
    } 
    return xmlhttp 
} 

Answer 3

Wie gewünscht, einfache und bewährte arbeiten:

function Xhr(){ /* returns cross-browser XMLHttpRequest, or null if unable */ 
    try { 
     return new XMLHttpRequest(); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml3.XMLHTTP"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch(e){} 
    try { 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    }catch(e){} 
    return null; 
} 

es in einer einzigen Zeile Einstürzen, erhalten wir:

function Xhr(){ 
    try{return new XMLHttpRequest();}catch(e){}try{return new ActiveXObject("Msxml3.XMLHTTP");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){}try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}return null; 
} 

Answer 4

eine einfachere Art und Weise:

IE Detect:

function detectIE() { 
    var ua = window.navigator.userAgent, 
    msie = ua.indexOf('MSIE '), 
    trident = ua.indexOf('Trident/'), 
    edge = ua.indexOf('Edge/'); 
    if (msie > 0) {return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);} 
    if (trident > 0) {var rv = ua.indexOf('rv:');return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);} 
    if (edge > 0) {return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);} 
    return false; 
} 

Differenzieren XMLHttp und XDomain:

var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%27pune%2Cmh%27)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithke" 
if (window.XDomainRequest && detectIE()) { 
    var xdr = new XDomainRequest(); 
    xdr.open("GET", url, false); 
    xdr.onload = function() { 
     var res = JSON.parse(xdr.responseText); 
     if (res == null || typeof (res) == 'undefined') 
     { 
     res = JSON.parse(data.firstChild.textContent); 
     } 
     publishData(res); 
    }; 
    xdr.send(); 
} else { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4) { 
    if (xmlhttp.status == 200 || xmlhttp.status == 304) { 
     publishData(JSON.parse(xmlhttp.responseText)); 
    } else { 
     setTimeout(function(){ console.log("Request failed!") }, 0); 
    } 
    } 
} 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 
} 

function publishData(data){ 
    console.log(data); //Response 
} 

Voll Beispiel kann here