Wcf calling by javascript and ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Complex Type AJAX Service Client Page</title>

    <script type="text/javascript">
    // <![CDATA[
    // This function creates an asynchronous call to the service
    function makeCall(){
        var n1 = document.getElementById("num1").value;
        var n2 = document.getElementById("num2").value;
        // If user filled out these fields, call the service
        if(n1 && n2){
            // Instantiate a service proxy
            var proxy = new ComplexTypeAjaxService.ICalculator();
            // Call DoMath operation on proxy
            proxy.DoMath(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

    // This function is called when the result from the service call is received
    function onSuccess(mathResult){
        document.getElementById("sum").value = mathResult.sum;
        document.getElementById("difference").value = mathResult.difference;
        document.getElementById("product").value = mathResult.product;
        document.getElementById("quotient").value = mathResult.quotient;

    // This function is called if the service call fails
    function onFail(){
        document.getElementById("sum").value = "Error";
        document.getElementById("difference").value = "Error";
        document.getElementById("product").value = "Error";
        document.getElementById("quotient").value = "Error";
    // ]]>

        Complex Type AJAX Service Client Page</h1>
        First Number:
        <input type="text" id="num1" /></p>
        Second Number:
        <input type="text" id="num2" /></p>
    <input id="btn" type="button" onclick="return makeCall();" value="Perform calculation" />
        <input type="text" id="sum" /></p>
        <input type="text" id="difference" /></p>
        <input type="text" id="product" /></p>
        <input type="text" id="quotient" /></p>
    <form id="mathForm" action="" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
            <asp:ServiceReference Path="service.svc" />

here is the c# code of service

//  Copyright (c) Microsoft Corporation.  All Rights Reserved.

using System.Runtime.Serialization;
using System.ServiceModel;

namespace Microsoft.Ajax.Samples 
    // Define a service contract.
    [ServiceContract(Namespace = "ComplexTypeAjaxService")]
    public interface ICalculator
        MathResult DoMath(double n1, double n2);

    public class CalculatorService : ICalculator
        public MathResult DoMath(double n1, double n2)
            MathResult mr = new MathResult();
            mr.sum = n1 + n2;
            mr.difference = n1 - n2;
            mr.product = n1 * n2;
            mr.quotient = n1 / n2;
            return mr;

    public class MathResult
        public double sum;

        public double difference;

        public double product;

        public double quotient;


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>