This page is an archive of my old blog. Please visit DavidTucker.net for my current blog.
This site is no longer being maintained and commenting is disabled.

AIR Tip 4 – Calling a SOAP Webservice

Getting information from multiple locations on the Internet for a single application is commonplace these days. It is one of many things that makes AIR such a great application platform.

To begin with, we are going to be dealing with a very simple Coldfusion component. The component contains one function "getStuff". If you pass in your name, it will return a string that says "Your Name is ...". If you place this somewhere in your web tree, you can expose it as a webservice by adding "?wsdl" to the end of the filename. That is all you have to do to expose your Coldfusion Component as a SOAP Webservice.

Reference: Coldfusion 8 and Web Services

NOTE: I am planning to write an article on Consuming Coldfusion Webservices with JavaScript. This article will only cover the basics of it.

Coldfusion:
  1. <cfcomponent>
  2.  
  3.         <cffunction name="getStuff" access="remote" returnType="String">
  4.                 <cfargument name="personName" required="true" type="string" />
  5.  
  6.                 <cfreturn "Your Name is " & personName />
  7.  
  8.         </cffunction>
  9.  
  10. </cfcomponent>

Calling the Webservice is drastically different between Flex and Javascript. In Flex, you simply use the tag. Inside of the tag you can define the "operations" that will be associated with the Webservice. In our case, we will define "getStuff" as one of the operations. We will also add the "onResult" function to the result event for the operation. The onResult function simply sends the result text to a Label on the stage.

mxml:
  1. <!--
  2. WEB SERVICES
  3. -->
  4. <mx:WebService
  5.     id="sampleService"
  6.     wsdl="http://yourDomain/SoapTest.cfc?wsdl">  
  7.     <mx :o peration name="getStuff" result="onResult(event)" />      
  8. </mx:WebService>

Actionscript:
  1. import mx.rpc.events.ResultEvent;
  2.            
  3. private function callService(e:MouseEvent):void {
  4.                
  5.      sampleService.getStuff.send(myName.text);
  6.                
  7. }
  8.            
  9. private function onResult(e:ResultEvent):void {
  10.                                
  11.     resultLabel.text = e.result as String;
  12.                
  13. }

With JavaScript, we are going to use the XMLHTTPRequest object just as we did in the last tip. Basically, we will have to add a couple of custom headers, and then craft the SOAP Envelope by hand.

Your reference for the SOAP Envelope will be the "wsdl" file. You can view the wsdl for our webservice in your browser by typing in the URL and adding "?wsdl" to the end of the file name. The wsdl is your guidebook to that specific webservice.

Reference: WSDL Tutorial

JavaScript:
  1. var xmlhttp;
  2. var appXML;
  3.  
  4. function callService() {   
  5.  
  6.     var myName = document.getElementById("myName").value;            
  7.    
  8.     var url = "http://yourDomain/SoapTest.cfc?wsdl";
  9.     xmlhttp = new XMLHttpRequest();
  10.     xmlhttp.open("POST", url, true);               
  11.    
  12.     xmlhttp.onreadystatechange=function(){
  13.        
  14.         if (xmlhttp.readyState==4) {
  15.            
  16.             var mainDiv = document.getElementById('result');
  17.             mainDiv.innerHTML = xmlhttp.responseText;
  18.            
  19.         }
  20.        
  21.     }
  22.    
  23.     xmlhttp.setRequestHeader("Content-Type", "text/xml");
  24.     xmlhttp.setRequestHeader('SOAPAction','http://yourDomain/SoapTest.cfc?wsdl');
  25.    
  26.     xmlhttp.send("<?xml version='1.0' encoding='UTF-8'?>"+"\n\n"+
  27.             '<soapenv:Envelope'+
  28.             ' xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"'+
  29.             ' xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+
  30.             ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
  31.             '<soapenv:Body>'+
  32.             '<ns1:getStuff xmlns:ns1="http://communications"'+
  33.             ' soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">'+
  34.             '<personName xsi:type="xsd:string">' + myName + '</personName>'+
  35.             '</ns1:getStuff>'+
  36.             '</soapenv:Body>'+
  37.             '</soapenv:Envelope>');
  38.    
  39. }

This is one clear example of something that is much easier with Flex. However, to make things easier with JavaScript, here are a few tips to remember:

  • Case Matters. Be sure to watch your casing here - small inconsistencies will lead to errors.
  • You can write your function outside of AIR so that you can use tools like Firebug for debugging.
  • When calling a Coldfusion Webservice - if get the RDS Password page, you forgot to set the SOAPAction header.
  • You have to use "POST" in the xmlhttp.open() function.

Flex Example
Source Code

JavaScript Example
Source Code

Coldfusion Component
Source Code




5 Responses to “AIR Tip 4 – Calling a SOAP Webservice”

  1. [...] AIR Tip 4: Calling a SOAP Webservice (AIR Beta 1) [...]

  2. pravin says:

    cool Post ! thanx alot for giving javascript code

  3. Sathish says:

    Hi david,

    I am getting the below error when accessing the coldfusion webservice.

    soapenv:Server.userException
    coldfusion.xml.rpc.CFCInvocationException: [coldfusion.xml.XmlProcessException : An error occured while Parsing an XML document.]

  4. Sathish says:

    In addition to the above post, an additional information is that, I am accessing a coldfusion webservice from another server.

    Basically I have to develop a windows 7 gadget which consumes the CFwebservice and displays the data in the gadget

    Can you help on why is the error occuring