Question

我的代码如下：

  function loadContent() {

    if(loading) { return false; }
    showSpinner();

    var xhr = createXHR();
    xhr.open("GET", "http://localhost/testing.php");
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
        hideSpinner();
        var resp = xhr.responseText;
        document.getElementById("content").innerHTML = resp;
      }
    }
    xhr.send(null);

  }

  function showSpinner() {
    document.getElementById("loadingIcon").style.display = 'inline';
    loading = true;
  }

  function hideSpinner() {
    document.getElementById("loadingIcon").style.display = 'none';
    loading = false;
  }

这适用于Firefox和Chrome，但在IE9中，微调器不会显示。

我注释掉了hideSpinner（）函数的第一行，发现IE9确实显示了微调器，但是只有在AJAX请求返回结果之后。我在这里做了什么不合适的事吗？

[edit]想出来 - createXHR（）方法的原始代码如下：

  function createXHR() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.5.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.4.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) {}
    try { return new XMLHttpRequest(); } catch(e) {}
    return null;
  }

将最后一个'try'行移到顶部可以解决问题。

Answer 1

不要依赖全局变量来做这样的事情。您根本不需要loading变量。

function loadContent() {
  var spinner = document.getElementById("loadingIcon");
  var xhr = createXHR();

  spinner.style.display = 'inline';

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        document.getElementById("content").innerHTML = xhr.responseText;
      }
      spinner.style.display = 'none';
    }
  }

  xhr.open("GET", "http://localhost/testing.php");
  xhr.send(null);
}

IE9 - 在ajax请求期间不显示微调器[已解决 - 请勿使用Msxml2.XMLHTTP.4.0]

1 个答案: