Question

I have a fairly simple ajax call built on jQuery. It works perfectly in IE9, Firefox latest and Chrome latest (so I’m pretty certain the page which the AJAX call is posting to is fine) but on IE8 (not tried IE7) it fails.

The jQuery code is:

$('.to-step-2').click(function(){
  var d = new Date();
  var roomShape;
  blnError = false;
  $.ajax({
    url: '/base/RoomBuilder/GetRoomShape.aspx?_='+d.getTime(),
    async: false,
    type: 'post',
    cache: false,
    dataType: 'html',
    success: function(data){
      if(data.substring(0,5) == 'Error'){
        alert('Please select a room shape to continue');
        blnError = true;
      }else{
        roomShape = data;
      }
    },
    error: function(jqXHR, textStatus, errorThrown){
      alert('Error 6: jqXHR = ' + jqXHR + '\ntextStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
      blnError = true;
    }
  });    
  if (blnError == true){
    return false;
  }

The error, which is thrown only in IE8 is reading:

Error 6: jqXHR = [object Object]
textStatus = error
errorThrown = Length Required

I’ve seen a few other posts about similar things, but adding the timestamp and cache:false to prevent caching seem to be quite common solutions, but still not working for me 🙁

Can anyone see why this is happening and suggest a fix?

Answer 1

You’re getting a 411 response from your service:

411 Length Required

The server refuses to accept the request without a defined Content- Length. The client MAY repeat the request if it adds a valid Content-Length header field containing the length of the message-body in the request message.

This is because jQuery does not set the content-length header when posting if there is no data. This is a security requirement when posting to IIS:

The underlying issue is that most installations of IIS6+ require a content-length be provided with all POST requests, even if there is no content (POST data).

The content-length for a request with no data should be 0, but jQuery doesn’t set that header automatically unless there is a data parameter. Since ASP.NET AJAX’s JSON serialized services require a POST request, this becomes a stumbling block for read-only requests.

(Quoted from from http://encosia.com/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/)

Simply setting the data parameter to an empty objects seems the simplest workaround:

$.ajax({
url: '/base/RoomBuilder/GetRoomShape.aspx?_='+d.getTime(),
async: false,
type: 'post',
cache: false,
data: "{}",
dataType: 'html',
success: function(data){
  if(data.substring(0,5) == 'Error'){
    alert('Please select a room shape to continue');
    blnError = true;
  }else{
    roomShape = data;
  }
}