From Jimbojw.com

SWFHttpRequest is a simple, lightweight Flash SWF file, built using the haxe programming language, which adds a JavaScript object for performing XMLHttpRequest-like requests, but using Flash instead. This allows direct access to sites sporting an agreeable crossdomain.xml file such as Yahoo! APIs and Flickr.

It follows the w3c's XMLHttpRequest specification to a good degree, and is therefore ideal for using in tandem with an Ajax toolkit. It requires only the SWF file itself and an OBJECT/EMBED clause in the HTML. No extra JavaScript required!

Contents 1 Demo and Download 2 Requirements 3 Installation 4 Usage 5 Ajax Library Integration 5.1 MooTools 5.2 Prototype/Scriptaculous

Demo and Download

• SWFHttpReqeuest Demo - simple demonstration
• - the embeddable swf file
• SWFHttpRequest.hx - source code (includes compilation instructions)

Requirements

• Flash: Version 9 or higher
• Browser: Firefox 2 or higher, Internet Explorer 6, 7 or higher

Note: At the time of this writing, I have only tested using IE 6 and 7 and FF 2 - it may work for other browsers as well.

Installation

Once you download the swf file, you can embed it in your HTML like this:

<object
    id="swfhttprequest" class="hidden"
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
    <param name="movie" value="swfhttprequest.swf" />
    <param name="allowScriptAccess" value="always" />
    <embed
        class="hidden"
        src="swfhttprequest.swf"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
    </embed>
</object>

WARNING: Make sure this is NOT inside a pair of <form> tags. This will cause EXTREMELY DIFFICULT TO DEBUG issues in Internet Explorer.

Note: The id attribute of the <object> tag is NECESSARY for IE to function. It can be anything you like, as long as it contains ONLY alphanumeric characters and underscores (so-called "word" characters). Hyphens will kill it.

Usage

To use it, instantiate an SWFHttpRequest object and use its open() and send() methods in the same manner you'd use a native XMLHttpRequest.

For example:

var.shr = new SWFHttpRequest();
shr.open( 'GET', 'http://some.url/path/to/service' );
shr.onreadystatechange = function(){
    if (this.readyState!=4) return;
    if (this.status==200) {
        // Success! Take appropriate action with this.responseText
    } else {
        // Oops - something went wrong :(
    }
};
shr.send( 'some=post&data=here' );

Also, do a "view source" on the aforementioned SWFHttpReqeuest Demo for another example.

Ajax Library Integration

The benefits of having an XHR-like interface become apparent when you consider the ease of integration with popular web toolkits.

MooTools

For example, consider this example which makes use of the MooTools Ajax object:

new Ajax( someURL, {
    method: 'get',
    onSuccess: function(responseText, responseXML) {
        // do something with the responseText
    }
} ).request();

Now, here is the same code, but with instructions to override the normal XMLHttpRequest object and use an SWFHttpRequest instead:

new Ajax( someURL, {
    method: 'get',
    onSuccess: function(responseText, responseXML) {
        // do something with the responseText
    },
    initialize: function() {
        if (window.SWFHttpRequest) this.transport = new SWFHttpRequest();
    }
} ).request();

On the other hand, if you wanted MooTools to always use SWFHttpRequest when it's available, you could add this script to the page:

XHR.prototype.setTransport = function(){
    if (window.SWFHttpRequest) { this.transport = new SWFHttpRequest(); return this; }
	this.transport = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ie ? new ActiveXObject('Microsoft.XMLHTTP') : false);
	return this;
};

Prototype/Scriptaculous

A page-wide swap into Prototype may look something like this:

Ajax.getTransport = function() {
    return Try.these(
        function() {return new SWFHttpRequest()},
        function() {return new XMLHttpRequest()},
        function() {return new ActiveXObject('Msxml2.XMLHTTP')},
        function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
};

Enjoy! As always, I'll be happy to answer any questions.

---

Got something to say?

Leave a comment

Sorry, comments are disabled.

or, read what others have said...