YUI3 Lets You Call Webservices With No Server Required

I like YUI3, mostly because I can use it to fill in the gaps between HTML4 and HTML5, and also because a single line of code can make a button zoom around the page:

  var myAnim = new YAHOO.util.Anim('testButton', 
                      { width: { to: 400 }  }, 
                      1, 
                      YAHOO.util.Easing.easeOut);

Also, I can define data sources and polling intervals completely client side, without having to wait for everyone to finish implementing the event-source tag. YUI3 defines 3 useful objects: DataSource, DataSchema, and DataType. DataSource defines a generic source of data. It could be a function, a file, or a web service. Once the DataSource has been configured, you can pull from and publish to the specified location. Here’s a simple example:

YUI().use("datasource-function", function(Y) {
   var getDate = function() {
     return new Date();
   },
   dateDataSource = new Y.DataSource.Function({source:getDate}),
   callback = {
      success: function(e){
                  alert("Current Time is: " + e.response.results[0]);
               },
      failure: function(e){
                  alert("Error!: " + e.error.message);
               }
    };
 
    dateDataSource.request(null, callback);
}

Above, we’ve got some basic YUI steps. The first line defines a block of YUI code that depends on the datasource-function component. In the block, we define a method to get the current date and time, and a DataSource the pulls its information from that function. Next up, we define a callback to handle the possible return situations when the data source requests information. The last line requests data from the function.

YUI will call the getDate function, take the output from that function and pass it as an event to the callback. If there was no problem, the browser will pop up a window telling you what time it is.

Enough of that, let’s turn it up to 11. We will change up the data source to pull from a webservice first:

   stockDataSource = 
            new Y.DataSource.Get({source:"http://www.stocks.com/NASDAQ"},

The Get data source knows to look for a URL. We’ll pretend this one will give us the NASDAQ index number. We will also pretend that the response looks like this:

<stocks>
  <stock>
     <name>NASDAQ</name>
     <value>189.14</value>
  </stock>
</stocks>

So, now we need to define the schema for the data source. Simple enough, we just need to plug in a schema definition:

  stockDataSource.plug({fn: Y.Plugin.DataSourceXMLSchema, cfg: {
     schema: {
          resultListLocator: "stocks",
          resultFields: [{key:"value"}]
     });

Above, we’ve defined the resultListLocator to the be xpath to a list of results, in this case stock nodes. Then we specify the fields of that we’re interested in, namely the value node. The DataSchema will be applied to all data coming into the data source. Now, we just modify the callback handler to deal with the new information, like so:

   callback = {
      success: 
        function(e) {
          alert("The NASDAQ Index is currently: " + e.response.results[0].value);
        },
      ...
   };

The response contains an array results, which is a list of objects exposing the resultFields as properties. And now when stockDataSource.sendRequest(null, callback); is executed, the DataSource will consume the webservice, format the XML into an array of objects, attach them to the response event and pass it on to the callback function. No server handling required.

4 comments

  1. Is YUI doing some behind the scenes browser hacks to get around the cross-domain restrictions (article kind of implied you can call ANY webservice)? There are a few but I’m not sure there is a solution for every browser.

  2. Nope. Though the cross-domain problem isn’t a problem if you’re dealing with a webservice that responds with JSON, as all the Yahoo! services do.

    The post grew out of a conversation about divorcing the JSF from the data layer, trying to find a different way than the standard JSF – Entity – DAO – Hibernate session pattern. If you’re dealing with service calls to your own server to handle data manipulation, there wouldn’t be a cross domain issue, so I didn’t really think of it when I wrote.

    Though while I was investigating, I found an early project called FlashXmlHttpRequest, which uses an embedded flash element to get around the cross domain problem.

  3. Hello there, I found your web site via Yahoo while looking for a related topic for my study. Finally i found site discussing this kind of topic, It’s actually a good and very helpful piece of info. I am delighted that you choose to provided this helpful info with us. Please keep us up to date like this. Many thanks for sharing.

Comments are closed.