Zach’s ugly mug (his face) Zach Leatherman

Wash your mouth out with SOAP and the YUI Connection Manager

May 09, 2007


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="">

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 = ''; // 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.

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

  1. Rema Sockalosky Disqus

    14 Mar 2010
    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!
  2. Colin Dean Disqus

    07 Apr 2010
    This was the first result on Google for me. Thanks for the post, btw.
  3. Charles Disqus

    15 Apr 2010
    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?ThanksCharles
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)