本文的目的是为Dojo的入门者提供一个起点。每一个步骤都是为了尽可能多的介绍Dojo，但也不可能非常详尽，描述的太详尽反而会把入门用户搞糊涂了。如果需要了解本文中提到的概念，请查看底部指向其他资源的链接。
入门要求
很明显，第一步是你需要Dojo！你可以从 http://dojotoolkit.org/downloads 下载最新的稳定版本.第二步，你需要一个Web服务器.无论是连网服务器或者是离线服务器，Linux、Windows或者是Mac ... 都没什么要紧的。Dojo JavaScript library 是可以可以直接在浏览器上运行的,但文中有一些 AJAX 案例 需要服务器的PHP或者ASP支持.
Dojo 和 Dijit 中的代码,运行在客户端浏览器的部分,是兼容 IE 6 - 7,Firefox 2,和 Safari的.
Dojo的设置
首先，你需要在Web服务器上新建一个目录. 假设为HelloWorldTutorial. 然后在里面建立一个名称为 dojoroot 的目录. 最后,使用压缩工具解压缩Dojo压缩包至 /HelloWorldTutorial/dojoroot目录. 完成后，效果如下：
开始了
一旦设置好了以上的目录和文件结构,我们就要为HTMl文件设置JavaScript标记了.看一下下面的代码:
<head>
<title>Dojo: Hello World! </title>
<!-- SECTION 1 -->
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parSEOnLoad: true"> </script>
</head>
<body class="tundra">
</body>
</html>
正如上面看到的，这个页面只是一个标准的HTML页面框架，它包含了3个部分:
- 两个CSS文件. 标记为 Tundra 的是案例中要用到的Dijit主题风格. 当然也可以选择其他的主题.
- 在Head部分中的script 元素标签. 这个script 元素标签复杂加载Dojo的核心库，它为我们后面用到的Dojo函数提供接口支持.
- 最后,把 tundra CSS 样式添加到 body 标签.
创建一个按钮
好了,我们开始这一激动人心的部分!在这个例子中，我们将会建立一个"Hello World!"的按钮部件.对这个例子，鼠标移出、鼠标经过、鼠标按下(mouSEOut,mouSEOver,and mouseDown) 这3种可视状态可以在一定程度上提升用户体验。
第一个步骤是告知Dojo加载适合的模组.在网页头部，在片段1下添加一个片段2，代码如下:
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dijit.form.Button");
</script>
dojo.require 这一行代码通知 Dojo 加载 Button（按钮） 部件. 如果你省略的这一行,在Dojo 加载的时候，Button（按钮）中添加的代码将会失效,返回的结果是一个普通的HTML 按钮，而不是我们期待的.
这一行HTML代码中最重要的属性是通知Dojo ，按钮的dojoType属性是什么. dojoType 属性负责通知Dojo：在页面加载的时候怎样处理这个元素.在这个例子，我们使用了button这个HTMl元素，当然用 input 也是可以的 - 无论 dojoType 属性有多长，Dojo都是可以运行的.但是使用 input 是不值得的,我们还必须通过额外增加标题属性，来设定button中要显示的文本.
设置部件（Widget）的事件
按钮已经做好了，但是当点击按钮的时候它会做什么呢？我们可以为button（按钮）设定一个点击事件（ event handler）,但是这里有一种更高效的方法 - Dojo 事件系统!
最容易的方式是通过script标记为button附加一个事件.但这并不是随意的 script 标签 ... 它必须包含一个值为 dojo/method 的type属性,例如:
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
真的很简单，是吧？把script放置在标签的内部，从感官上也好看得多.同时还可以在script中充分利用第2层DOM的事件. 这意味着你可以监测到 SHIFT 和 CTRL 键,获取各种各样的事件属性,从而使HTML目录结构的事件处理上升到一个更高的境界. 如果你曾经使用过第二层事件,你会知道IE和 Firefox 中有不同的使用语法.在 Dojo中,同样的函数可以运行在任何一个支持的浏览器上.真是十分强大!
从服务器读取数据
点击按钮弹出警告窗口不错的方法,但如果我们想从服务器上获取数据呢? 又一次,Dojo用一个简单的方法拯救了这个任务 - dojo.xhrGet. 顺便提及一下,这个部分的代码可以在附件中下载（ 文件HelloWorld-Section5.html 和 response.txt ）。
开始，我们需要一个回调函数（ callback function ）来处理服务器返回的数据.在头部（head标签）添加以下代码:
function helloCallback(data,ioArgs) {
alert(data);
}
function helloError(data,ioArgs) {
alert('Error when retrieving data from the server!');
}
</script>
函数中的两个参数(data,and ioArgs) 是非常重要的 - 一个都不能少! 第一个参数 (data) 包含了服务器返回的数据,第二个参数包含了绑定的 Dojo I/O 对象. 我们现在主要看第一个参数.
第二步：将鼠标的点击连接到发起服务器请求. 要完成这一步,修改以下代码:
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
以上的代码主要是告诉Dojo去访问URl定义的网址路径，以及使用handler中定义的函数处理服务器返回的数据。
最后，我们在HelloWorld.html 所在的文件夹下新建一个文件 response.txt. 在这个文件中，写上 'Welcome to the Dojo Hello World Tutorial'.
现在，点击按钮，JavaScript alert窗口中显示的应该是 response.txt 文件中的文字.Dojo-很简单吧!
下面，我们尝试让这个服务器请求做一些更有意义的事.
用GET发送数据到服务器
从服务器获取静态的数据是不错的功能，但在真正的应用中并不是那么广泛. 所以，除了简单的从服务器获取数据，我们还可以给服务器发送数据. 在这个部分,我们使用的是GET方法，下一部分使用的是POST方法.作为简单的参考,这部分的代码可以在附件中下载，文件名为 HelloWorld-Section6.html .服务端文件名是" HelloWorldResponseGET".
首先,在文件 HelloWorld.html 中 (例如：body),需要增加另外一个元素 - 一个 input 元素. 所以,把以下的代码:
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
error: helloError
});
</script>
</button>
修改为:
Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGET.PHP',
error: helloError,
content: {name: dojo.byId('name').value }
});
</script>
</button>
Please enter your name: <input type="text" id="name">
在继续进行之前 - 需要强调一下：dojo.xhrGET函数中的url属性指向的文件格式必须是你服务器支持的格式.
ASP 服务器： 'HelloWorldResponseGET.asp' ，
PHP 服务器： 'HelloWorldResponseGET.PHP' ，
ColdFusion 服务器： 'HelloWorldResponseGET.cfm' ，
Java 服务器 (JSP) ： 'HelloWorldResponseGET.jsp',
Perl 服务器： 'HelloWorldResponseGET.pl' .
这些文件的代码在下面的部分中会提供，在附件中中也可以下载.
在上面的代码中,你会注意到dojo.xhrGet中引入了一个新的属性. 这个属性 - 内容 - 允许程序员以参数的形式发送任意的数据到服务器. 在这个例子中,我们使用的是GET方法,服务器脚本通过参数'name'来获取传过来的值. 需要提一下，如果如果这个参数是另外一个名字（例如： 'myName'),我们还需要把代码改成 (把':'左面的 'name' 改成 'myName' ):
因为我们之前没用过,还需要提一下 dojo.byId('name').value. 非常简单,这个调用是标准的 document.getElementById(..) 函数.
最后,如果你在文本框中输入你的名字，并点击 'Hello World' 按钮,提示框会显示 'Hello
这是服务器的代码. 有一些是可以在下面下载.
使用 PHP 服务器
/*
* HelloWorldResponseGET.PHP
* --------
*
* Print the name that is passed in the
* 'name' $_GET parameter in a sentence
*/
header ( 'Content-type: text/plain' );
print "Hello {$_GET['name']},welcome to the world of Dojo!/n";
?>
使用ASP 服务器
'
' HelloWorldResponseGET.asp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
'
response. ContentType= "text/plain"
response. write ( "Hello " & request. querystring ( "name" ) & ",welcome to the world of Dojo!/n" )
%>
使用 ColdFusion 服务器
/*
* HelloWorldResponseGET.cfm
* --------
*
* Print the name that is passed in the
* 'name' GET parameter in a sentence
*/
--->
<cfsetting showDebugOutput= "No">
Hello,#url. name#,welcome to the world of Dojo!
</cfsetting>
使用 Java 服务器 (JSP)
/*
' HelloWorldResponseGET.jsp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
*/
response. setContentType ( "text/plain" );
%>
Hello <%= request. getParameter ( "name" ) %>,welcome to the world of Dojo!
使用 Perl 服务器
#
# ' HelloWorldResponseGET.pl
# ' --------
# '
# ' Print the name that is passed in the
# ' ' name ' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param(' name ') . ",welcome to the world of Dojo!/n";
通过POST发送数据到服务器
使用 GET发送数据不错，但是有些时候，你需要使用Dojo来提升用户使用传统表单的用户体验。通常,Dojo有一种更好的处理方式. 再次,这些文件的代码在下面的片段中,在附件中也可以下载. 另外,跟上面一样，你同样要把 'url' 属性指向你服务器支持的文件格式.
首先,我们还要把 HelloWorld.html 文件中body中的部分:
修改为:
<form id="myForm" method="POST">
Please enter your name: <input type="text" name="name">
</form>
接着我们需要把 dojo/method的代码:
dojo.xhrGet({
url: 'HelloWorldResponseGET.PHP',
content: {name: dojo.byId('name').value }
});
</script>
修改为:
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
dojo.xhrPost({
url: 'HelloWorldResponsePOST.PHP',
form: 'myForm'
});
</script>
就像我们前面代码显示的那样,我们把 dojo.xhrGet 修改为 dojo.xhrPost. 我们删除了 'content' 属性，取而代之的是增加了一个新的属性 'form'. 它告知 dojo.xhrPost 函数要使用表单 'myForm' 作为数据的来源l.
最后，当你输入你的名字，点击 'Hello World!' 按钮的时候，提示信息会是 'Hello
使用 PHP 服务器
/*
* HelloWorldResponsePOST.PHP
* --------
*
* Print the name that is passed in the
* 'name' $_POST parameter in a sentence
*/
header ( 'Content-type: text/plain' );
print "Hello {$_POST['name']},welcome to the world of Dojo!/n";
?>
使用ASP 服务器
'
' HelloWorldResponsePOST.asp
' --------
'
' Print the name that is passed in the
' 'name' $_POST parameter in a sentence
'
response. ContentType= "text/plain"
response. write ( "Hello " & request. form ( "name" ) & ",welcome to the world of Dojo!/n" )
%>
使用 ColdFusion 服务器
/*
* HelloWorldResponsePOST.cfm
* --------
*
* Print the name that is passed in the
* 'name' POST parameter in a sentence
*/
--->
<cfsetting showDebugOutput= "No">
Hello,#form. name#,welcome to the world of Dojo!
</cfsetting>
使用 Java 服务器 (JSP)
/*
' HelloWorldResponsePOST.jsp
' --------
'
' Print the name that is passed in the
' 'name' POST parameter in a sentence
*/
response. setContentType ( "text/plain" );
%>
Hello <%= request. getParameter ( "name" ) %>,welcome to the world of Dojo!
使用 Perl 服务器
#
# ' HelloWorldResponsePOST.pl
# ' --------
# '
# ' Print the name that is passed in the
# ' ' name ' POST parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param(' name ') . ",welcome to the world of Dojo!/n";