Introduction

This article introduces how we can call a Web Service using simple JavaScript and
AJAX. This article discusses the client side aspect. For server side aspect and source
code please visit this link

Background

We can consume a web service from html page using:

1. webservice.htc approach for Internet Explorer (something like this: we include

above behaviour file like this
<div id="handle" style=" behavior: url(webservice.htc);"></div>
and call the methods on above div using handle.useService(SERVICE_URL +
"?WSDL", "MyFunction");)
2. var oSoapCall = new SOAPCall() kind of approach for Firefox.
3. Universal approach where we make our own raw XML Soap request and send
this request, collect the response and parse it like raw XML. Somewhat like
this:

Collapse Copy Code

//create a soap request in xml

var soapRequest = "<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/\">\n"
+ "<soap:Body>\n"
+ "<" + sMethod + "xmlns=\""
+ SOAP_ACTION_BASE + "\">\n"
+ "<op1>" + sOp1 + "</op1>\n"
+ "<op2>" + sOp2 + "</op2>\n"
+ "</" + sMethod + ">\n"
+ "</soap:Body>\n"
+ "</soap:Envelope>\n";
//create a soap header
var sSoapActionHeader = SOAP_ACTION_BASE + "/" + sMethod;
crreat a request
oXmlHttp.open("POST", SERVICE_URL, true);
//when request is made, handle it appropriately
oXmlHttp.onreadystatechange = function(){//call appropriate method};

//set various headers for the request

oXmlHttp.setRequestHeader("Content-Type", "text/xml");
oXmlHttp.setRequestHeader("SOAPAction", sSoapActionHeader);
//send the request
oXmlHttp.send(sRequest);

Having said the above things, here's an example how we can call the web
service. This approach relates a little bit to the 3rd approach above, however
for convenience, I have enabled http communication for my web service here.
This gives my web service the ability to communicate using HTTP Post and
HTTP Get. For this - following code should be added to the system.web
section of web.config:
 Collapse Copy Code

<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>

Above step will enable GET and POST interaction with our web service class.
This saves me the time to create a xml soap like I created above and make
HTTP request instead of SOAP request. Further, there are multiple
workarounds and approaches for this as well. For one clue, please see the
server side article.

Using the Code

Once you do the above thing, fetching a response from web service becomes
very simple. Following is the code for fetching the response.

Collapse Copy Code

var xmlDoc;
var http = new XMLHttpRequest();
var isFirefox = false;

function callGetLatestPoll()
{
if(xmlDoc!=null)return;
if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = fetchforfirefox;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4){isFirefox = false;
fetchlatestpoll();}
};
}
else
{
alert("Your browser do not support the script for polling
service.");
return;
}
xmlDoc.load("http://localhost/poll/PollService.asmx/GetLatestPoll");
}

function fetchlatestpoll()
{
// code for reading and displaying data for internet explorer
b1 = xmlDoc.documentElement;
 document.getElementById("txtId").innerText =
b1.childNodes.item(0).text;
..............
.................
}

function fetchforfirefox()
{
isFirefox=true;
//code for reading and displaying data for firefox
b1 = xmlDoc.childNodes.item("PollServiceBO");

for(var temp1 = 0; temp1<b1.childNodes.length;temp1++)

{
if(b1.childNodes.item(temp1).childNodes.item(0)!=null)
{
var currentNode = b1.childNodes.item(temp1);
switch(currentNode.nodeName)
{
case "ID":
alert(currentNode.nodeName + " is Set");
document.getElementById('txtId').innerHTML =
currentNode.childNodes.item(0).nodeValue;
break;
.......
.........
}
}

Above thing is simple. My WebService is PollService.asmx and my

WebMethod is GetLatestPoll. It will return an object called
PollServiceBO which looks like below:

Collapse Copy Code

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

- <PollServiceBO xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns="http://tempuri.org/">
<ID>106</ID>
<Question>Test question1?</Question>
<option1>Test option1</option1>
<option2>Test option2</option2>
<option3>Test option3</option3>
<option4>Test option4.</option4>
<dateAdded>2008-07-17T16:39:04.49</dateAdded>
</PollServiceBO>

The real thing is how we post the data when a web service takes a parameter
as input. So here is the code for it:

Collapse Copy Code

var xmlDoc;
var http =null;
var isFirefox = false;

function callPostMethod()
 {
var url = "http://localhost/poll/PollService.asmx/GetPollById";
var params = "PollId=106";

try
{
// Firefox, Opera 8.0+, Safari
http =new XMLHttpRequest();
isFirefox = true;
}
catch (e)
{
// Internet Explorer
try
{
http =new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
http =new ActiveXObject("Microsoft.XMLHTTP");
}
}

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

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state
changes.
if(http.readyState == 4 && http.status == 200) {
xmlDoc = http.responseXML;
if(isFirefox)
{fetchforfirefox();}
else
{fetchlatestpoll();}
}
}
http.send(params);

Yes you got the point right! the above code calls the webservice
PollService.asmx method GetPollById using HTTP post method and the
parameter passed to this service is PollId.

Note: For further discussion on server side aspects and source code please
view: HTML UI using Web Service..

License