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

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