Consuming a Web service using Javascript

Question

Is there a way to consume a web service using Javascript? Looking for a built in way to do it, Javascript framework is not an option.

Thanks,

RWendi

Answer 1

You can use the XMLHttpRequest object, but since you don't want to use any JavaScript frameworks, you will have to marshal and unmarshal the SOAP envelopes yourself.

Answer 2

You can create an XMLHttpRequest if the service is hosted within your domain. If not, you will have cross-domain issues.

Answer 3

You can consume a web service using JavaScript natively using the XmlHttpRequest object. However instantiating this object varies between browsers. For example Firefox and IE 7+ let you instantiate it as a native JavaScript object but IE6 requires you to instantiate it as an ActiveX control.

Because of this I'd recommend using an abstraction library such as jQuery. If that's not an option then abstract the creation into a factory method and check for the browser version.

To use this to make a web service call you simply instantiate the object and then call it's open() method. I recommend this is done async to keep the UI responsive. When invoked async you will get callbacks to your specified async method that will indicate the status of the request. When the status is 4 (loaded) you can take the response data and then process it.

How you process the data will depend on what it is, if it's JSON then you can run it through JavaScript's eval() method but that does have some security implications. If it's XML you can use the XML DOM to process it.

See Wikipedia for more info on the XMLHttpRequest object.

Answer 4

Also check XML HTTP Request for a nice info page about using the XmlHttpRequest object.

Answer 5

There is a small library written in javascript that can be used as a XML-SOAP client. I don't know if it works on all browsers but it might help you out. You can find it here

Answer 6

This worked. It's old (checking for Netscape), was written before all the Ajax tools came out. You do have to handle different browsers -- basically, IE does it one way, and everybody else does it the other way.

// javascript global variables
var soapHeader = '<?xml version=\"1.0\"?>'
               + '<SOAP-ENV:Envelope xmlns:SOAP-ENV=\"http://schemas.xmlsoap.org/soap/envelope/\"'
               + ' SOAP-ENV:encodingStyle=\"http://schemas.xmlsoap.org/soap/encoding/\"'
               + ' xmlns:xsi=\"http://www.w3.org/1999/XMLSchema-instance\"'
               + ' xmlns:xsd=\"http://www.w3.org/1999/XMLSchema\"'
               + '>'
               + '<SOAP-ENV:Header/>'
               + '<SOAP-ENV:Body>';

var soapFooter = '</SOAP-ENV:Body>'
               + '</SOAP-ENV:Envelope>';

var destinationURI = '/webservices/websalm';

var actionURI = '';

function callWebService(nsCallback,ieCallback,parms) {
  try
     {
       // Create XmlHttpRequest obj for current browser = Netscape or IE
       if (navigator.userAgent.indexOf('Netscape') != -1)
       {
          SOAPObject = new XMLHttpRequest();
          SOAPObject.onload = nsCallback;
       } else {  //IE
          SOAPObject = new ActiveXObject('Microsoft.XMLHTTP');
          SOAPObject.onreadystatechange = ieCallback;
       }

       SOAPObject.open('POST', destinationURI, true);

       // Set 2 Request headers, based on browser
       if (actionURI == '') {
          SOAPObject.setRequestHeader('SOAPAction', '\"\"');
       } else {  SOAPObject.setRequestHeader('SOAPAction', actionURI);
       }

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

       // Compose the Request body from input parameter + global variables
       var requestBody = soapHeader + parms + soapFooter

       // Send, based on browser
       if (navigator.userAgent.indexOf('Netscape') != -1)
       {
         SOAPObject.send(new DOMParser().parseFromString(requestBody,'text/xml'));
       } else {
         SOAPObject.send(requestBody);
       }
  } catch (E)
  {
     alert('callWebService exception: ' + E);
  }
}