Beruflich Dokumente
Kultur Dokumente
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
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.
Once you do the above thing, fetching a response from web service becomes
very simple. Following is the code for fetching the response.
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");
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:
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");
}
}
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