ansaurus

Question

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

Answer 1

A:

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>

brianpeiris 2009-10-23 12:00:37

Sure. Here is my portion:<pre>http_request.open("POST", url, false); //async http_request.setRequestHeader("Connection", "close"); http_request.send(parameters);</pre>For the asynchronous stuff i have 'false' there. Then it works for me. But thats not what I'm locking for...

dforce 2009-10-23 12:14:14

Since you are using a synchronous request, I've edited the answer with the correct code.

brianpeiris 2009-10-23 12:36:25

I will try this... But how can we prevent the window freezing issue?

dforce 2009-10-23 12:41:19

What happens with: onreadystatechange ??

dforce 2009-10-23 12:42:53

Also i want TRUE for the http_request.open.

dforce 2009-10-23 12:44:34

If, for some reason, you *really* don't want to use an asynchronous request you have to make sure that your target audience has fast access to your servers and that your server doesn't take too long to process the request.

brianpeiris 2009-10-23 12:45:16

THX so far! This one works! But please have a lock at my other comments.

dforce 2009-10-23 12:48:26

I don't understand your last few comments. Are you trying to make an asynchronous or synchronous request? The onreadystatechange event should not be used for synchronous requests.

brianpeiris 2009-10-23 12:49:57

Actually I'm trying a ASYNC request. But therefore facing the IE problem that doesn't show the load image.

dforce 2009-10-23 13:00:17

I've edited the answer again to include both asynchronous and synchronous versions.If you want to make an async request, the first version of code in my answer should work for you.Your original question said that the load GIF was shown and now you are saying it isn't shown.Please **edit your question** to clarify the problem.

brianpeiris 2009-10-23 13:03:44

Ups sorry, your're right! The gif will be shown, but then nothing happens. Your 1st aproach is not working for me. Maybe because I'm using "POST" instead of "GET"? I mean, this is the same code I am complaining about. Please help...

dforce 2009-10-23 13:57:26

POST requests work fine with my code. Please make sure your server is responding properly. I would be able to help you if I could duplicate your problem but, as far as I can see, the code works.

brianpeiris 2009-10-23 15:07:47

Hey brianpeiris! I tried exactly your first example with the ASYNC request. In IE it works. Surprise! But now Firefox says "There was a problem"!

dforce 2009-10-27 14:47:24

It works for me dforce. I can run my ASYNC code on FF3.5, using both POST and GET methods, with no errors whatsoever. P.S. If I've answered your original question, please consider creating a new question.

brianpeiris 2009-10-27 15:05:20

Aaah damn! Of course it was a CROSS DOMAIN issue! Started the script locally in IE works, but not in FF.

dforce 2009-10-28 08:14:33

Answer 2

+1 A:

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.

qbeuek 2009-10-23 19:16:44

+1 Just make async requests, so the browser doesn't halt, that's what async requests are for, and that's the A in AJAX

Juan Mendes 2010-05-05 18:14:50

ansaurus

tags:

views:

answers:

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

EDIT:

related questions