title: Ajax status is 200 but error event triggers instead of success
body: <p>Today I am facing a strange issue that I never faced before. My ajax call is returning response with 200 status but somehow it always trigger error event instead of success. This is what I am doing </p>
  
  <pre><code>$.ajax({
          type: "GET",
          url: "swap.php",
          data: "key=dbdcd39f0f8f5077e7308f3d3d5d8cac&amp;code="+$("#code").val(),
          contentType: 'application/json; charset=utf-8',
          dataType:"json",
          beforeSend: function() {
                  $("#msg").html("&lt;img src='imgs/loading_circle.gif'/&gt;");
          },
          success: function(result){
                  alert(result);
          },
          error: function(xhr,status,error){
              alert(error.Message); // receiving Undefined message
          }
      });
  </code></pre>
  
  <p>PHP code of swap.php </p>
  
  <pre><code>&lt;?php
  header('Content-Type: application/json');
  $resp["data"]="Record updated successfully";
  print json_encode($resp);
  ?&gt;
  </code></pre>
  
  <p>This is the response which I get when directly put the url in address bar </p>
  
  <p><a href="https://i.stack.imgur.com/5aHY4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5aHY4.png" alt="enter image description here"></a></p>
  
  <p>Below is the screenshot of chrome's network tab </p>
  
  <p><a href="https://i.stack.imgur.com/gE1bu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gE1bu.png" alt="enter image description here"></a></p>