HTML5 for AS3 Developers: FormData versus URLVariables

This is the third post in an occasional series designed to bridge the gap between ActionScript 3.0 and emerging front-end technologies.

Both ActionScript and the front-end stack have mechanisms for sending data from a page or movie to a server without requiring a page refresh. In most browsers, we can use the XMLHttpRequest object. In Flash, that role is filled by a combination of the URLRequest, URLVariables, and URLLoader classes.

I know you're probably thinking "Why are you writing about this now? XMLHttpRequest has been around for more than half a decade!" True, but XMLHttpRequest, Level 2 (XHR2) is still an emerging standard.

XHR2 is a huge expansion of the XMLHttpRequest API. It adds several new features — such as progress events, binary data, and cross-origin requests — and brings much of what Flash currently does to the browser natively.

In this post, I will give a quick rundown of sending basic text data using URLVariables, URLRequest, and URLLoader and how it compares to the new FormData interface. In a future post, we'll look at sending files and binary data using both techniques.

Sending data with URLVariables

The example below is one you might create using FlashBuilder to create a Flash movie programmatically. The flash.display.Sprite class is imported by default. Since we're going to make network requests, we will also import all flash.net.* classes.

package
{
    import flash.display.Sprite; // imported by default
    import flash.net.* // imports URL classes

    public class URLVars extends Sprite
    {
        public function URLVars()
        {
            /* create a new URLRequest object */
            var req:URLRequest = new URLRequest();

            /* create a new URLVariables object */
            var dataObj:URLVariables = new URLVariables();

            /* Create a new URLLoader */
            var fxhr:URLLoader = new URLLoader();

            /* Add object property-value pairs */
            dataObj.name = 'Jane Doe';
            dataObj.address = '1313 Mockingbird Lane';
            dataObj.City = 'Beverly Hills';
            dataObj.State = 'CA';
            dataObj.ZIP = '90210';
            dataObj.Country = 'United States';

            /* define the URL for the request */
            req.url = '/script';

            /* Set the request method. */
            req.method = URLRequestMethod.POST;

            /* Attach the data object to the request */
            req.data = dataObj;

            /* Make the request */
            fxhr.load(req);

        }
    }
}

When this request is made, the Flash user agent will automatically include a Content-Type: application/x-www-form-urlencoded request header since all of the fields included are plain text. If one of the included fields had been a file (using the FileReference or FileReferenceList classes), Flash would instead send a Content-Type: multipart/form-data header.

Sending data with a FormData object

Now let’s take a look at sending that same data using a FormData object.

/*
Create a new FormData object. This is
analogous to the URLVariables() object
*/
var data = new FormData();

/* Append each field as key, value */
data.append('Name','Jane Doe');
data.append('Address','1313 Mockingbird Lane');
data.append('City','Beverly Hills');
data.append('State','CA');
data.append('ZIP','90210');
data.append('Country','United States');

/*
Create a new XMLHttpRequest object,
which is analogous to the URLRequest object.
*/
var xhr = new XMLHttpRequest();

/* Open the connection, and set the method. */
xhr.open('POST','/script');

/*
Send the data. Roughly equivalent
to fxhr.load( req );
*/
xhr.send( data );

Notice again here that we are not setting a Content-Type request header as we would have to with XHR1. When you use a FormData object to send data, the browser will automatically include a Content-Type: multipart/form-data header. This is also why and how we can now (well, we will soon be able to) use XMLHttpRequest to send binary data and files.

Browser support

Browser support for XHR2 isn't as far along as we'd like. Chrome and Firefox support most of the specification. At Opera, our development team is diligently working to bundle support into a future release. Microsoft plans to include support in Internet Explorer 10 scheduled for a 2012 release.

Opera Opera Mini Opera Mobile IE Firefox Chrome Safari iOS Safari Android WebKit

no no no 10.0+ 4.0+ 5.0+ 5.0+ 5.0 2.1+

Browser support for XHR2 and FormData as of 31 October 2011

In the meantime, we can continue to send text data via XHR using URL-encoded strings. I'll take a look at file uploads in an future post.