MVC 4 $ Ajax JSON Request returns status 0, statusText: "error"

Question

I try to update the value on my page every 5 seconds using jQuery $ .ajax, this code is used to work fine, but after deployment on the production server it turns out to be a random failure. On some pages this will work, but on others it will fail: status 0, statusText: "error".

Can someone detect errors in error code / markup?

I use this to call my method every 5 seconds:

setInterval(function () { updateMessages(); }, 5000); 

updateMessages is as follows:

 function updateMessages() { $.ajax({ beforeSend: function () { }, complete: function () { }, type: "GET", url: '@Url.Action("GetUnreadMessagesJson", "Message", new { Area = "" })', contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { var newUnreadMessages = result.UnreadMsgCount; }, error: function (rsult) { console.log(rsult); } }); } 

My server code (Action) inside the MVC controller is as follows:

 public ActionResult GetUnreadMessagesJson() { int unreadMessages = 0; try { unreadMessages = messageService.GetUnreadMessageCount(WebSecurity.CurrentUserId); } catch (Exception) { throw; } return Json(new { UnreadMsgCount = unreadMessages //,UnreadMessages = unreadMessages }, JsonRequestBehavior.AllowGet); } 

When I use Fiddler2 to parse the request on my local computer, I see this in the answer:

HTTP / 1.1 200 OK Cache-Control: private Content-Type: application / json; encoding = UTF-8 Server: Microsoft-IIS / 7.5 X-AspNetMvc version: 4.0 X-AspNet version: 4.0.30319 X-Powered-By: ASP.NET Date: Wed, Jul 31, 2013 17:38:50 GMT Content-Length: 20

{"UnreadMsgCount": 3}

What looks good and what I expect, but I never see this request when the site is live. Fiddler2 never displays any outgoing Ajax request, the Google Chrome Console shows:

Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function ...}

Who has the status: 0 and statusText: "error" inside. Nothing more.

How can I talk about this problem if there is nothing wrong with my code? Has anyone seen this before?

EDIT

After testing this issue with several browsers, including IE, Firefox, and Safari, it seems that the problem is limited only to Google Chrome. I submitted an error report here and will update this entry with any response I receive.

Thanks,

Answer 1

Explicitly set the text / json as follows

  return Json(new { UnreadMsgCount = unreadMessages //,UnreadMessages = unreadMessages }, "text/json", JsonRequestBehavior.AllowGet); 

Answer 2

My best guess would be that on a subsequent call, it cancels the previous call, forcing it to return with the status 0. This may explain why you see it sometimes, as if the previous call ended before the next one, you will not encounter a problem, therefore anything that slows down calls can cause a problem.

According to your question, I suppose you do not want to interrupt previous calls, so one of the options is to make synchronous calls so that if it is being made, do not send another. You will want to link to the ajax call, and if it is not completed, do not send another. Sort of:

  var updateCall; function updateMessages() { if (updateCall && updateCall.readystate != 4){ updateCall = $.ajax({ beforeSend: function () { }, complete: function () { }, type: "GET", url: '@Url.Action("GetUnreadMessagesJson", "Message", new { Area = "" })', contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { var newUnreadMessages = result.UnreadMsgCount; }, error: function (rsult) { console.log(rsult); } }); } }