Zach’s ugly mug (his face)

Zach Leatherman

Wash your mouth out with SOAP and the YUI Connection Manager

09 May 2007 Zach Leatherman 4 min read

Warning

This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!

Now you’ve done it. You watched an R rated movie while your parents weren’t looking and used some of your newfound acquired colorful language in front of them. Your mom goes for the Dial Liquid Soap, she’s going to wash that profanity right out of your dirty little mouth.

Harsh? Maybe, but I couldn’t say the word ‘Bastards’ without feeling Dial on my cleansed taste buds. Maybe I should take legal action against the cinematic classic ‘Hot Shots.’

What are we here for? Not liquid soap, perhaps some profanity. But really, you want to use the SOAP web services protocol with your Yahoo User Interface application, in particular the Connection Manager component. This tutorial assumes you are at least familiar with the examples provided on the Yahoo! UI Library: Connection Manager website.

How is SOAP different than any other AJAX call using the Connection Manager? Well, normally, when you perform an HTTP Post AJAX call, it is passing in a key-value pair string encoded with the normal key=value&key2=value format. But when doing a SOAP call, we want to post an XML SOAP Envelope to the server instead of this key-value pair string. In case you’re reading this article and don’t know what a SOAP Envelope looks like, I’ll post a sample here:

<s11:Envelope xmlns:s11="http://schemas.xmlsoap.org/soap/envelope/">
<s11:Header>
</s11:Header>
<s11:Body>
</s11:Body>
</s11:Envelope>

Of course, it is beyond the scope of this article to argue whether a REST or a SOAP format for your Service Oriented Architecture is a better choice. You’re stuck with SOAP, otherwise you wouldn’t have read this far.

So, let’s post our SOAP Envelope using the YUI Connection Manager with the code provided below:

var targetUrl = 'http://www.zachleat.com/postToServer.php'; // this is not a real URL
 
var callback = {
  success: function(o)
  {
    var root = o.responseXML.documentElement; 
    if( root.getElementsByTagName( 'faultstring' ).length > 0 ) // faultstring is a standard SOAP error message format
    {
      var faultstring = root.getElementsByTagName( 'faultstring' )[0].firstChild.nodeValue;
      var detailed = '';
      YAHOO.UP.util.each( root.getElementsByTagName( 'detail' )[0].childNodes, function( j, textNode )
      {
        if( textNode.nodeValue != null ) detailed += textNode.nodeValue;
      } );
      // do something with your error message stored in the faultstring variable, with a more detailed message in the detailed variable
    } else {
      // this is an actual success.
    }
  }, 
  failure: function( o )
  {
    // do something with your failure.
  }
};
 
var message = '<s11:Envelope...YOUR SOAP MESSAGE HERE';
 
// we need to set our own header.
YAHOO.util.Connect._use_default_post_header = false;
YAHOO.util.Connect.initHeader( 'Content-Type', 'text/xml', false );
var ajaxCall = YAHOO.util.Connect.asyncRequest( 'POST', targetUrl, callback, message);

I hope this code helps some of you bastards.

3 Comments

➡ Load Disqus to Leave a Comment ⬅

Rema Sockalosky

14 Mar 2010 at 10:17AM

You can not believe how long ive been googling for something like this. Browsed through 9 pages of Google results and couldnt find anything. Quick search on bing. There this is.... Really have to start using it more often!

This was the first result on Google for me. Thanks for the post, btw.

Thanks for the post...

I want to call my web services I created, so I need to post XML data to my web service. How can I do this using something like your posting?

Thanks
Charles