How to Implement Exception Handling in jQuery While Calling Web Service

If you are using an Ajax Web service call in jQuery and if you make a small syntax or typo mistake then it will be tedious to determine the exact root cause of the problem. Even if you debug in a browser it will not show the exact error message.

But if you write proper exception handling code in the jQuery web service call then you can easily determine the exact problem in your code.

Here we can implement exception handling in two ways.

Approach 1:

error: function (XMLHttpRequest, textStatus, errorThrown) {
                           var err = eval("(" + XMLHttpRequest.responseText + ")");
                           alert(err.Message)
                       }

Approach 2:

error: function (response) {
                           var r = jQuery.parseJSON(response.responseText);
                           alert("Message: " + r.Message);
                           alert("StackTrace: " + r.StackTrace);
                       }

The complete jQuery code will be like this:

<script type="text/javascript">
       $(function () {
           $("#txtEmpName").autocomplete({
               source: function (request, response) {
                   var param = { empName1: $('#txtEmpName').val() };
                   $.ajax({
                       url: "WebForm1.aspx/GetEmpNames",
                       data: JSON.stringify(param),
                       dataType: "json",
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       dataFilter: function (data) { return data; },
                       success: function (data) {
                           response($.map(data.d, function (item) {
                               return {
                                   value: item
                               }
                           }))
                       },

                       //Approach 1

                       error: function (XMLHttpRequest, textStatus, errorThrown) {
                           var err = eval("(" + XMLHttpRequest.responseText + ")");
                           alert(err.Message)

                       }

                       //Approach 2

                       //error: function (response) {
                       //    var r = jQuery.parseJSON(response.responseText);
                       //    alert("Message: " + r.Message);
                       //    alert("StackTrace: " + r.StackTrace);
                       //}
                   });
               },
               minLength: 2 //This is the Char length of inputTextBox
           });
       });
   </script>

The code behind file is like this:

[WebMethod]
      public static List<string> GetEmpNames(string empName)
      {
          List<string> Emp = new List<string>();
          string query = string.Format("SELECT EmpName FROM tblEmp WHERE EmpName LIKE '%{0}%'", empName);
          using (SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=Test;Integrated Security=True"))
          {
              using (SqlCommand cmd = new SqlCommand(query, con))
              {
                  con.Open();
                  SqlDataReader reader = cmd.ExecuteReader();
                  while (reader.Read())
                  {
                      Emp.Add(reader.GetString(0));
                  }
              }
          }
          return Emp;
      }

Note: If you observe in the code above I have given the parameter as EmpName but I am passing the parameter as empName1 to generate the exception. Now if you see the preceding exception then you can easily analyze it and determine the exact problem.

If you know a better approach then let me know.