Call a web service from HTML

Goal :
The goal for this post is to know how exactly we call a web service in html page (Service and HTML should be hosted in the same server).

Pre-Requisites :

• There should be a web service which is hosted in the server. 
• One should have knowledge on what are the parameters to be sent to call a web service or at least know how to use a SOAP UI to call a web service.
• Basic html knowledge.

Explanation :

• Know the web service to be called

You have to know the parameters of the web service to be called. Below are the parameters which are to be known (Assuming the web service is in the same server where the html file is being developed),
1. End point
2. SOAP Request
3. Content Type

If the above parameters are not known these can be taken from soap UI or from Fiddler as shown below

Below picture gives a brief idea on how to get End Point and SOAP Request from SOAP UI

Below picture gives information on how to get End Point, SOAP Request and Content Type from Fiddler.

There are other ways of getting these information like network tab of chrome's developer tools etc., These are just few ways of getting these information. However the goal here is to get the parameters not how do we get. Once we have this information we go ahead by writing simple html page.

• Write a simple HTML Page

Below is the sample page how do we write it.

• Write a function which calls a web service and display it on the browser

function soap() {

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.open('POST', 'http://dhl-hyd1024/cordys/com.eibus.web.soap.Gateway.wcp?', true);

            // build SOAP request

            var sr =             

                '<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">'+

'<SOAP:Body>'+

                        '<sty:GetXMLObject xmlns:sty="http://schemas.cordys.com/1.0/xmlstore">' +

                            '<sty:key version="isv">/OAuthIntegration/RedirectorContent.xml</sty:key>' +

                        '</sty:GetXMLObject>' +

' </SOAP:Body>'+

'</SOAP:Envelope>';

xmlhttp.setRequestHeader('Content-Type', 'text/xml');

            xmlhttp.send(sr);

            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4) {

                    if (xmlhttp.status == 200) {

document.getElementById('responseXML').innerHTML = xml_to_string(xmlhttp.responseXML);

                        alert('done use firebug to see response');

                    }

                }

            }

        }

Note : xml_to_string here is a function which is irrelevant here.

Highlighted sections are variable parameters (important variable parameters). These parameters should be replaced by the parameters what we have collected in the previous sections.

However this way of communication is not JQuery based which I would suggest to use in order to be in recent industrial terms.