DOJO入门(1)-Hello,World!
2006-12-16 11:06
232 查看
参考原文地址：
http://dojo.jot.com/WikiHome/HelloWorld
OK，接下来，新建一个HTML页：
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
</body>
<!-- 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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">
Hello World!
</button>
</body>
</html>
最后的效果：
四、从服务器端读数据
(1)先写一个回调函数：
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函数
}
直接运行的话：
嗯，它需要一个服务器端文件：
在同一目录下建一个response.txt文件，内容如下：
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>
(2)客户端的修改—HTML代码：
将:
<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">
(3)客户端的修改-js代码
将:
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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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, data, 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">
Hello World!
</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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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,keyword2,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 ',
handler: helloCallback,
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 ',
handler: helloCallback,
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!
这是最后的结果：
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>
二、添加一个装饰按钮
(1)在头部再添加一个新的JS section:<!-- 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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">
Hello World!
</button>
</body>
</html>
最后的效果：
四、从服务器端读数据
(1)先写一个回调函数：
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函数
}
直接运行的话：
嗯，它需要一个服务器端文件：
在同一目录下建一个response.txt文件，内容如下：
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>
(2)客户端的修改—HTML代码：
将:
<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">
(3)客户端的修改-js代码
将:
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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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, data, 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">
Hello World!
</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 "-//W3C//DTD HTML 4.01 Transitional//EN">
<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,keyword2,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 ',
handler: helloCallback,
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 ',
handler: helloCallback,
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!
这是最后的结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 张志宇 SERVELET JSP学习讲义-HelloWorldServlet_2
- YII笔记(1)–Hello,world!
- Eclipse CDT Hello World工程makefile分析
- Linux设备驱动程式学习（0） －Hello, world！模块
- 教程：使用 Xcode 编写 Mac OS X 下的"Hello, World!"
- hello,world!
- Flex HelloWorld Demo
- Hibernate HelloWorld（一）
- 从零开始学习jQuery一书_1_HelloWorldjQuery
- Hello from a libc-free world! (Part 1)
- Qt学习之路(3)：Hello, world!(续)
- Android之HelloWorld
- Java入门教程系列 – 第一个程序 “hello, world”
- Hello World @ Cloud Foundry
- 《Hello World——C#》
- HelloWorld App of ffmpeg JNI
- Qt学习之路(3)：Hello, world!(续)
- FreeMarker(FTL) Hello World Tutorial with Example
- 第一课 建立我的第一个安卓程序（not hello world !）