json icondojo icon

Dojo - Using dojo.io.bind

Posted in , , Sun, 04 Jun 2006 04:15:00 GMT

I recently looked into Dojo Toolkit 0.3.0's dojo.io.bind to perform AJAX requests because of it's good handling of memory leaks. I checked out the dojotoolkit.org intro page which was okay but didn't cover how to pass parameters or how to process a JSON response so I thought I'd put some info together here. Here are a few things worth knowing:

  1. A dojo response has a type that is typically set to load or error, though sometimes it may be neither. With dojo, type=="load" means success.
  2. Dojo.io.bind has a few handlers to process the response. The load handler is executed when the response type=="load" and the error handler is executed when the response type=="error". There is also a catch-all handle handler that can accept all response types so you can process a response that has a type that's neither load nor error.
  3. If request parameters are set as a hashref using content, dojo.io.bind will automatically turn them into form post parameters
  4. The response mimetype (or content-type) is set in the client JavaScript. Dojo uses this to determine how to process the response. Dojo ignores content-types set by the server

Here are two examples to help put the above together. The examples cover a plain HTML fragment response as well as a JSON response. Both examples submit a hashref. Dojo can also submit an entire form automatically. This is covered on the Dojo.IO Intro link above and isn't covered here, for now. Thanks to Toby Corkindale who posted his saveHandler function to the catalyst mailing list.

Example 1: HTML processed by load
This first example retrieves a single fragment of HTML in the response body and processes it using the load handler.

dojo.io.bind({
    url: "/binduri",
    method: "post",
    /* optional content. If the content is in the
     * form of a hashref they are converted to
     * post paramters */
    content: {
        username: "George",
        password: "curious"
    },
    load: function(type,data,evt) {
        if (data) alert('Response Data: '+data);
    },
    mimetype:'text/html'
});

Example 2: JSON processed by handle
This second example processes a JSON response using the all-in-one handle handler. The handle is typically used in special situations where load and error are not appropriate such as a progress bar. It is shown here just to provide the syntax. To process a JSON response, set the dojo.io.bind mimetype to text/json and return the JSON object in the response body.

dojo.io.bind({
    url: "/binduri",
    method: "post",
    /* optional content. If the content is in the
     * form of a hashref they are converted to
     * post paramters */
    content: {
        username: "George",
        password: "curious"
    },
    handle: function(type,data,evt) {
        if (type=='load') {
            alert( 'Successful response' );
            if (data.myItem)
                alert('Response JSON Item: '
                +data.myItem);
        } else if (type=='error') {
            alert('A error has occurred');
        } else {
            alert('Some other event has occurred');
        }
    },
    mimetype:'text/json'
});

Conclusion
Dojo.io has a nice interface that has a few conveniences including auto-conversion of a hashref to request form parameters and auto-eval of JSON set in the response body. Along with the good memory leak handling for IE, a very nice implementation.

del.icio.us:Dojo - Using dojo.io.bind digg:Dojo - Using dojo.io.bind reddit:Dojo - Using dojo.io.bind spurl:Dojo - Using dojo.io.bind wists:Dojo - Using dojo.io.bind simpy:Dojo - Using dojo.io.bind newsvine:Dojo - Using dojo.io.bind blinklist:Dojo - Using dojo.io.bind furl:Dojo - Using dojo.io.bind fark:Dojo - Using dojo.io.bind blogmarks:Dojo - Using dojo.io.bind Y!:Dojo - Using dojo.io.bind smarking:Dojo - Using dojo.io.bind magnolia:Dojo - Using dojo.io.bind segnalo:Dojo - Using dojo.io.bind

7 comments

Comments

  1. alex said 1 day later:

    Hi,

    So you don’t need to detect the event type in the handle() method of of your bind arguments. There are separate slots for load() and error() methods that you can register to respond to those states. The handle() method is there in case you really really want to hear about all the states in one place (say, for implementing a progress bar or something). Should make your example even shorter still.

    Regards

  2. John Wang said 1 day later:

    Actually the second example did use load(), however the first example used handle(). I switched them around so load() is first and mentioned handle() is only used here as a demonstration. Thanks for mentioning progress bar. The Intro to Dojo IO page

    http://dojotoolkit.org/intro_to_dojo_io.html

    doesn’t indicate where handle is useful when it’s presented.

  3. francois blais said about 1 month later:

    finally something to explaine something about dojo

    do you have any site that is worthy of dojo because i did look a lot and i found very few site that explain how to use that library

  4. francois blais said about 1 month later:

    does any one have a working example of

    a sorttable being fill with dojo.io.bind

    json format

  5. psaikrishna.sai@gmail.com said about 1 year later:

    What should be the parameter value of dest_id when we’re downloading some file say a pdf file from a script.

  6. Zoroxeus said over 2 years later:

    Hi, Thanks for the infos, i read a bit trying to find my issue but I could not.

    First of all the strange thing is that my code works perfectly fine with other browser except MSI Exploer.

    I simplified the code as much as I could: <!-- actionJSP1 = 'showAnalogProperties.jsp?analogid='+typeId;--> <html xmlns="http://www.w3.org/1999/xhtml"> <script type="text/javascript"> function ReplaceItAll(typeId) { var divName1 = 'ToReplace'; var actionJSP1; actionJSP1 = 'blank1.html'; dojo.io.bind ({ url: actionJSP1, handle: function(type, data, evt) { var returnObj = document.getElementById(divName1); returnObj.innerHTML = data; } }); } </script> <head> <script language="JavaScript" src="../js/dojo.js" type="text/javascript"></script> </head> <body onload="ReplaceItAll(12)"> <div> <form> <table> <span id="ToReplace"> testing </span> </table> </form> </div> </body> </html> and blakn1.html is as follow: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>New Page</title> </head> <body> <form> <div> Testing innerHTML </div> </form> </body> </html>

    All other browsers show properly the content from blank1.html

    However it does not work with explorer. Well it returns me [object Object] on the page.

    The second strange thing is that when i take out span id=”ToReplace” from DIV it works…

    Any idea ? tips ? something i am doing wrong ?

  7. Zoroxeus said over 2 years later:

    sorry forgot about blank1.html:

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>New Page</title> </head> <body> <form> <div> Testing innerHTML </div> </form> </body> </html>

(leave url/email »)

   Comment Markup Help Preview comment