jQuery AJAX requests failing in IE8 with message 'Error: This method cannot be called until the open method has been called.'

Question

I'm using jQuery 1.4.2 and am trying to perform a simple AJAX request. The target URL returns a JSON string (I validated it with jslint). The request works in Firefox and Chrome, but doesn't want to work in IE8, and I can't determine why. Here is the call:

jQuery.ajax({
url: 'http://' + domain + '/' + 'helper/echo/',
dataType: 'json',
success: function(data) {
 alert(data);
},
beforeSend: function(request, settings) {
 alert('Beginning ' + settings.dataType + ' request: ' + settings.url);
},
complete: function(request, status) {
 alert('Request complete: ' + status);
},
error: function(request, status, error) {
 alert(error);
}
});

IE will execute the beforeSend callback and the error callback. The error callback alerts with the message:

Error: This method cannot be called until the open method has been called.

My response header returns with Content-Type: text/javascript; charset=UTF-8.

What is going on with IE? I'm running the server on localhost, making a request from http://localhost:8080/psx to http://localhost:8080/helper. Maybe IE is blocking this request? I have tried installing Fiddler to analyze request traffic but it won't run on my machine because it's rather locked down. Firebug lets me, but everything seems good there.

Thanks for the help!!!

Answer 1

Alright, here's the fix! The request was using window.XMLHttpRequest(), which isn't working properly in IE8 for some reason. jQuery is not failing back to window.ActiveXObject("Microsoft.XMLHTTP") as it should.

Add this to your script somewhere before your AJAX call (only verified in IE8, not other IE's):

jQuery.ajaxSetup({
            xhr: function() {
                    //return new window.XMLHttpRequest();
                    try{
                        if(window.ActiveXObject)
                            return new window.ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e) { }

                    return new window.XMLHttpRequest();
                }
        });

Here's how I came to the solution:

1. Updated to jQuery 1.4.4 in case the issue was a bug that had been fixed.
2. Stepped through Firebug debugger and DevTools debugger until the results seemed to be drastically different.
3. On line 5899, the ajax() function creates the XmlHttpRequest object with the xhr() function. In Firefox, it was returning good data. In IE, this was returning with all fields being Error: This method cannot be called until the open method has been called.
4. I analyzed this function on line 5749, return new window.XMLHttpRequest();
5. I googled and came across this page that has the same problem and suggested the solution that works for me.
6. Official jQuery ticket: