http://dojo.jot.com/WikiHome/HelloWorld
一、建立一个DOJO的环境
然后建立以下的目录树，将dojo的内容全部复制到其中，就象这样:
OK，接下来，新建一个HTML页：
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
</body>
</html>
二、添加一个装饰按钮
<!-- SECTION 2 -->
<script type="text/javascript">
// 装入widget相关代码
dojo.require("dojo.widget.*");
// 装入Button相关代码
dojo.require("dojo.widget.Button");
</script>
嗯，感觉有点象namespace
(2)在body中加入以下代码：
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
结果如下：
三、引发一个事件
将前面的代码：
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>
改为：
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>
将最终变成：
<!DOCTYPE HTML PUBLIC "-//W
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="./js/dojo/dojo.js"></script>
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.event.*");
// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");
function hellopressed()
{
alert('You pressed the button');
}
function init()
{
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton,'onClick','hellopressed')
}
dojo.addOnLoad(init);
</script>
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="this is my page">
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page.
<br>
<button dojoType="Button" widgetId="helloButton">
</button>
</body>
</html>
最后的效果：
四、从服务器端读数据
function helloCallback(type,data,evt)
{//三个参数：类型、数据、事件
if (type == 'error')
alert('从服务器端读数据错!');
else
alert(data);
}
(2) 将：
function hellopressed()
{
alert('You pressed the button');
}
改为：
function hellopressed()
{
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
});//接收response.txt的数据,并回调helloCallback函数
}
直接运行的话：
Welcome to dojo!form server!
结果：
五、支持交互:使用GET方法将数据发到服务器端，然后再在客户端显示
示例4只支持静态数据，缺少太多的东西，这个示例将它做得更复杂些!
(1)建立一个服务器端程序
建一个jsp页面: GetDataToClient.jsp， 关键代码如下：
<body>
This is my JSP page.
<br>
Hello
<%=request.getParameter("MyName")%>
,welcome to the world of Dojo!
</body>
将:
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
改为：
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
<br>
Please enter your name: <input type="text" id="name">
将:
function hellopressed()
{
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
});
}
改为：
function hellopressed()
{
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. ' GetDataToClient.jsp ') for an Tomcat server
dojo.io.bind({
url: ' GetDataToClient.jsp ',
handler: helloCallback,
content: {MyName: dojo.byId('name').value }
});
}
这比上次多了一个参数:content:{
结果如下：
在此示例中，我们使用Dojo的io.bind将本地数据发送到了服务器端，然后再将服务器端处理后的数据发回了本地!
完整代码如下：
Code 1:
<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="./js/dojo/dojo.js"></script>
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.event.*");
// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");
<!-- SECTION 3 -->
function helloCallback(type,evt)
{
if (type == 'error')
alert('error read from server!');
else
alert(data);
}
function hellopressed()
{
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. ' GetDataToClient.jsp ') for an Tomcat server
dojo.io.bind({
url: 'GetDataToClient.jsp',
handler: helloCallback,
content: {MyName: dojo.byId('name').value }
});
}
function init()
{var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton,'onClick','hellopressed')
}
dojo.addOnLoad(init);
</script>
</head>
<body>
This is my HTML page.
<br>
<button dojoType="Button" widgetId="helloButton">
</button>
<br>
Please enter your name:
<input type="text" id="name">
</body>
</html>
Code 2:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getcontextpath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'GetDataToClient.jsp' starting page</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<Meta http-equiv="keywords" content="keyword1,keyword3">
<Meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
This is my JSP page.
<br>
Hello
<%=request.getParameter("MyName")%>
,welcome to the world of Dojo!
</body>
</html>
六、使用post完成同样的功能 :
Get方法问题比较多，一般我们都使用POST来完成任务。
(1) HTML代码更改：
将:
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
<br>
Please enter your name: <input type="text" id="name">
为:
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
<br>
<form id="myForm" method="POST">
Please enter your name: <input type="text" name="name">
</form>
(2) JS代码更改：
function hellopressed()
{
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. ' GetDataToClient.jsp ') for an JSP server
dojo.io.bind({
url: 'GetDataToClient.jsp ',
content: {name: dojo.byId('name').value }
});
}
改为：
function hellopressed()
{
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
dojo.io.bind({
url: ‘GetDataToClient.jsp ',
formNode: dojo.byId('myForm')
});
}
注意：这次是提交的POST形式的form!
(3) 服务器端的修改:
删除所有的GetDataToClient.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!
这是最后的结果：
