calling Web Services on client side

Steps to call webservice using Ajax or JavaScript:

Step 1: Create XMLHttpRequest object. Given below method returns proper XMLHttpRequest object depending upon browser:

function CreateXMLHttpRequest() {
        if (typeof XMLHttpRequest != "undefined"){
            //All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) uses XMLHttpRequest object
            return new XMLHttpRequest();
     }
        else if (typeof ActiveXObject != "undefined") {
            // Internet Explorer (IE5 and IE6) uses an ActiveX object
            return new ActiveXObject("Microsoft.XMLHTTP");
     }
        else {
            throw new Error("XMLHttpRequestnot supported");
     }
    }

Step 2: Call open method and pass proper parameter as per the requirement

var objXMLHttpRequest = CreateXMLHttpRequest(); //Create XMLHttpRequest object
objXMLHttpRequest.open("POST", <serviceUrl>, false);

Open method accept three parameters, They are mentioned below:

method - Type of request, it can be GET or POST.
serviceUrl - Url of the webservice or page URL.
isAsync - It will be either 'true' or 'false'. Pass true to make asynchronus webservice call.

// Add mentioned below code if your application calls webservice Asynchronously.
objXMLHttpRequest.onreadystatechange = function (){
       if (objXMLHttpRequest.readyState ==4 && objXMLHttpRequest.status == 200){
             result = objXMLHttpRequest.responseXML;
       }
}

Step 3: Use "setRequestHeader" method to set header of the Http request. For example suppose we have to pass XML data to call webservice. Use mentioned below code:

objXMLHttpRequest.setRequestHeader("Content-Type","text/xml; charset=utf-8");

Note: Suppose you do not have to pass any thing in send method then no need set content-type.

Step 4: Finally we have to prepare packet and call send method. Be careful while creating packet because you make small mistake that can waste a lots of time in debugging.

var packet = '<?xml version="1.0" encoding="utf-8" ?>
    <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

   <WebMethodName xmlns="<Webservice Namespace>">

  <ParameterName>value</ParameterName>

  <ParameterName>value</ParameterName >

  <ParameterName>value</ParameterName>

  </WebMethodName>

     </soap:Body>  </soap:Envelope>';

We need to replace highlighted text with the proper value in the above packet before sending the xml http request. Purpose highlighted text are mentioned below:

WebMethodName - Webmethod name and method name is case sensitive.
<Webservice Namespace> - Namespace of webservice "http://SampleWebservice.com/"
e.g:[WebService(Namespace = "http://SampleWebservice.com/")]
ParameterName - Parameter Name of webmethod and its value
        objXMLHttpRequest.send(packet);

// Add mentioned below code if your application calls webservice synchronously.
       result = objXMLHttpRequest.responseXML;

Now we know how to call webservice using Ajax or JavaScript. Mentioned below sample code of a simple webservice and web-method call using Ajax.

Sample webservice code:

/// <summary>
/// Summary description for SampelWebservice
/// </summary>
[WebService(Namespace= "http://SampleWebservice.com/")]
[WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SampelWebservice: System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld(string text)
    {
        return text;
    }
}

Sample Code for webservice call:

var objXMLHttpRequest = CreateXMLHttpRequest();

objXMLHttpRequest.open("POST", "http://localhost/SampleWebservice.asmx", true);

objXMLHttpRequest.setRequestHeader("SOAPAction","http://SampleWebservice.com/HelloWorld");

var packet = '<?xml version="1.0"encoding="utf-8" ?>

      <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

  <soap:Body>

   <HelloWorld xmlns="http://SampleWebservice.com/">

  <text> Asynchronous webservice call using Ajax</text>

  </WebMethodName>

     </soap:Body>

     </soap:Envelope>';



objXMLHttpRequest.onreadystatechange = function(){

       if (objXMLHttpRequest.readyState == 4 && objXMLHttpRequest.status == 200) {

            result= objXMLHttpRequest.resposeXML;

        }

}

objXMLHttpRequest.send(packet);

I hope, it will help you understand use of Ajax.