Javascript XMLHttpRequest获胜't使用IE 8或9发送，但使用IE 10

Javascript XMLHttpRequest won't send with IE 8 or 9 but works with IE 10

本文关键字：IE 9发送 Javascript 获胜 使用 XMLHttpRequest      更新时间：2023-09-26

我目前在使用低于10的IE版本时遇到了很多问题，而我在使用Firefox、Chrome、Safari、Opera甚至IE 10时都没有问题。我的网站只显示了三个链接在一起的选择菜单，其中两个菜单在第一个菜单和第二个菜单中选择时都会填充来自mysql数据库的数据。Apache日志不会显示在使用IE8或9时执行的任何POST请求，我的选择菜单也不会充满数据。

这是我的javascript代码：

function getXMLHttpRequest() {
   var xhr = null;
   if (window.XMLHttpRequest || window.ActiveXObject) {
      if (window.ActiveXObject) {
         try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }
      } else {
         xhr = new XMLHttpRequest();
      }
   } else {
      alert("Your browser doesn't support XMLHTTPRequest...");
      return null;
   }
   return xhr;
}
function request(oSelect) {
   var value = oSelect.options[oSelect.selectedIndex].value;
   var xhr = getXMLHttpRequest();
   xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
         displayOptions(xhr.responseText, oSelect);
      }
   }
   xhr.open("POST", "ajax.pl", true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send(oSelect.name + "=" + value);
}
function displayOptions(oData, oSelect) {
   if (oSelect.name == "genus") {
      document.getElementsByName("species")[0].disabled = false;
      document.getElementsByName("species")[0].innerHTML = oData;
      document.getElementsByName("subspecies")[0].disabled = true;
      document.getElementsByName("subspecies")[0].innerHTML = "";
   }
   if (oSelect.name == "species") {
      document.getElementsByName("subspecies")[0].disabled = false;
      document.getElementsByName("subspecies")[0].innerHTML = oData;
   }
}

到目前为止，我已经尝试将xhr.open命令从POST更改为GET，但没有成功。我还试图在xhr.send命令中设置perl-cgi的绝对路径，但对IE8没有任何影响。

我也尝试过以下事情：

xhr.onreadystatechange = function() {
   if(xhr.readyState == 0) {
      alert("zero");
   }
   if(xhr.readyState == 1) {
      alert("one");
   }
   if(xhr.readyState == 2) {
      alert("two");
   }
   if(xhr.readyState == 3) {
      alert("three");
   }
   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      alert("four");
      displayOptions(xhr.responseText, oSelect);
   }
}

这为我提供了以下Chrome输出：

one
two
three
four

而我有一个与IE 8:

one
one
four

由于我是一个新手，所以我找不到可能导致这个问题的原因。我一直在网上寻找答案，但仍然没有找到。

当我开始绝望的时候，任何人都会非常感激。

我按照Oscar的建议使用jQuery找到了一个解决方法。

这是我在上面的帖子中写的替换js函数的代码，它的工作原理很有魅力：

$(document).ready(function() {
var $genus = $('#genus');
var $species = $('#species');
var $subspecies = $('#subspecies');
$genus.on('change', function() {
    var value = $(this).val();
    $species.empty();
    $subspecies.empty();
    if(value != '') {
        $species.removeAttr('disabled');
        $subspecies.attr('disabled', 'disabled');
        $.ajax({
            url: 'ajax.pl',
            data: 'genus=' + value,
            dataType: 'html',
            success: function(code_html) {
                $(code_html).appendTo('#species');
            }
        });
    } else {
        $species.attr('disabled', 'disabled');
        $subspecies.attr('disabled', 'disabled');
    }
});
$species.on('change', function() {
    var value = $(this).val();
    $subspecies.empty();
    if (value != '') {
        $subspecies.removeAttr('disabled');
        $.ajax({
            url: 'ajax.pl',
            data: 'species=' + value,
            dataType: 'html',
            success: function(code_html) {
                $(code_html).appendTo('#subspecies');
            }
        });
    } else {
        $subspecies.attr('disabled', 'disabled');
    }
});
});
相关文章：