Hello, Ajax World!

Many programming tutorials contain a "Hello, World!" example, so it seems appropriate to have one for Dojo XHR. In this example, your web page will fetch a snippet of content via XHR and attach it directly to your page.

To setup the example:

Create a file named ajax.txt. It's your decision what to put in the file. "Hello, Ajax world!" is a good start.
Put ajax.txt in the default documents directory on your web server. In many cases, that is the httpdocs directory.
Open your web browser and navigate to the file. You should see the contents of ajax.txt.
Create a file named hello.html. Copy and paste the contents of Example 1, “Hello, Ajax world!” into that file.
Set the URL argument to the value you used to test the server setup.
Put hello.html in the default documents directory on your web server. In many cases, this is the httpdocs directory.

Put the file in the same directory as ajax.txt.
Make the file read-only.
Open your web browser and navigate to hello.html. You should see the contents of ajax.txt in your browser window.

Example 1. Hello, Ajax world!

<html>
 <head>
  <title>Hello, Ajax world!</title>
  <script type="text/javascript"
    src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script> <!--➀-->
  <script type="text/javascript">
    function hello() { // ➁
      dojo.xhrGet( { // ➂
        // The following URL must match that used to test the server.
        url: "http://server/ajax.txt", 
        handleAs: "text",

        timeout: 5000, // Time in milliseconds

        // The LOAD function will be called on a successful response.
        load: function(response, ioArgs) { // ➃
          dojo.byId("cargo").innerHTML = response; // ➄
          return response; // ➅
        },

        // The ERROR function will be called in an error case.
        error: function(response, ioArgs) { // ➃
          console.error("HTTP status code: ", ioArgs.xhr.status); // ➆
          return response; // ➅
          }
        });
      }
  </script>
  <script type="text/javascript">
    dojo.addOnLoad(hello); // ➇
  </script>
 </head>
 <body>
   <div id="cargo" style="font-size: big"></div> <!--➈-->
 </body>
</html>

➀	This JavaScript program bootstraps Dojo 1.0 via the AOL Content Distribution Network. If you choose to install Dojo locally, use the following script tag to bootstrap Dojo: <script type="text/javascript" src="`dojo/dojo.js`"></script> Modify the directory reference in the SRC attribute to match the location of your Dojo installation
➁	This function will be called after Dojo completes its initialization phase.
➂	The desired HTTP method call (GET, POST, PUT, DELETE) is part of the function name.
➃	Inside this function, the `this` variable will be the object used as the argument to the `dojo.xhrGet()` call.
➄	This statement demonstrates one way of stuffing a server response into a document. The `dojo.xhrGet` call asks Dojo to treat data from the server as text (handleAs: "text"). Therefore `response` will be a text string.
➅	Dojo recommends that you always `return(response);` to propagate the response to other callback handlers. Otherwise, the error callbacks may be called in the success case.
➆	`ioArgs` is an object with some useful properties on it. For instance, for `XMLHttpRequest` calls, `ioArgs.xhr` is the `XMLHttpRequest` that was used for the call.
➇	The Dojo team recommends that you always use `dojo.addOnLoad()` to call any startup code you write. Even for this simple example, unless we use `dojo.addOnLoad()`, we cannot reliably assume that the main function `hello()` will run after Dojo initialization completes. Use `dojo.addOnLoad()` only to run start-up code. Do not use `dojo.addOnLoad()` to call JavaScript event handlers. Two ways to abuse Dojo. The following techniques will produce tedious, head-scratching debugging sessions by not using `dojo.addOnLoad()`. <body onload='hello'> This technique is never a good idea when using Dojo. You have no assurance that `hello()` will run after Dojo initialization. Put the `hello()` body in a <script> without `dojo.addOnLoad()` This technique usually fails with Dojo. Only the simplest JavaScript programs, like "Hello, Ajax world!" can employ this technique. It's a safe bet that yours isn't one of them.
➈	Holding area for the server response. A common use case is that the server returns an HTML fragment that the client will want to display. The `innerHTML` attribute of such placeholder <div> tags is a convenient way to display HTML fragments.