当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Dojo 学习笔记入门篇 First Dojo Example

Javascript
Jquery实战_读书笔记2 选择器
JQuery 确定css方框模型(盒模型Box Model)
jQuery 入门级学习笔记及源码
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
JavaScript 学习笔记(十四) 正则表达式
JQuery 操作Javascript对象和数组的工具函数小结
用JS写的一个TableView控件代码
JQuery 1.4 中的Ajax问题
window.onbeforeunload方法在IE下无法正常工作的解决办法
优化javascript的执行速度
jQuery 1.4 15个你应该知道的新特性(译)
js 模拟实现类似c#下的hashtable的简单功能代码
setTimeout与setInterval在不同浏览器下的差异
php gethostbyname获取域名ip地址函数详解
JavaScript 未结束的字符串常量常见解决方法
document.getElementById为空或不是对象的解决方法
javascript中利用数组实现的循环队列代码

Javascript 中的 Dojo 学习笔记入门篇 First Dojo Example


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 91 ::
收藏到网摘: n/a

Dojo学习笔记入门篇,第一个小例子, 刚开始学习dojo的朋友可以参考下。 Step 1: Configurate Dojo
从http://www.dojotoolkit.org/downloads 下载最新的Dojo包,并且放到你工程的某一个地方。比如,我就放把我的dojo库放在lib文件夹下(如图一)。

图一(文件目录结构)
在你的页面中加入如下代码,那么就完成了最基本的配置。
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false"></script>
Step 2: Start your First Example
我的第一个例子是模拟一个简单的登录页面,如果成功,则显示“Right!”,反之则显示“Wrong!Please try it again!”
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" 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><style type="text/css" bogus="1"> #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>
<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");
dojo.connect(theForm,"onsubmit","formSubmit");
});
// --></script>
</body>
</html>

(对于其中的Dojo方法,可以查看Dojo的API,在此不再赘述)
后台采用php,代码如下:
复制代码 代码如下:

<?php
if($_POST["name"] == "blithe" && $_POST["password"]=="blithe"){
print "right";
}else{
print "wrong";
}
?>