CODEWITHSUNDEEP
javascripthtmlajax
dforce
dforce

Reputation: 2234

AJAX loader GIF while asynchronous POST request doesn't work in IE

I'm trying to show an AJAX loader gif while an asynchronous POST request is performed. Unfortunatelly this works not in Interet Explorer! The Gif is shown, but the request process seems to stop respectivly the changed webcontent will not be shown. On FF, Opera, Safari everything is fine! Any ideas?

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
 }

...

Upvotes: 0

Views: 2480

Answers (2)

qbeuek
qbeuek

Reputation: 4206

The window will freeze, because the request is synchronous. The browser freezes whenever a javascript code is executing and running a synchronous request is equivalent to running javascript code the whole time the browser is waiting for a response.

Upvotes: 2

brianpeiris
brianpeiris

Reputation: 10795

You've shown us the event handling code but are you calling open() and send()?

Your event handling code seems to work in FF3.5, IE6 and IE8:
http://jsbin.com/ocoka (Editable via: http://jsbin.com/ocoka/edit)

Full source:

<!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>

EDIT:

According to your comments, you are making an synchronous request. In that case you don't have to (shouldn't?) use the event handler at all, just run your code before and after the call to send():

Hosted Demo (tested in FF3.5, IE6 and IE8):
http://jsbin.com/elehu (Editable via: http://jsbin.com/elehu/edit)

Full source:

<!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>

Upvotes: 1

Related Questions