【免费】Dojo学习笔记入门篇FirstDojoExample资源-CSDN文库

需积分: 0 199 浏览量更新于2020-09-05 收藏 50KB PDF 举报

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>  <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应用程序。

资源推荐

资源评论