jQuery Ajax Stop is not invoked (No error; 200 OK)

Question

I have a working ASP.Net 2.0 code in my development server that uses jQuery Ajax. The result of the ajax call is used to load dropdown values.

But when this code is deployed to a new DMZ server, the result is not getting populated in dropdown – though I am getting 200 OK as response. One obvious thing is that the Type is different in the response. It is expected as application/json but coming as text/plain.

I have success call back and error callback codes. Along with this I have handlers for ajax start and stop. But none of these events are getting fired. What is the reason error/stop handlers are not getting fired? How can we make it work?

Note: The behavior is same in both IE and Chrome.

Update

Also observed that there is an error logged in console, as shown below. Is it related to the "Type"? How can we address this?

Note: Also note that the Content-Length is 0 in the response headers shown below.

Success Callback

jQuery

      function loadASN()
      {
            var receiveScanParameter = getContainerParameters();

           // console.log(receiveScanParameter);

            $.ajax({
                    type: "POST",
                    url: "rcvScanTXAdd.aspx/GetASNForPlant",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ receiveScanParameter: receiveScanParameter }),
                    success: successPopulateASN,
                    error: errorFunction
                    });
      }

Global jQuery Code

    //Global Ajax Error handling Function
    function errorFunction(xhr, status, error) 
    {
              if(xhr == 'undefined' || xhr == undefined)
              {
                alert('xhr undefined');
              }

              alert(status);
              alert(error);
    }


 $(document).ready(function () 
 {
    //Ajax Start
    $('body').ajaxStart(function() 
    {
        //Change cursor to waiting 
        $(this).css({'cursor':'wait'})
    });

    //Ajax End
    $('body').ajaxStop(function() {

        //Reset the cursor
        $(this).css({'cursor':'default'})

    }); 



 });

Screenshots

Answer 1

WHen in doubt, read the API docs:

As of jQuery 1.8, the .ajaxStop() method should only be attached to document.

http://api.jquery.com/ajaxStop/

Same note can be found in $.ajaxStart docs

Answer 2

I figured it out.

Step 1: Observed that there is an error logged in browser’s console (saying result is null). [This screenshot is updated in the question]

Step 2: Observed that the content length of the response is zero. Also observed that there is a gzip compression happened on the response (by reading the response headers).

Step 3: Analyzed the server's web.config. It was uisng a C# httpModule for compression. In that httpModule added bypassing logic for json. [I don’t want json to be compressed with this custom module. Later I will consider adding compression to JSON when I use IIS for compression instead of custom module]. Following is the C# code segment for by-passing JSON compression

request.ContentType.ToLower(CultureInfo.InvariantCulture).StartsWith("application/json")

---