AJAX TO WEB SERVICES INTEGRATION

1. Create HTML/JavaScript file and put below ajax code where you want to call WebService

      $.ajax({
    type: "POST",
    url: "../WebServices/MyWebService.aspx/MyFunction",
    data: "{parameter1 :" + parameter1 + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(r){ 
       //do Something on success 
    },
    error: function(r){
        //do something on error
    },
    failure: function(r){
        //do something on failure
    }
});

2. Create Web Service(MyWebService.asmx)

3. Uncomment [System.Web.Script.Services.ScriptService], to access the web service  from client side

4. Add function in web service

      [WebMethod]
public string MyFunction(string parameter1)
{
    try
    {
        return "Hello " + parameter1;
    }
    catch(Exception e)
    {
        return "Error";
    }
}

***

To Show Loader Between Request & Response in AJAX

      $(document).ready(function(){
        $(document).ajaxStart(function(){
                $("#wait").css("display", "block");
        });
        $(document).ajaxComplete(function(){
                $("#wait").css("display", "none");
        });
});

#Note: Here #wait is some loading element.