Functional Ajax with Dojo

Is Using An Automated Software A Good Idea?

 

Binary trading requires a lot of effort and dedication since the process of finding an investment opportunity can be challenging and time-consuming. That is why auto-trading software is the perfect choice for prospective investors and novice traders, and Fintech Ltd can deliver amazing results in no time.

by Neil Roberts

I frequently hear the question: “Does Dojo have an Ajax method that updates a div?”. The answer is that there’s no Dojo-approved way of doing something like this. Updating a div is such an easy process, that implementing a de-facto solution is not only extra code, but you also hit a wall as soon as you want to do “something more”.

The short and sweet solution looks something like this:

  dojo.xhrGet({
    url: "title.php",
    load: function(data){
      dojo.byId("title").innerHTML = data;
      // or
      dojo.query("h1 .title").addContent(data);
    }
  });

This is a fine solution, but let’s start discussing the DRY philosophy. If you work with more than one node or URL (which you probably will), and you want to process the HTML before you add it to your document or update the DOM after you’ve made your innerHTML assignment, you can end up with a lot of duplicated code. Armed with some knowledge, and the power of functional programming, we can fix this.

The load function in dojo.xhrGet is actually passed 2 arguments. The second argument passed to the load function is the XMLHttpRequest object that was used to make the call. Attached to this object is a field named args, which contains the arguments originally passed to dojo.xhrGet. This creates a handy way of passing information to your load function.

So now, we can write a cool new function that we can share between our dojo.xhrGet calls. Let’s call it loadIntoNode:

  function loadIntoNode(data, xhr){
    if(xhr.args.node){
      xhr.args.node.innerHTML = data;
    }
  }

And then we can reduce our dojo.xhrGet call by replacing the load argument:

  dojo.xhrGet({
    url: "title.php",
    node: dojo.byId("title"),
    load: loadIntoNode
  });

Notice that we’ve reduced the information here to the lowest common denominators. Added is the the node field, which loadIntoNode is able to access through xhr.args.node. With just a few more lines of code, loadIntoNode could accept a dojo.query result as well.

We can even take this a step further and create a function that generates our dojo.xhrGet argument:

  function intoNode(node, url){
    return {
      url: url,
      node: dojo.byId(node),
      load: loadIntoNode
    };
  }

Which leaves us with the super-compact, super DRY dojo.xhrGet call:

  dojo.xhrGet(intoNode("title", "title.php"));

Changing Things Up

So now you’re saying: “But library X lets me do it differently”. And it probably looks a little like this:

  $("#quote p").load("content.php");

Dojo’s $ equivalent is dojo.query. And if that’s not good enough for you, just set the variable $ to dojo.query.

Here, the important functional method comes from dojo.NodeList, the type of object dojo.query returns. It has a forEach function that accepts a function that is called for each found node. In practice, it looks like this:

  dojo.query("#title p").forEach(function(node){ /* content */ });

If you’ve been following along, you should already know what to do here: pass it a reusable function! Our only problem is that this function is only called with a node, but it also needs a URL. How do we fix it? Well first of all, we need to have a function that accepts a URL. We also need this function, when called, to return a function that we can pass to forEach.

But what does this function look like?

  function loadFromQuery(url){
    var html = "";
    dojo.xhrGet({
      url: url,
      sync: true,
      load: function(data){
        html = data;
      }
    });
    return function(node){
      node.innerHTML = html;
    }
  }

We’ve made this a synchronous dojo.xhrGet using the sync flag. What this means is that code execution will pause until the html variable is properly set and available to our returned function. It also means that any chained functions that occur after this function is used will be able to see the modified HTML.

So now you’re saying: “I don’t care if I can see the HTML or not, I don’t want I/O slowing down my code!” and that’s cool, because there’s a solution. Let’s rewrite our loadFromQuery function.

  function loadFromQuery(url){
    var get = dojo.xhrGet({ url: url });
    return function(node){
      get.addCallback(function(data){
        node.innerHTML = data;
        return data;
      });
    }
  }

What’s going on there?! Well, dojo.xhrGet returns something called a Deferred. The short and sweet of it is that it’s an object you can attach callbacks to. If you attach a callback before the file finishes loading, the callback waits until it’s done. But, if it’s finished loading, the callback is made immediately. This allows our code to execute without having to pause and wait for the file to finish loading.

Also notice that the callback function returns the data it was originally given. This is because the next callback that gets added uses the return from the previous callback. So you’ll want to make sure that’s available.

So that’s great, we have a function, but how do we use it? Well, like this:

  dojo.query("#title p").forEach(loadFromQuery("script.php"));

And what I can’t help pointing out at this point is where this approach wins out over the solution mentioned at the beginning of this section. The result of our loadFromQuery call is a function that we can save to a variable and pass around as much as we want. It will never have to make the Ajax call again or consult a cache. But I’ll stop talking about it and show it in action.

  var result = loadFromQuery("script.php");
  dojo.query("#title p").forEach(result);
  dojo.query("#section .subsection").forEach(result);

So there you have it. Because of Dojo’s functional approach to code, you can mix and match things to suit your project, without any unnecessary code repetition.

Tags: Ajax, Deferred, dojo.query

About:
Website: http://someclosure.com

 

This entry was posted on Friday, March 14th, 2008 at 5:49 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Functional Ajax with Dojo”

  1. SitePen Blog » Dojo Storage and Dojo Bling Says:
    […] Neil shows an example of implementing the DRY (Don’t Repeat Yourself) philosophy using functional programming with the Dojo Toolkit. […]
  2. sfoster Says:
    Watch this space for new goodness in this area (scheduled for 1.2). That patch/feature brings some new semantics into dojo for putting content into nodes, which should take some of the “sit-ups” out of this kind of stuff. If you have any thoughts on the api proposed, let me know.
  3. DojoCampus » Blog Archive » Jammastergoat – dojo.hitch Says:
    […] thinger class to set the result of a node byId() to some url is not near as elegant a solution as pottedmeat’s universal fix, but does help to illustrate the magic of […]
  4. SitePen Blog » XHR Plugins with Dojo using handleAs Says:
    […] my article on Functional Ajax with Dojo, I discussed the topic of updating a node with the result of an Ajax call. One of the most […]
  5. Mashup Blog » Blog Archive » XHR Plugins with Dojo using handleAs Says:
    […] my article on Functional Ajax with Dojo, I discussed the topic of updating a node with the result of an Ajax call. One of the most […]
  6. Dojo Javascript Framework Toolkit, Take your Apps to the Next Level | tripwire magazine Says:
    […] Functional Ajax with Dojo […]