Dojo 是一个强大的JavaScript工具包，为Web开发提供了一系列丰富的功能，包括DOM操作、AJAX交互、动画效果、模块管理等。本篇学习笔记将引导初学者了解如何开始使用Dojo，通过创建一个简单的登录验证示例来入门。
我们需要进行Dojo的基础配置。从Dojo官方网站（http://www.dojotoolkit.org/downloads）下载最新版本的Dojo包，将其放置在项目中的合适位置，例如这里将它放在`lib/dojo`目录下。在HTML页面中，引入Dojo的核心库文件`dojo.js`，并设置`djConfig`参数，如下所示：
```html
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:false"></script>
```
`parseOnLoad:true`表示在页面加载完成后自动解析所有`data-dojo-type`属性标记的模块，`isDebug:false`则关闭调试模式以提高性能。
接下来，我们开始构建第一个Dojo示例，这是一个简单的登录页面。HTML代码如下：
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- 引入Dojo库 -->
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:false"></script>
<style type="text/css">
#container {
border: 1px dotted #b7b7b7;
background: #ededed;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form id="mainForm" action="controller/ajax-controller.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name"/>
<br/>
<label for="password">Password:</label>
<input type="password" name="password" value=""/>
<br/>
<input type="submit" value="Submit"/>
<h1 id="resultText"></h1>
</form>
</body>
</html>
```
在页面中，我们创建了一个表单，用于输入用户名和密码，并有一个用于显示结果的`<h1>`标签。
为了处理表单提交，我们需要使用Dojo的事件处理和AJAX功能。在页面加载完成时，添加一个事件监听器，阻止表单的默认提交行为，并使用`dojo.xhrPost`发送异步POST请求到服务器。当服务器返回响应时，根据返回数据更新结果文本。这部分JavaScript代码如下：
```javascript
<script type="text/javascript">
var formSubmit = function(e){
e.preventDefault();
var resultText = dojo.byId("resultText");
dojo.xhrPost({
url: "controller/controller.php",
form: "mainForm",
handleAs: "text",
handle: function(data, args){
console.info(data);
if(typeof data=="error"){
resultText.innerHTML = "<font color=\"red\">error!</font>";
}else{
if(data === "right"){
resultText.innerHTML = "Right!";
}else if(data==="wrong"){
resultText.innerHTML = "<font color=\"red\">Wrong!Please try it again!</font>";
}
}
}
});
};
// 在页面加载完成后执行
dojo.addOnLoad(function(){
var theForm = dojo.byId("mainForm");
theForm.addEventListener("submit", formSubmit, false);
});
</script>
```
在这个示例中，`dojo.addOnLoad`函数确保在页面完全加载后执行指定的函数。`dojo.byId`用于获取DOM元素，`dojo.xhrPost`用于发送POST请求，`handleAs: "text"`指定了响应数据的格式为文本。`handle`函数接收服务器返回的数据，根据不同的返回值更新结果文本。
至此，我们就完成了使用Dojo创建一个简单登录验证的例子。这个例子展示了如何配置Dojo、处理表单提交以及与服务器进行异步通信。随着对Dojo的深入学习，你可以利用其丰富的功能，如模块化、数据绑定、动画效果等，构建更复杂的Web应用程序。
