dojo.xhrGet or dojo.xhrPost

Question

I'm very new at this, in fact this is my first Dojo attempt. I'm trying to get data from a website with:

<script
  text="text/javascript"
  src="http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js"
  djConfig="parseOnLoad:true,isDebug:true"
></script>

<script type="text/javascript">
  //How are we supposed to know what else to include in the dojo thing?  like query?
  dojo.addOnLoad(function(){
    console.log("hi");
    dojo.xhrPost({
      url: "http://www.scrapbookingsuppliesrus.com/catalog/layout", //who knows how to set relative urls?
      handleAs: "json", //get json data from server
      load: function(response, ioArgs){
        console.log("got");
        console.log(response); //helps with the debugging
        return response;  //that way goods should be a very large array of the data we want
      },
      error: function(response, ioArgs){
        console.log("nope didn't make it", response+' '+ioArgs); //helps with the debugging
        return response; //who knows what this does
      } //last item, thus no extra comma
    });
  });
</script>

But nothing happens. While I'm at it, what exactly is the response and ioArgs variables. They're supposed to magically be the response to the request that I guess is specially defined already. But, who knows. Further, I figured after every attempt it would trigger something in load or error, but alas. There used to be an error that I was going to a prohibited uri, but then firebug would reference a very large dojo script where it was impossible to tell why it was broken. What environment are the rest of you developing on?

Answer 1

There where several very basic errors in your code.

<script ... djConfig="parseOnLoad:true,isDebug:true"/></script>

• Here you use the short form of the script tag /> (which is forbidden) and at the same include the closing </script> too.

console.log("hi")

• There is a semi-colon missing at the end of the statement

You try to load data from http://www.scrapbookingsuppliesrus.com/catalog/layout is your script also running on that domain? Else the security restrictions on Crossdomain-Ajax (google it) will prevent you from loading the data.

Answer 2

This question was also asked on the dojo-interest list and there are a few replies to the question on that list.

Answer 3

Well, there are a couple of issues.

Lets start with the very easy ones first.

When you are developing you want to use the "uncompressed" version of Dojo, which can be found by appending .uncompressed.js to the path of the Dojo library being used:

http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js.uncompressed.js

This will make it much easier to see what breaks, if it is in core-Dojo that is.

Next, the djConfig parameter. I'm quite certain that Dojo can handle a string, but traditionally it has been defined with an object, so, once you've included your Dojo library:

<script src="path to dojo"></script>

Start a new script block and define the djConfig object in there:

<script>
  djConfig = {
    parseOnLoad: true,
    isDebug: true
  };
</script>

Next simplest, I use IntelliJ JIDEA to develop, it has build-in code-sense for Dojo, makes life much easier. Otherwise, the standard package, Firefox + Firebug.

The complex stuff:

It seems that you are requesting data using the XHR method, hopefully you are aware that this means that your script and the data being accessed must reside on the same domain, if they don't you'll have security errors. How can this be solved? you use the technique called cross-domain scripting, which dojo also supports via the dojo.io.script.get functionality.

The more complex stuff:

Dojo works with something called "Deferred" objects. That means that the request doesn't actually go out as soon as the object is created, rather it goes out when you ask it to go out, that's the concept of "Deferred", you defer the execution of a block of code to a later time. The way this problem would then be solvedin your case is like this:

var deferred = dojo.xhrPost({
      url: "http://www.scrapbookingsuppliesrus.com/catalog/layout", //who knows how to set relative urls?
      handleAs: "json" //get json data from server
    );

    if(deferred) {
      deferred.addCallback(function(response){
        console.log("got");
        console.log(response); //helps with the debugging
        return response;  //that way goods should be a very large array of the data we want
      });
      deferred.addErrback(function(response){
        console.log("nope didn't make it", response+' '+ioArgs); //helps with the debugging
        return response; //who knows what this does
      });
    }

And this should work out now.

As a personal note, i would not recommend using XHR but rather the dojo.io.script.get methodology, which over the long term is much more portable.

Answer 4

If you page is being served from www.scrapbookingsuppliesrus.com, then the code you've posted looks correct. The way you declare djConfig will work, and specifying load and error in the argument to xhrGet is correct. You're going to have dig in and debug. Take a look in Firebug's Console window. You should see the GET request, complete with request and response HTTP headers, and the response text. If you don't see it, then I suspect something else has gone wrong before your onLoad function from being called - I'd throw a console.log at the top of that too. If your onLoad function isn't getting called, you may want to click the little down arrow in the Script tab and set "Break on all errors"

As to what the response and ioArgs are.

Response is, well, the response. If the request was successful, it will be the JSON object (or XML DOM object, or HTML DOM object, or text, depending on handleAs). If the request failed, it will contain an object with details about the error.

ioArgs is an object that includes a slew of lower-level details about the xhr request. As an asice, I've found that if you attach a callback to the deferred returned by xhrGet:

var dfd = dojo.xhrGet(args);
dfd.addCallbacks(function(response) {...}, function(error){...});

then the callback is not passed the ioArgs argument, just the response (or error).

dojocampus.org is the official dojo documentation site, and includes a lot of detail and examples. Dojo: The Definitive Guide from O'Reilly is an excellent book. If you're going to be doing a lot of dojo dev., it's a great resource.