Ajax 检索跨浏览器XmlHttpRequest的最简单方法

检索跨所有浏览器工作的XmlHttpRequest对象的最简单和最安全的方法是什么？没有任何额外的库。是否有您经常使用的代码段

另外，我知道网上有大量的例子，但这正是我提问的原因：有太多不同的例子，我只想要一些简单且证明有效的东西

jQuery和其他库不是选项。

---

虽然我建议使用完整的库来简化使用，但在现代浏览器中，生成AJAX请求非常简单：

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

以下代码段是一个更高级的代码段，它基于来自甚至支持非常旧的浏览器（早于Internet Explorer 7）的代码段：

函数sendRequest（url、回调、postData）{ var req=createXMLHTTPObject（）； 如果（！req）返回； var方法=（postData）？“POST”：“GET”； 请求打开（方法、url、true）； //大多数现代浏览器都不允许设置用户代理 //很久以前对某些Internet Explorer版本的要求。 //如果使用Internet Explorer 7或Internet Explorer 7，则不需要此标题 //以上（或任何其他浏览器） //请求setRequestHeader（'User-Agent'，'XMLHTTP/1.0'）； if（postData） req.setRequestHeader（'Content-type'，'application/x-www-form-urlencoded'）； req.onreadystatechange=函数（）{ 如果（req.readyState！=4）返回； 如果（请求状态！=200和请求状态！=304）{ //警报（“HTTP错误”+请求状态）； 返回； } 回调（req）； } if（req.readyState==4）返回； 请求发送（postData）； } var xmlHttpFactorys=[ 函数（）{返回新的XMLHttpRequest（）}， 函数（）{返回新的ActiveXObject（“Msxml3.XMLHTTP”）}， 函数（）{返回新的ActiveXObject（“Msxml2.XMLHTTP.6.0”）}， 函数（）{返回新的ActiveXObject（“Msxml2.XMLHTTP.3.0”）}， 函数（）{返回新的ActiveXObject（“Msxml2.XMLHTTP”）}， 函数（）{返回新的ActiveXObject（“Microsoft.XMLHTTP”）} ]; 函数createXMLHTTPObject（）{ var xmlhttp=false；

---

对于（var i=0；i您的问题不是100%确定的-但是如果您要求函数返回跨浏览器XMLHTTP实例-我们已经在本机ajax库中使用了多年-在任何浏览器中都没有问题

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
}

函数getXMLHTTP（）{ var警报； var-xmlhttp； /*@抄送@*/ /*@如果（@_jscript_version>=5） //JScript为我们提供了条件编译，我们可以处理旧的IE版本。 试一试{ xmlhttp=新的ActiveXObject（“Msxml2.xmlhttp”） }捕获（e）{ 试一试{ xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”） }捕获（E）{ 警报（“您必须有Microsofts XML解析器可用”） } } @否则 警报（“您必须具有JScript版本5或更高版本。”） xmlhttp=false 警报=真 @结束@*/ 如果（！xmlhttp&！已发出警报）{

---

//非ECMAScript Ed.3将在此处出错（即根据要求，简单且经验证有效：

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

将其折叠成一行，我们得到：

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

更简单的方法是：

检测IE:

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

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
}

区分XMLhttp和XDomain:

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

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
}

---

可以找到完整的示例

我知道你说“不使用外部库”，但答案仍然是“使用jQuery”。它不到25k Gzip。另一个很棒的库是prototype。但是，你能解释一下为什么你不想使用库吗？它们可以让你的生活更轻松。.jQuery会泄漏内存，而使用库只是发出一个ajax请求是一种严重的过度使用。当问题表明“没有任何额外的库”时，请停止建议库。很明显，你可以用大量不同的库来做这件事，这不是我问题的重点。正如我所说的，jQuery的ajax对象会泄漏内存，这对我来说至关重要。检查我提供的链接。不要一时兴起就说人愚蠢。@Rob，专门为防止泄漏而设计的跨浏览器xmlhttprequest。但是我不能我也没有发现上面的代码有任何漏洞。是

req.setRequestHeader（'User-Agent'，'XMLHTTP/1.0'）；

实际上是必要的吗？最新的Chrome说它无论如何都会忽略这一点。@ikari:我想这是旧版本的Internet Explorer的一个要求，它是否仍然与您相关当然取决于您的用户：）@BorisD.Teoharov：整个答案都被弃用了，已经有7年多的历史了。我建议使用普通的

新的XMLHttpRequest（）

，任何不支持它的浏览器都不适合现代互联网。@BorisD.Teoharov我已经更新了一点示例，这应该会有帮助：）根据IE开发中心，我引用，要支持比IE7旧的IE版本，可以使用：“return new ActiveXObject”（“MSXML2.XMLHTTP.3.0”）@Andrew，是的，这里有链接：。旧浏览器确实令人头疼，不过现在对于个人项目，我很可能只做

new XMLHttpRequest（）；

。