title: jQuery $.ajax done callback not firing
body: <p>I have the following code :</p>
  
  <pre><code>$("#loginSubmitButton").on("click",function(){
    var loginUserDetails = {
      email: $("#email").val(),
      password: $("#password").val()
    };
  
    //Send the AJAX request to authenticate the user
    $.ajax({
      type: "POST",
      url: "/somewebservice/v1/users/authenticate",
      data: JSON.stringify(loginUserDetails),
      contentType: "application/json;charset=UTF-8",
      dataType: "json",
    }).done(function() {
        $("#loginResult").text("Login successful");
      })
      .fail(function() {
        $("#loginResult").text("Login failed");
      });
  
  });
  </code></pre>
  
  <p>As per the jquery documentation (unless I am understanding something incorrectly) I expect  the done to be fired if I receive a 200 OK from my web server. However, in chrome console I can see a 200 OK response but jquery seems to fire the fail handler. </p>
  
  <p>Does anyone have any idea what I might be doing wrong here?  </p>