- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Hello, Ajax World!
Submitted by jchimene on Tue, 06/05/2007 - 18:43.
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 defaultdocuments
directory on your web server. In many cases, that is thehttpdocs
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 defaultdocuments
directory on your web server. In many cases, this is thehttpdocs
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 ofajax.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=" 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
|
➆ |
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
Use Two ways to abuse Dojo. The following techniques will produce tedious,
head-scratching debugging sessions by not using
|
➈ | 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. |
Needs updating to 1.0
This example needs to be updated to 1.0, and may want to consider to update to include proper required options.
Using a direct connection to the non-base dojo.js file breaks consistency with the rest of the book and breaks the mantra of "use requires" that is seen elsewhere.
An area may want to be added to this about handling caching etc through "preventCache" etc.
no require necessaray
This example is entirely correct, and it does pull in the base dojo.js which includes the dojo.xhr* functions built right in. I will update the URL for 1.0, though.
Regards
Avoid making orphan widgets by destroying them
If you have any widgets in your node you will make them orphans when doing this:
You should destroy any widgets existing in the node prior to changing the innerHTML. You can go about this in two different ways:
This becomes a problem if you for instance have a form with dojo.form elements since the parser will complain that your dijit already exists in the registry the second time you load the same form.