title: jQuery Ajax failing while server side function throws no errors
body: <p>I'm trying to test out getting the details for a book from the isbndb <a href="http://isbndb.com/api/v2/docs/books" rel="nofollow noreferrer">API</a>, but I can't tell where the AJAX is failing.</p>
  
  <p>The ajax sends my data properly, and I'm getting valid JSON, but it still defaults to failed. Right now all I have set up is a button to call the Ajax function with some server side code.</p>
  
  <p>Client side:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddBook.aspx.cs" Inherits="AddBook" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          $("#testBtn").click(function () {
              BookDetails();
          });
  
          function BookDetails() {
              var isbn = '084930315X';
              $.ajax({
                  type: "POST",
                  url: "AddBook.aspx/GetBookJson",
                  data: JSON.stringify({
                      isbnStr: isbn
                  }),
                  contentType: "application/json; charset=utf - 8",
                  dataType: "text",
                  success: function (data) {
                      console.log("Success");
                  },
                  error: function (xhr, textStatus, err) {
                      console.log("readyState: " + xhr.readyState);
                      console.log("responseText: " + xhr.responseText);
                      console.log("status: " + xhr.status);
                      console.log("text status: " + textStatus);
                      console.log("error: " + err);
                  }
              });
              return false;
          }
      });
  
  &lt;/script&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;button id="testBtn"&gt;Test&lt;/button&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>C# Server Side:</p>
  
  <pre><code>public partial class AddBook : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
  
      }
  
      [WebMethod]
      public static string GetBookJson(String isbnStr) {
          string accessKey = System.Configuration.ConfigurationManager.AppSettings["isbnKey"];
          string url = "http://isbndb.com/api/v2/json/" + accessKey + "/book/" + isbnStr;
          HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
          try
          {
              WebResponse response = request.GetResponse();
              //Returning a random string from this point on fails 
              using (Stream responseStream = response.GetResponseStream())
              {
                  StreamReader reader = new StreamReader(responseStream, Encoding.UTF8);
                  string json = reader.ReadToEnd();
                  Debug.WriteLine(json);
                  Debug.WriteLine(IsValidJson(json));
                  response.Close();
                  return json;
              }
          }
          catch (WebException ex) {
              WebResponse errorResponse = ex.Response;
              using (Stream responseStream = errorResponse.GetResponseStream())
              {
                  StreamReader reader = new StreamReader(responseStream, Encoding.GetEncoding("utf-8"));
                  String errorText = reader.ReadToEnd();
              }
              throw;
          }
      }
  }
  </code></pre>
  
  <p>I'm getting the expected data, but the ajax function still fails. Something that I noticed is that if I return any random string before <code>WebResponse response = request.GetResponse();</code>it works, but after that any return fails. </p>
  
  <p>This is what the console log looks like after the function:</p>
  
  <pre><code>readyState: 0
  responseText: undefined
  status: 0
  text status: error
  error: 
  </code></pre>
  
  <p>This is what the browser inspector says is being returned from AddBook.aspx</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;title&gt;
  
  &lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          $("#testBtn").click(function () {
              BookDetails();
          });
  
          function BookDetails() {
              var isbn = '084930315X';
              $.ajax({
                  type: "POST",
                  url: "AddBook.aspx/GetBookJson",
                  data: JSON.stringify({
                      isbnStr: isbn
                  }),
                  contentType: "application/json; charset=utf-8",
                  dataType: "text",
                  success: function (data) {
                      console.log("Success");
                  },
                  error: function (xhr, textStatus, err) {
                      console.log("readyState: " + xhr.readyState);
                      console.log("responseText: " + xhr.responseText);
                      console.log("status: " + xhr.status);
                      console.log("text status: " + textStatus);
                      console.log("error: " + err);
                  }
              });
              return false;
          }
      });
  
  &lt;/script&gt;
  &lt;body&gt;
      &lt;form method="post" action="./AddBook.aspx" id="form1"&gt;
  &lt;div class="aspNetHidden"&gt;
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="csndqHGqCjV0yNjPCmX8StYTzGC9tkdlWq6Tf8wZm/tZT5H0BPu9j0fkMOGgYc1JKa7vYUSHL6y8W2yNhlnSQYtpNmQYmNjyc4nK7GscTWo=" /&gt;
  &lt;/div&gt;
  
      &lt;div&gt;
          &lt;button id="testBtn"&gt;Test&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;div class="aspNetHidden"&gt;
  
      &lt;input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="9EBD5A71" /&gt;
  &lt;/div&gt;&lt;/form&gt;
  
  &lt;!-- Visual Studio Browser Link --&gt;
  &lt;script type="application/json" id="__browserLink_initializationData"&gt;
      {"appName":"Chrome","requestId":"e9fcf5f91ca2450fbdca3f4792d459c5"}
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:52701/9d4e084ff4ea45fe8553128639949211/browserLink" async="async"&gt;&lt;/script&gt;
  &lt;!-- End Browser Link --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>