Calling Web Services from Javascript

One of the most powerful features of ASP.Net AJAX is the ability to call server side web services seamlessly from plain Javascript. There is nothing special that needs to be done to create a web service that can be called from JavaScript apart from adding the "ScriptService" attribute at the beginning of the web service declaration. We can use ASMX as well as WCF web services with ASP.Net AJAX. Let's take a look at the steps needed to call web services with AJAX.

• Server side

On the server side, we will create a normal ASMX web service.

1. Right click your project in Visual Studio and click "Add new item". In the dialog that opens up, select "Web service" and give it an appropriate name
2. Once the web service has been added, open it's .cs file. At the very top, before the class declaration there will be the following commented attribute

[System.Web.Script.Services.ScriptService]

Uncomment this attribute.

3. Add the methods you want to call from the client side and annotate them with the [WebMethod] attribute
4. Test the web service and ensure that the web methods are working fine

• Client side

On the client side, we will need to do the following to be able to call the web service created in the above steps

1. Add a ScriptManager tag at the top of your page. The script manager is required on every page that should provide AJAX functionality. It instantiates the PageRequestManager class and handles the downloading of all the necessary script and service proxy files. (If you are using master pages and the ScriptManager is present in the master page, you can add a ScriptManagerProxy tag to the current page)
2. Within the ScriptManager tag, add a ServiceReference and provide the path to the web service. It should look something like this,
<services>
<asp:servicereference path="~/Sample.asmx">
</services>
</asp:scriptmanager>

Here, I am adding a reference to a web service named "Sample.asmx" which is present in the same project. What happens under the hood is that, for each service that you reference with the ServiceReference tag, a proxy is created and downloaded on the client side and this proxy is used to validate the calls from JavaScript to the web service.

3. Once this is done, we can call a web method from JavaScript as follows :

WebServiceClass.WebMethod(parameters, Success Callback function, Failure callback function, context);

parameters : We can specify as many as needed, or even 0, parameters to be passed to the web method, each separated from the other by comma

Success Callback function : We specify name of the JavaScript function that will be called when the web method completes execution

Failure Callback function : We specify name of the JavaScript function which will be called in case the web method encountered some error during execution

context : This is an optional string value that we can provide. It is used in case we are using the same JavaScript function as callback for multiple web methods so that in the JavaScript function, we can determine the web method call for which the callback was invoked.

4. The final step is to code the success and failure callbacks, syntax for which is as follows :

function SuccessCallback(response, context, method)

function FailureCallback(error, context, method)

Here,

response : It contains the values returned by the web method. It can be as simple as an integer or a string or as complex as JSON representation of List or even a custom object. The values can be accessed using the normal object.property syntax.

error : Object representing the error that occurred in the web method. The most useful method of this object is get_message() which returns a description of the error that occurred

context : Optional value, which will have the same value as provided as the last parameter when calling the web method

method : Name of the web method from which the current JavaScript function has been invoked

Having the ability to call web services asynchronously from the client provides tremendous flexibility as well as performance advantages to the programmers and allows us to create really powerful and performant sites with ease.