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);  

                       } 


<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> 


[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;  

      }