IE9 AJAX error: "Could not complete the operation due to error c00c023f"

Question

I have an AJAX request running a PHP script and I want to handle situations were the request returns state 500.

My code is working on Chrome and Firfox, but on IE9, if I add a condition if(httpRequest.status==500) I get this JavaScript error:

Could not complete the operation due to error c00c023f.

I have a loading image on the page, and because of this error I'm not able to replace the image, and the page seems to keep loading. Just as quoted here:

Especially if you're displaying a "loading animation" or anything similar while the request is being executed. The result in my case was that it seemed as the page never stopped loading

First, here is my AJAX call code:

function sendRequest(url, params, divToChange)
{

  // code for IE7+, Firefox, Chrome, Opera, Safari
  if (window.XMLHttpRequest)
  {
      var httpRequest = new XMLHttpRequest();
  }   
  else // code for IE6, IE5
  {
      var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //open the request and prepare variables for the PHP method being activated on server side//
  httpRequest.open("POST", url, true); 

  //Set request headers for POST command//
  httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  if(divToChange != "false")
  {
      httpRequest.onreadystatechange=function()
      {
          if(httpRequest.readyState==4 && httpRequest.status==200)
          {
              document.getElementById(divToChange).innerHTML=httpRequest.responseText;
              eval(document.getElementById("runscript").innerHTML);
          }
          else if (httpRequest.status==500)
          {
              document.getElementById(divToChange).innerHTML=httpRequest.responseText;

              //eval the lang variable from the php script.
              eval(document.getElementById("runscript").innerHTML); 

              if(lang == "en")
              {
                  document.getElementById(divToChange).innerHTML='<b> An error accured, please try again later</b>';
              }
              else
              {
                  document.getElementById(divToChange).innerHTML='<b> שגיאה התרחשה, בבקשה נסה שנית מאוחר יותר</b>';
              }     
          } 
      }  
  }

  httpRequest.send(params); //sending the request to the server//
}

I've searched about it and found this post on stack. From there, I've found this quote:

Just before you call the XmlHttpRequest.abort() method, set a flag on it, this is how I did it:

XmlHttpRequest.aborted = true;
XmlHttpRequest.abort();
In the onreadystatechanged handler, the first lines of code in my case is:
if (xmlHttpRequest.aborted==true) { 
  stopLoadAnimation();
  return;
}

But in my case, I dont even call XmlHttpRequest.abort(), so why do I get the error for the first place ?

By the way, if I remove all the condition else if (httpRequest.status==500) and all of the code in it, I wont get the error, but then again, I wont be able to display message on 500 error.

score 1 · Answer 1 · answered Sep 14 '12 at 04:07

I'm guessing, but I think that the lack of a readyState check might be causing you some problems. Remember that you don't just call your onReadyStateChange handler when the call is completed - it's called on EVERY STATE CHANGE. So for the first two (Unitialized and Loadinf) I don't believe that the "status" property is available - and IE may be throwing an odd error because of the interaction between ActiveX and JavaScript.

I would suggest something like this for your error state (note that there are many errors other than 500 that you may want to catch as well):

(httpRequest.readyState > 1 && httpRequest.status != 200)

I can only guess that the other browsers create the status property at the outset (if this indeed the problem).

As an aside I might also suggest (humbly) that you give my AJAX abstraction library a try. It'll automatically handle nearly all of this. Both a success and an error handler can be set, there's no worries about cross-browser stuff and it all fits pretty seamlessly into your existing codebase.

The component is here:

http://depressedpress.com/javascript-extensions/dp_ajax/

I've found it insanely useful.

Thanks for the answer, I will indeed look at your AJAX library. — Alon Adler, Sep 16 '12 at 21:23

score 0 · Accepted Answer · answered Sep 13 '12 at 23:13

IE does some really weird things when you much about with innerHTML and create invalid markup it can't understand. (I have run into a very similar issue with someone trying to embed a form inside a form, for instance.)

I would wager that divToChange does not refer to a valid HTML div element and that your error comes from trying to change the div itself.

In your debugging code, add console.log(divToChange) (or you can use alert(divToChange). It should say something like "[object HTMLDivElement] or something similar.

In your test, if you want to ensure that divToChange is not falsey[1], simply do

 if (divToChange)

[1] Javascript's definition of falsey and truthy may take some getting used if you come from a strongly typed environment.

Following your answer, I've reviewed my code and indeed found that my Ajax function was called before I've created the container div for the status message. I Don't know how it worked on Chrome/Firefox, and sometimes on IE, but anyway, I've fixed it and now it looks OK. Thanks :) — Alon Adler, Sep 16 '12 at 21:22

score 0 · Answer 3 · answered Feb 12 '15 at 04:21

I have tried this and it worked for me. hope this helps:

if (xmlhttp.readyState==1 ) { return }     // added this to fix error c00c023f in IE9
                else if (xmlhttp.readyState==4 )
                    {
                        if(xmlhttp.status==200) { func(xmlhttp.responseText) }
                    }

IE9 AJAX error: "Could not complete the operation due to error c00c023f"

3 Answers3