Home > Development > How to call WebService via JavaScript

How to call WebService via JavaScript

January 13th, 2009
Goto comments Leave a comment
  1. Get webservice.htc (eg. from here),
  2. Copy it to the same directory as the Web page that uses the behavior. By placing the webservice.htc file in the same directory as your HTML page that calls it, you avoid any DHTML behavior-related cross-domain security issues,
  3. Attach WebService behaviour to an element using the STYLE attribute f.e.: 
    <body id="webServiceCaller" STYLE="behavior:url(webservice.htc)"></body>
  4. Establish friendly name for WebService: 
    <script language="JavaScript" type="text/javascript">
function loadService()
{
	webServiceCaller.useService("http://address.to.your.service/YourService.wsdl", "MyService");
}
</script>
  5. Load service with page load: 
    <body id="webServiceCaller" STYLE="behavior:url(webservice.htc)" onload="loadService()">
//...
</body>
  6. Create handler for WebService result: 
    function handleResult (result)
{
	if (!result.error)
	{
		alert("Success! Result: " + result.value);
	}
	else
	{
		alert("Failed! Error: " + result.errorDetail.string);
	}
}
  7. Call WebService method:
    • Asynchronous 
      function myMethodAsync()
{
	callID = webServiceCaller.MyService.callService(handleResult, "MyMethod", "Asynchronous Call");
}

      result.id should be identical to the integer returned by the myMethodAsync() method.

    • Synchronous 
       function myMethodSync()
 {
	var co = webServiceCaller.createCallOptions();
	co.funcName = "MyMethod";
	co.async = false;
	var oResult = webServiceCaller.echo.callService(co, "Synchronous Call");
	handleResult (oResult);
 }

      For synchronous call you can use onserviceavailable event f.e. for disable buttons or other controls.

    You don’t have to specify result handler, you can insteed handle the onresult event in webServiceCaller.

  8. Whole code listing: 
    <header>
 <script language="JavaScript" type="text/javascript">
 function loadService()
 {
	webServiceCaller.useService("http://address.to.your.service/YourService.wsdl", "MyService");
 }
 
 function handleResult (result)
 {
	if (!result.error)
	{
		alert("Success! Result: " + result.value);
	}
	else
	{
		alert("Failed! Error: " + result.errorDetail.string);
	}
 }
 
 function myMethodAsync()
 {
	callID = webServiceCaller.MyService.callService(handleResult, "MyMethod", "Asynchronous Call");
 }
 </script>
</header>
<body id="webServiceCaller" style="behavior:url(webservice.htc)">
 <button id="callAsynch" onclick="myMethodAsync()">Call Asynchronously</button>
</body>

Based on: Web Services: Calling Service Methods
About WebServices: MSDN: About the WebService Behavior

Łukasz Majta Development ,

  1. Robert
    February 17th, 2010 at 11:22 | #1
    Reply | Quote

    I am trying to make your code work with this web service url:

    http://www.hendricksongroup.com/services/WebService.asmx?WSDL

    its a simple service that returns a current date and time. Can you help me out with this….

  1. No trackbacks yet.