Einfachste Möglichkeit, browserübergreifende XmlHttpRequest abzurufen

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?

PS Ich weiß, es gibt Tonnen von Beispielen im Netz, aber das ist genau der Grund, warum ich frage: Es gibt zu viele verschiedene Beispiele, und ich will nur etwas Einfaches und Bewährtes, um zu funktionieren.

jQuery und andere Bibliotheken ist KEINE Option. Warum verliert Jquery Speicher so sehr?

Während ich empfehlen würde, eine vollständige Bibliothek zu verwenden, um die Verwendung zu vereinfachen, können AJAX-Anforderungen 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(); 

Das folgende Snippet ist ein fortgeschritteneres Snippet, das auf einem Snippet von quirksmode.org basiert und sogar sehr alte Browser (älter als Internet Explorer 7) unterstützt:

 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 

Wie gewünscht, einfach und bewährt zu 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; } 

Wenn wir es in eine Linie zusammenfassen, bekommen 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; } 

nicht zu 100% sicher – aber wenn Sie nach der function fragen, eine XMLHTTP Instanz über den Browser zurückzusenden – wir haben diese seit Jahren in unserer nativen Ajax-Bibliothek verwendet – und in keinem Browser ein Problem

 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  

Ein einfacher Weg:

IE erkennen:

 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; } 

Unterscheiden Sie 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 } 

Das vollständige Beispiel finden Sie hier