pavanarya – Pavan Kumar Aryasomayajulu <br> My New Blog http://xyzcoder.com

Contact Email : pavan.aryasomayajulu@gmail.com

Calling WebServices That Has Soap Headers from Javascript Using XmlHttpRequest

with 3 comments

Hi this is an extension post to my previous post “Calling WebServices from javascript using XmlHttpRequest and in that post i am calling a plain web service.
Note:Please go through that post before reading this post.

So in this post i am just trying to call a web service using XmlHttpRequest from javascript but here i am making using of a web service that has custom soap headers.

In this post you can see how to create a web service with custom soap headers But there i am calling the web service from aspx page but in this post i am making using of html and plain js.

My WebServices code(MyWebService.asmx)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Diagnostics;

namespace SOAPHEADEREXAMPLE
{
    /// <summary>
    /// Summary description for MyWebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(Name = "Test", 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 TestSoapHeader : SoapHeader
    {
       public string username = "";
       public string password = "";
    }
    public class MyWebService : System.Web.Services.WebService
    {
        public TestSoapHeader soapHeadr;
        [WebMethod]
        [SoapHeader("soapHeadr", Required = true)]
        public string ShowBalance(string user)
        {

            string username = soapHeadr.username;
            string pass = soapHeadr.password;

            //Code to process balance
            return "Show Balance In Rupees";
        
        }
    }
}

Once we run the web service after creating it we can see list of methods on the browser. Click on the method that we want to call from javascript.Now we can see some soap xml formats corresponding to request and response. It looks something like this.

<?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:Header>
    <TestSoapHeader xmlns="http://tempuri.org/">
      <username>string</username>
      <password>string</password>
    </TestSoapHeader>
  </soap:Header>
  <soap:Body>
    <ShowBalance xmlns="http://tempuri.org/">
      <user>string</user>
    </ShowBalance>
  </soap:Body>
</soap:Envelope>

Calling the web method that has parameters from javascript
Now we are supposed to frame above xml in the javascript, replacing string with actual data we want to pass.
If we see above xml and the MyWebService.asmx.cs file we can see that the soap header class properties username and password were sent using tag and we are supposed to replace string in the above xml with string data we want to send.

In the same way Web method ShowBalance has a parameter called “user” and that parameter is sent as an inner tag for the tag .

Calling the web method from javascript

MyHtml.html

<!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">
<head>
    <title></title>
    <script type="text/javascript" >

        var xmlHTTP ;
         if (window.XMLHttpRequest) {
        xmlHTTP= new window.XMLHttpRequest;
    }
    else {
        try {
            xmlHTTP= new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            
        }
    }
xmlHTTP.open("POST", "http://localhost:1525/MyWebService.asmx",true);
xmlHTTP.setRequestHeader( "Content-Type","text/xml; charset=utf-8");
xmlHTTP.setRequestHeader(
"SOAPAction", "http://tempuri.org/ShowBalance");

strRequest = "<?xml version='1.0' encoding='utf-8'?>";
strRequest = strRequest + "<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/'>";
strRequest = strRequest + "<soap:Header>";
strRequest = strRequest + "<TestSoapHeader xmlns='http://tempuri.org/'>";
strRequest = strRequest + "<username>pavan</username>";
strRequest = strRequest + "<password>pavan@123</password>";
strRequest = strRequest + "</TestSoapHeader>";
strRequest = strRequest + "</soap:Header>";
strRequest = strRequest + " <soap:Body>";
strRequest =strRequest + "<ShowBalance " +
"xmlns='http://tempuri.org/' >  <user>pavan</user></ShowBalance>";
strRequest = strRequest + "</soap:Body>";
strRequest = strRequest + "</soap:Envelope>";


xmlHTTP.onreadystatechange = function () {
    if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
        alert(xmlHTTP.responseXML.xml);
    }
}
xmlHTTP.send(strRequest);

//alert(xmlHTTP.responseXML.xml);
//var resp = unescape(xmlHTTP.responseXML.xml);
    </script>
</head>
<body>

</body>
</html>

here we are framing a string that represents soap format of the web service we are planning to call. Then we are calling send method of xmllHttpRequest to call the web service.

Thanks,
Pavan

Written by pavanarya

May 26, 2012 at 11:06 pm

3 Responses

Subscribe to comments with RSS.

  1. nice article …

    Muraldhar

    July 11, 2012 at 8:30 am

  2. Awesome, threesome foursome explanation….

    Sandy

    September 26, 2012 at 4:27 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: