Wcf REST And xmlHttpRequest:-

Using  wcf REST(Representational state transfer) services client can directly communicate with the service without creating proxy.We can get the response data either in json or xml by specifying the WebMessageFormat.Json or WebMessageFormat.Xml respectively in WebGet attribute.

Wcf Service:-

namespace RESTWcf

{

    public class ServiceRest : IRest

    {

        public Person Get(string name, string age)

        {

            //return the person object

            return new Person() { Name = name, Age = age };

        }

        public void Invoke(string value)

        {

        }

    }

}

namespace RESTWcf

{

    [ServiceContract]

    public interface IRest

    {

        [WebGet(ResponseFormat = WebMessageFormat.Json, UriTemplate = "Get/?name={name}&age={age}")]

        [OperationContract]

        Person Get(string name, string age);

        [WebInvoke(ResponseFormat = WebMessageFormat.Json, UriTemplate = "Invoke/{value}")]

        [OperationContract]

        void Invoke(string value);

    }

    [DataContract]

    public class Person

    {

        [DataMember]

        public string Name { get; set; }

        [DataMember]

        public string Age { get; set; }

    }

}

<system.serviceModel>

 <services>

    <service name="RESTWcf.ServiceRest"            behaviorConfiguration="serviceBehaviour"         >

      <endpoint address="" binding="webHttpBinding"      contract="RESTWcf.IRest" behaviorConfiguration="webHttpb"></endpoint>

    </service>

 </services>

 <behaviors>

      <endpointBehaviors>

        <behavior name="webHttpb">

          <webHttp/>

        </behavior>

      </endpointBehaviors>

      <serviceBehaviors>

        <behavior name="serviceBehaviour">

          <serviceMetadata httpGetEnabled="true" />

          <serviceDebug includeExceptionDetailInFaults="true" />

        </behavior>

      </serviceBehaviors>

 </behaviors>

</system.serviceModel>

Javascript File:-

function get() {

            //XMLHttpRequest object

            var xmlHttp = new XMLHttpRequest();

            //result handler

            xmlHttp.onreadystatechange = function () {

                if (xmlHttp.readyState == 4) {

                    //alert the reponse

                    alert(xmlHttp.responseText);

                }

            }

            //error handler

            xmlHttp.onerror = function (e) {

                //alert error

                alert('error');

            }

            //url of the service

            var url = "http://localhost:1094/ServiceRest.svc/Get/?name=abc&age=123";

            //the method type must be GET for accessing WebGet methods

            xmlHttp.open("GET", url, true);

            //send the request

            xmlHttp.send();

        }

        function invoke() {

            //XMLHttpRequest object

            var xmlHttp = new XMLHttpRequest();

            //result handler

            xmlHttp.onreadystatechange = function () {

                if (xmlHttp.readyState == 4) {

                    //alert the reponse

                    alert(xmlHttp.responseText);

                }

            }

            //error handler

            xmlHttp.onerror = function (e) {

                //alert error

                alert('error');

            }

            //url of the service

            var url = "http://localhost:1094/ServiceRest.svc/Invoke/abc";

            //the method type must be POST for accessing WebInvoke methods

            xmlHttp.open("POST", url, true);

            //send the request

            xmlHttp.send();

        }

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com