The dojo.io package provides portable code for XMLHTTP and other, more complicated, transport mechanisms. Additionally, the "transports" that plug into it each provide their own logic to make each of them easier to use. The rest of this article will cover how the XMLHTTP transport from Dojo provides ways around the book-marking and back button problems.

Most of the magic of the dojo.io package is exposed through the bind() method. dojo.io.bind() is a generic asynchronous request API that wraps multiple transport layers (queues of iframes, XMLHTTP, mod_pubsub, LivePage, etc.). Dojo attempts to pick the best available transport for the request at hand, and in the provided package file, only XMLHTTP will ever be chosen since no other transports are rolled in. The API accepts a single anonymous object with known attributes of that object acting as function arguments. To make a request that returns raw text from a URL, you would call bind() like this:

dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    mimetype: "text/plain"

});

That's all there is to it. You provide the location of the data you want to get and a callback function that you'd like to have called when you actually DO get the data. But what about if something goes wrong with the request? Just register an error handler too:

dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    load: function(type, data, evt){ /*do something w/ the data */ },

    error: function(type, error){ /*do something w/ the error*/ },

    mimetype: "text/plain"

});

It's possible to also register just a single handler that will figure out what kind of event got passed and react accordingly instead of registering separate load and error handlers:

dojo.io.bind({

    url: "http://foo.bar.com/sampleData.txt",

    handle: function(type, data, evt){

        if(type == "load"){

            // do something with the data object

        }else if(type == "error"){

            // here, "data" is our error object

            // respond to the error here

        }else{

            // other types of events might get passed, handle them here

        }

    },

    mimetype: "text/plain"

});

One common idiom for dynamic content loading is (for performance reasons) to request a JavaScript literal string and then evaluate it. That's also baked into bind, just provide a different expected response type with the mimetype argument:

dojo.io.bind({

    url: "http://foo.bar.com/sampleData.js",

    load: function(type, evaldObj){ /* do something */ },

    mimetype: "text/javascript"

});

And if you want to be DARN SURE you're using the XMLHTTP transport, you can specify that too:

dojo.io.bind({

    url: "http://foo.bar.com/sampleData.js",

    load: function(type, evaldObj){ /* do something */ },

    mimetype: "text/plain", // get plain text, don't eval()

    transport: "XMLHTTPTransport"

});

Being a jack-of-all-trades, bind() also supports the submission of forms via a request (with the single caveat that it won't do file upload over XMLHTTP):

dojo.io.bind({

    url: "http://foo.bar.com/processForm.cgi",

    load: function(type, evaldObj){ /* do something */ },

    formNode: document.getElementById("formToSubmit")

});

Phew. Think that about covers the basics. Good thing you weren't planning on implementing all that stuff yourself, right?