Consuming Services from Client Side JavaScript (Part I)

Many frameworks allow you to easily call a server side service from JavaScript directly, services are called asynchronously from JavaScript so when you call any service method from JavaScript you can supply two extra parameters to the method in addition to the original method parameters, the first one is the name of a javascript function that will be called once the result of the service method is received, and the second one will be called incase an error happened on the server.

In this post i will explore the options available to consume a service from client side JavaScript.

- Calling a page method: ASP.NET AJAX allows you to call public static methods available on your aspx page directly from JavaScript, you have to mark these methods with the [WebMethod] attribute and set the EnablePageMethods property of the script manager control to true. the following example demonstrates this

//Default.aspx.cs
[System.Web.Services.WebMethod]
public static string GetTemprature(string city)
{
     switch (city)
     {
        case "Riyadh":
            return "30";
        case "Jeddah":
            return "28";
        case "Makkah":
            return "34";
        default:
            return "";
    }
}

<!--default.aspx-->
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:DropDownList runat="server" ID="cmbCities">
    <asp:ListItem Selected="True" Value="Riyadh">Riyadh</asp:ListItem>
    <asp:ListItem Value="Jeddah">Jeddah</asp:ListItem>
    <asp:ListItem Value="Makkah">Makkah</asp:ListItem>
</asp:DropDownList>
<input type="button" value="Get Temprature From Page Method" onclick="GetTempraturePageMethod();" /><br />
<script type="text/javascript">
    function GetTempraturePageMethod() {
        PageMethods.GetTemprature($get('<%=cmbCities.ClientID %>').value,
    GetTempraturePageMethodOnSuccess);
    }
    function GetTempraturePageMethodOnSuccess(result) {
        alert(result);
    }
</script>

- Calling a web service method: to call a method from a web service you must reference the service from the script manger control and your web service must have the attribute [ScriptService] so that a JavaScript proxy for your service can be automatically generated for you

<!--WeatherWebService.asmx-->
<%@ WebService Language="C#" Class="WeatherWebService" %>

[System.Web.Services.WebService(Namespace = "ClientScriptServices")]
[System.Web.Services.WebServiceBinding(ConformsTo = System.Web.Services.WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WeatherWebService : System.Web.Services.WebService
{
    [System.Web.Services.WebMethod]
    public string GetTemprature(string city)
    {
        switch (city)
        {
            case "Riyadh":
                return "30";
            case "Jeddah":
                return "28";
            case "Makkah":
                return "34";
            default:
                return "";
        }
    }
}

<!--default.aspx-->
 <asp:ScriptManager ID="ScriptManager" runat="server" >
    <Services>
        <asp:ServiceReference Path="~/WeatherWebService.asmx" />
    </Services>
</asp:ScriptManager>
<asp:DropDownList runat="server" ID="cmbCities">
    <asp:ListItem Selected="True" Value="Riyadh">Riyadh</asp:ListItem>
    <asp:ListItem Value="Jeddah">Jeddah</asp:ListItem>
    <asp:ListItem Value="Makkah">Makkah</asp:ListItem>
</asp:DropDownList>
<br />
<input type="button" value="Get Temprature from Web Service"
 onclick="GetTempratureWS();" /><br />
<script type="text/javascript">
    function GetTempratureWS() {
        WeatherWebService.GetTemprature($get('<%=cmbCities.ClientID %>').value,
        GetTempratureWSOnSuccess);
    }
    function GetTempratureWSOnSuccess(result) {
        alert(result);
    }
</script>

- Calling a WCF service: you can call a WCF service from using AJAX in the same way you call a web service

namespace ClientScriptServices
{
    [ServiceContract(Namespace = "WeatherWCFService")]
    public interface IWeatherWCFService
    {
        [OperationContract]
        string GetTemprature(string city);
    }
    public class WeatherWCFService : IWeatherWCFService
    {
         public  string GetTemprature(string city)
         {
             switch (city)
             {
                 case "Riyadh":
                     return "30";
                 case "Jeddah":
                     return "28";
                 case "Makkah":
                     return "34";
                 default:
                     return "";
             }
         }
    }
}

<!--default.aspx-->
 <asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WeatherWCFService.svc" />
    </Services>
</asp:ScriptManager>
<asp:DropDownList runat="server" ID="cmbCities">
    <asp:ListItem Selected="True" Value="Riyadh">Riyadh</asp:ListItem>
    <asp:ListItem Value="Jeddah">Jeddah</asp:ListItem>
    <asp:ListItem Value="Makkah">Makkah</asp:ListItem>
</asp:DropDownList>
<br />
 <input type="button" value="Get Temprature from WCF Service"
 onclick="GetTempratureWCF();" /><br />
<script type="text/javascript">
    function GetTempratureWCF() {
        var wcfService = new WeatherWCFService.IWeatherWCFService();
        wcfService.GetTemprature($get('<%=cmbCities.ClientID %>').value,
        GetTempratureWCFOnSuccess);
    }
    function GetTempratureWCFOnSuccess(result) {
        alert(result);
    }
</script>

You can download a sample web application from here

In the next post i will discuss how to use JavaScript Object Notation and WCF to send and receive complex object types