本文的目的是爲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 按鈕，而不是我們期待的.
添加以上一段代碼後，在body片段中加入下列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". 擴展名分別如下 ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), 或者是 Java ('.jsp').
首先, 在文件 HelloWorld.html 中 (例如：body),需要增加另外一個元素 - 一個 input 元素. 所以,把以下的代碼:
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
</button>
修改爲:
Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
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 , welcome to the world of Dojo!' ，還有你輸入的名字.
這是服務器的代碼. 有一些是可以在下面下載.
使用 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中的部分:
修改爲:
接着我們需要把 dojo/method的代碼:
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
error: helloError,
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',
load: helloCallback,
error: helloError,
form: 'myForm'
});
</script>
就像我們前面代碼顯示的那樣, 我們把 dojo.xhrGet 修改爲 dojo.xhrPost. 我們刪除了 'content' 屬性，取而代之的是增加了一個新的屬性 'form'. 它告知 dojo.xhrPost 函數要使用表單 'myForm' 作爲數據的來源l.
最後，當你輸入你的名字，點擊 'Hello World!' 按鈕的時候，提示信息會是 'Hello , welcome to the world of Dojo!' 和你的名字.
使用 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";