Edit

AJAX Service with JSON and XML Sample

  • Article

The XmlAjaxService sample demonstrates how to use Windows Communication Foundation (WCF) to create an Asynchronous JavaScript and XML (AJAX) service that returns either JavaScript Object Notation (JSON) or XML data. You can access an AJAX service by using JavaScript code from a Web browser client. This sample builds on the Basic AJAX Service sample.

Unlike the other AJAX samples, this sample does not use ASP.NET AJAX and the ScriptManager control. With some additional configuration, WCF AJAX services can be accessed from any HTML page through JavaScript, and this scenario is shown here. For an example of using WCF with ASP.NET AJAX, see AJAX Samples.

This sample shows how to switch the response type of an operation between JSON and XML. This functionality is available regardless of whether the service is configured to be accessed by ASP.NET AJAX or by an HTML/JavaScript client page.

Note

The setup procedure and build instructions for this sample are located at the end of this topic.

To enable the use of non-ASP.NET AJAX clients, use WebServiceHostFactory (not WebScriptServiceHostFactory) in the .svc file. WebServiceHostFactory adds a WebHttpEndpoint standard endpoint to the service. The endpoint is configured at an empty address relative to the .svc file; this means that the address of the service is http://localhost/ServiceModelSamples/service.svc, with no additional suffixes other than the operation name.

<%@ServiceHost language="c#" Debug="true" Service="Microsoft.Samples.XmlAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

The following section in Web.config can be used to make additional configuration changes to the endpoint. It can be removed if no extra changes are needed.

<system.serviceModel>
  <standardEndpoints>
    <webHttpEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name="" />
    </webHttpEndpoint>
  </standardEndpoints>
</system.serviceModel>

The default data format for WebHttpEndpoint is XML, while the default data format for WebScriptEndpoint is JSON. For more information, see Creating WCF AJAX Services without ASP.NET.

The service in the following sample is a standard WCF service with two operations. Both operations require the Wrapped body style on the WebGetAttribute or WebInvokeAttribute attributes, which is specific to the webHttp behavior and has no bearing on the JSON/XML data format switch.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathXml(double n1, double n2);

The response format for the operation is specified as XML, which is the default setting for the <webHttp> behavior. However, it is good practice explicitly specify the response format.

The other operation uses the WebInvokeAttribute attribute and explicitly specifies JSON instead of XML for the response.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathJson(double n1, double n2);

Note that in both cases the operations return a complex type, MathResult, which is a standard WCF data contract type.

The client Web page XmlAjaxClientPage.htm contains JavaScript code that invokes one of the preceding two operations when the user clicks the Perform calculation (return JSON) or Perform calculation (return XML) buttons on the page. The code to invoke the service constructs a JSON body and sends it using HTTP POST. The request is created manually in JavaScript, unlike the Basic AJAX Service sample and the other samples using ASP.NET AJAX.

// Create HTTP request
var xmlHttp;
// Request instantiation code omitted…
// Result handler code omitted…

// Build the operation URL
var url = "service.svc/ajaxEndpoint/";
url = url + operation;

// Build the body of the JSON message
var body = '{"n1":';
body = body + document.getElementById("num1").value + ',"n2":';
body = body + document.getElementById("num2").value + '}';

// Send the HTTP request
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.send(body);

When the service responds, the response is displayed without any further processing in a textbox on the page. This is implemented for demonstration purposes to allow you to directly observe the XML and JSON data formats used.

// Create result handler
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}

To set up, build, and run the sample

  1. Ensure that you have performed the One-Time Setup Procedure for the Windows Communication Foundation Samples.

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

  3. Navigate to http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (do not open XmlAjaxClientPage.htm in the browser from the project directory).

See also