Getting Rails and Prototype to talk XML

Another Ajax programming with Prototype tip. This one is aimed at Rails developers.

I wanted to use Ajax.Request to communicate with my Rails application via XML. Turns out this was fairly straightforward apart from one major gotcha!

Receiving XML with prototype is easy but not very well documented. You simply set up your Ajax.Request as per the documentation then as long as your application returns a response of application/xml the XML body can be found in the responseXML property of the Ajax.Response object passed to your request callbacks.

For me this looked something like:

      loadPlaylist: function (playlistURL) 
      {
          // request 
            new Ajax.Request(playlistURL, {
                method: 'get',
                onSuccess: this.onLoad.bindAsEventListener(this),
                onFailure: this.loadFailure.bindAsEventListener(this),
                onException: this.loadFailure.bindAsEventListener(this)
            });
      }

    onLoad: function (request)
    {
        var ajaxResponse = request.responseXML;
        ...
        // you can examine the response using the DOM
    }

The other side, sending XML to the Rails app, is where I started to run into problems.

I wanted to Post the XML to the Rails app and have rails parse it with it's built in XML paramter parser. If you read the Ajax.Options documentation it would seem you just set the contentType to application/xml, set the method to post and put the XML in the postBody, right? Wrong! I couldn't get it to work. My rails app kept seeing the post args as form-encoded. It wasn't until I looked at the request headers in firebug that I realized what was happing. Prototype was appending the encoding string to the content-type header - "application/xml; charset=utf8". This is correct but Rails (1.8 anyway) doesn't recognize this as XML.

To fix it I found if I set the encoding option to be blank Prototype leaves the encoding string out. If you don't do this is defaults to "utf8". I'm sure you can also use content-type synonyms in rails but this seemed a way simpler fix.

My code:

                        var args = '<?xml version="1.0" encoding="utf-8"?> ' +
                            '<submission>' +
                            '   <u>' + BLUid + '</u>' +
                            '<track>' +
                            '   <name>' + trackName + '</name>' +
                            '   <artist>' + artistName + '</artist>' +
                            '   <album>' + this.album + '</album>' +
                             '</track>' +
                            '</submission>';

                        // request the file
                        new Ajax.Request(BossaPlayer.updateURL, {
                            method: 'post',
                                        contentType: 'application/xml',
                                        encoding: '',
                                        postBody: args,
                                        onSuccess: this.onProfileUpdated.bindAsEventListener(this),
                                        onFailure: this.profileUpdateFailure.bindAsEventListener(this),
                                        onException: this.profileUpdateFailure.bindAsEventListener(this)
                                        });

BTW. Don't forget another caveat with posting XML to rails is your XML document must have only one root.

Anyway, you can see this in action on Bossa Live. I use it for loading music in the flash player and updating user profiles while they are playing music with the player.

Posted by Barry at June 12, 2008 11:30 AM