AJAX 加载程序 GIF 而异步 POST 请求在 IE 中不起作用答案

【问题标题】：AJAX loader GIF while asynchronous POST request doesn't work in IEAJAX 加载程序 GIF 而异步 POST 请求在 IE 中不起作用
【发布时间】：2009-10-24 03:16:44
【问题描述】：

我正在尝试在执行异步 POST 请求时显示 AJAX 加载程序 gif。不幸的是，这在 Internet Explorer 中不起作用！显示了 Gif，但请求过程似乎停止了相应的更改的 web 内容将不会显示。在 FF、Opera、Safari 上一切正常！有什么想法吗？

http_request.onreadystatechange = function() 
 {
   if (http_request.readyState < 4)
   {
  var waitingPageBody = '< img src="/img/ajaxloader.gif" alt="request in progress..."/>';
  document.body.innerHTML = waitingPageBody;
   }
   else //if (http_request.readyState == 4)
   {
  if (http_request.status == 200)
  {
    document.body.innerHTML = http_request.responseText;

  }//end of if (http_request.status == 200)
  else
  {//other http statuses
    alert("There was a problem");
  }
   } //end of else if http_request.readyState == 4
 }

...

【问题讨论】：

@dforce：这里没有答案，但您可能想尝试使用 JQuery 之类的框架来处理 http_request 的细节，同时专注于业务逻辑。
不幸的是，在我的特殊情况下，我不能为您提供那些库。

标签： javascript html ajax

【解决方案1】：

窗口将冻结，因为请求是同步的。每当执行 javascript 代码时，浏览器就会冻结，并且运行同步请求相当于在浏览器等待响应的整个过程中运行 javascript 代码。

【讨论】：

+1 只要发出异步请求，浏览器就不会停止，这就是异步请求的用途，这就是 AJAX 中的 A

【解决方案2】：

您已经向我们展示了事件处理代码，但您是否调用了open() 和send()？

您的事件处理代码似乎适用于 FF3.5、IE6 和 IE8：
http://jsbin.com/ocoka（可通过：http://jsbin.com/ocoka/edit 编辑）

完整来源：

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox</title>
  <script>
    function load() {
      var http_request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      http_request.open('GET', 'http://jsbin.com/blank.html', true);

      http_request.onreadystatechange = function() {
        if (http_request.readyState < 4) {
          var waitingPageBody = 'request in progress...';
          document.body.innerHTML = waitingPageBody;
        }
        else {
          //if (http_request.readyState == 4)
          if (http_request.status == 200) {
            document.body.innerHTML = '<pre>' + entity(http_request.responseText) + '</pre>';
          }//end of if (http_request.status == 200)
          else {
            //other http statuses
            alert("There was a problem");
          }
        } //end of else if http_request.readyState == 4
      };

      http_request.send();
    }

    function entity(str) {
      return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    };
  </script>
</head>
<body onload="load();">
</body>
</html>

编辑：

根据您的 cmets，您正在发出同步请求。在这种情况下，您根本不必（不应该？）使用事件处理程序，只需在调用 send() 之前和之后运行您的代码：

托管演示（在 FF3.5、IE6 和 IE8 中测试）：
http://jsbin.com/elehu（可通过：http://jsbin.com/elehu/edit 编辑）

完整来源：

<!DOCTYPE html>
<html>
<head>
  <title>Sandbox</title>
  <script>
    function load() {
      var http_request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      http_request.open('GET', 'http://jsbin.com/blank.html', false);

      var waitingPageBody = 'request in progress...';
      document.body.innerHTML = waitingPageBody;

      /*** 
        setTimeout with 0ms delay makes sure that the
        'request in progress...' message is displayed
        before the browser thread is blocked by the send() method.
      ***/
      setTimeout(function(){
        http_request.send();
        if (http_request.status == 200) {
          document.body.innerHTML = '<pre>' + entity(http_request.responseText) + '</pre>';
        }//end of if (http_request.status == 200)
        else {
          //other http statuses
          alert("There was a problem");
        }
      }, 0);
    }

    function entity(str) {
      return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
  </script>
</head>
<body onload="load();">
</body>
</html>

【讨论】：

当然。这是我的部分：

 http_request.open("POST", url, false); //异步 http_request.setRequestHeader("Connection", "close"); http_request.send（参数）；

对于异步的东西，我在那里有“假”。然后它对我有用。但这不是我要锁定的......

由于您使用的是同步请求，因此我已使用正确的代码编辑了答案。
我会试试这个...但是我们怎样才能防止窗口冻结问题？
我也希望 http_request.open 为 TRUE。
如果出于某种原因，您真的不想使用异步请求，您必须确保您的目标受众可以快速访问您的服务器，并且您的服务器不会花费太长时间来处理请求。