Call WebService from javascript

This article shows how to call a web service from javascript.To understand this article better litle knowledge of following topics is required.
1)DHTML Behaviours : DHTML behaviours introduced with Microsoft Internet Explore (5.5).They are components which encapsulates specfic functionaly on a page. For more info check http://msdn.microsoft.com/en-us/library/ms531079.aspx .

2)Web Services: Web services are reusable components shared over net which can used by applications irrespective of platform & vendor.To understand the article one doesnt need to create a web service.Only thing is a web service is needed with some functionality.

To call web service we need a 'Web Service' DHTML behaviour.This behaviour provides methods like 'useService' & 'callService' to call web service.

For example say web service has a web method something like this ...

[WebMethod]
public string DemoMethod(string str)
{
return "From Web Service" + str;
}
//The method looks simple, takes a string as parameter & returns another string.
for instance say URl of the service is 'http://localhost/Service1.asmx' .
Now you hav a webservice which to be called in javascript.To call from javascript follow the following.

As i said before 'Web Service behaviour ' is needed to call the web service.This behaviour to be attached to a HTML Element on a web page.For instance say 'div' element.The mark up looks like this.
< id="Service1" style="BEHAVIOR: url(webservice.htc)" onresult="processResult()">

In the above markup id 'Service1' is required to call the methods 'useService' & 'callService' methods.Once behaviour is attached to the html elements all the members supported by the behaviour can be accessed throught the id of that element.

*Then style attribute is the where actually behaviour is attached to the element.For the current requirement we need web service behaviour ie 'webservice.htc '.For the above code should properly 'webservice.htc' file to be placed in the folder in which your web page resides.

The 'webservice.htc' file can be downloaded from MSDN website.

*Then 'onresult' attribute specifies the javascript method to be called after execution of the method is completed.In this method 'result' object preovides the result returned by web service.

After attaching the web service behaviour to html element on web page , the next step is to call methods of web service behaviour.The code looks like this ...

function init()
{//This method is called to map the web service url to friendly name which can be used later call methods in actual web service (*.asmx file)

//first parameter to the method is actual url of web service.second parameter specifies the friendly name to this url which can be used as reference to url.

//note that id given to the html element is used to
Service1.useService("http://localhost/Service1.asmx?WSDL","myService")

//This method calls the actual method in web service.The first is the name of the method in web service.the second parameter is parameter to web method.Call to these methods are asyncronuos.So when web method execution is completed then the method specified in 'onresult' attribute is called.In this method 'result' object provides the result sent by web service.
Service1.myService.callService("HelloWorld","From javascript ")
}

//Result method

function processResult(result)
{
if(result.error)
{//Checks for any error returned from web method
alert(result.errorDetail.string)
alert(result.errorDetail.code)
alert(result.errorDetail.raw)
}
else {
alert(result.value);
}
}

Now the init() method to be called in onload() event of the body.like

< onload="init()">

This means that web service is called when page is loaded.We can also call the web service on other events like button click.At that time 'callservice' method to be called in button click event.

But 'useservice' method to be called on 'onload' event of 'body'.

This article uses a simple web method which takes string as parameter & another string , but it can be any.

For more info on webservice behaviour check out

http://msdn.microsoft.com/en-us/library/ms531032.aspx &

http://msdn.microsoft.com/en-us/library/ms531033(VS.85).aspx