How To Consume WCF Using AJAX Without ASP.NET
How to consume WCF services directly from Html client? How to add AJAX-like functionally to application that does not natively support ASP.NET AJAX like classic ASP, ASP.NET 1.1, or PHP?
WCF that ships with .Net 3.5 provides capability to consume it from any JavaScript enabled client via XML or JSON encoding. There is new built in webHttpBinding that supports either JSON or XML encoded messages to be sent to WCF services.The functionality can dramatically improve performance and user experience.
This post summarizes the steps to create and consume basic WCF service using webHttpBinding binding.
Summary of Steps
- Step 1 – Create WCF service.
- Step 2 – Configure WCF end point.
- Step 3 – Create JavaScript to invoke WCF service.
- Step 4 – Test the solution.
Next section describes each and every step in details
Step 1 – Create WCF service
Open Visual Studio and create new WCF service project by choosing "WCF Service Application" template under "Web" project type. Name it Wcf2Ajax. Open IService1.cs file and create OperationContract as follows:
1: [ServiceContract]
2: public interface IService1
3: {
4:
5: [OperationContract]
6: string Sum2Integers(int n1, int n2);
Open Service1.svc.cs file and add public method that accepts to integers and returns the sum of it. This is the functionality that will be exposed by the WCF service and consumed by JavaScript enabled client:
1: public class Service1 : IService1
2: {
3: public string Sum2Integers(int n1, int n2)
4: {
5: int result = num1 + num2;
6:
7: return result.ToString();
8: }
Step 2 – Configure WCF end point
Open web.config file and add <binding> section to <system.serviceModel section. Add <webHttpBinding> to binding section:
<system.serviceModel>
<bindings>
<webHttpBinding>
<binding name="AjaxBinding"/>
</webHttpBinding>
</bindings
Add AjaxBehavior to <behaviors> section to support WCF invocation via AJAX:
<behaviors>
<endpointBehaviors>
<behavior name="AjaxBehavior">
<enableWebScript/>
</behavior>
Configure WCF service's endpoint to use newly created binding:
<endpoint address="ajaxEndpoint"
behaviorConfiguration="AjaxBehavior"
binding="webHttpBinding"
bindingConfiguration="AjaxBinding"
contract="Wcf2Ajax.IService1">
Step 3 – Create JavaScript to invoke WCF service
Add Html file to the solution by right clicking on the solution node in solution explorer and choosing "New Item..." and then "HTML Page" template. Name it WCFConsumer.htm. Add few HTML controls - two text boxes to accept two integers, one pure HTML button to trigger WCF call, and <span> element to present the result:
<input type="text" id="num1" />
<input type="text" id="num2" />
<br>
<input type="button" onclick="CallWcfAjax()" value="Call WCF via AJAX" />
Result <span id="result"></span>
Add <script> block to <header> section and add JavaSctip that builds HTTP request and wires invocation function to some event, say button click:
<script type="text/javascript">
function CallWcfAjax()
{
var xmlHttp = new ActiveXObject("Microsoft.XmlHttp");
var url = "Service1.svc/ajaxEndpoint/";
url = url + "Sum2Integers";
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);
// Create result handler
xmlHttp.onreadystatechange= function X()
{
if(xmlHttp.readyState == 4)
{
result.innerText = xmlHttp.responseText;
}
}
}
</script>
Step 4 – Test the solution
Build the solution and navigate to WCFConsumer.htm. Provide two integers to both text boxes and hit "Call WCF via Ajax" button. You should expect for result similar as depicted below:
Parse the result to your needs.
My related post
- ASP.NET AJAX Control Toolkit - Basic Sample For DynamicPopulate Control
- AJAX Security - Client Side Validation Is For Usability Only, Not For Security
- WCF Security In Intranet Scenario : Thoughts On Cons and Pros
Related resources
Download Visual Studio 2008 project with the sample from my SkyDrive