Basic AJAX Service

Download sample

This sample demonstrates how to use Windows Communication Foundation (WCF) to create a basic ASP.NET Asynchronous JavaScript and XML (AJAX) service (a service that you can access using JavaScript code from a Web browser client). The service uses the WebGetAttribute attribute to ensure that the service responds to HTTP GET requests and is configured to use the JavaScript Object Notation (JSON) data format for responses.

AJAX support in WCF is optimized for use with ASP.NET AJAX through the ScriptManager control. For an example of using WCF with ASP.NET AJAX, see the AJAX Samples.

In the following code, the WebGetAttribute attribute is applied to the Add operation to ensure that the service responds to HTTP GET requests. The code uses GET for simplicity (you can construct an HTTP GET request from any Web browser). You can also use GET to enable caching. HTTP POST is the default in the absence of the WebGetAttribute attribute.

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [OperationContract]
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

You can create an AJAX endpoint on the service by using the <webHttpBinding> standard binding and the <enableWebScript> behavior in the service configuration file.

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <services>
        <service name="Microsoft.Ajax.Samples.CalculatorService">
            <endpoint address=" "
                behaviorConfiguration="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior" 
                binding="webHttpBinding"
                contract="Microsoft.Ajax.Samples.ICalculator" />
        </service>
    </services>
</system.serviceModel>

The enableWebScript behavior sets the default data format for the service to JSON instead of XML. To invoke the service, navigate to https://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200 after completing the setup and build steps shown later in this topic. This testing functionality is enabled by the use of a HTTP GET request.

The client Web page SimpleAjaxClientPage.aspx contains ASP.NET code to invoke the service whenever the user clicks one of the operation buttons on the page. The ScriptManager control is used to make a proxy to the service accessible through JavaScript.

<asp:ScriptManager ID="ScriptManager" runat="server">
     <Services>
          <asp:ServiceReference Path="service.svc" />
     </Services>
</asp:ScriptManager>

The local proxy is instantiated and operations are invoked using the following JavaScript code.

// Code for extracting arguments n1 and n2 omitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation omitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

If the service call succeeds, the code invokes the onSuccess handler and the result of the operation is displayed in a text box.

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}

To set up, build, and run the sample

1. Ensure that you perform the setup instructions One-Time Set Up Procedure for the Windows Communication Foundation Samples.

2. Build the solution SimpleAjaxService.sln as described in Building the Windows Communication Foundation Samples.

3. Navigate to https://localhost/ServiceModelSamples/SimpleAjaxClientPage.aspx (do not open SimpleAjaxClientPage.aspx in the browser from the project directory).

© 2007 Microsoft Corporation. All rights reserved.