Dojo HelloWorld实现
本文是对dojo的helloworold的翻译和学习原文地址（http://dojo.jot.com/WikiHome/HelloWorld）。
1.安装Dojo
首先请创建工程HelloWorldTutorial，再创建如下的目录
- HelloWorldTutorial/
|
|---- js/
|
---- dojo/
然后请下载dojo(http://dojotoolkit.org/download/ )并将其解压缩到dojo目录下，这样在项目中引用成功了，安装后目录如下
- HelloWorldTutorial/
|
|-- js/
|
-- dojo/
|
-- build.txt
-- CHANGELOG
-- demos
|
-- ..
-- dojo.js
-- dojo.js.uncompressed.js
-- iframe_history.html
-- LICENSE
-- README
-- src/
|
-- ..
2.开始Dojo之旅
现在我们需要创建一个引用dojo的HelloWorld.html页面，代码片段如下:
|
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
</body>
</html>
|
script脚本部分负责引用所有dojo的基础函数。
3.创建一个Widget按钮
创建一个“Hello World！”的widget按钮，而且我们可以通过默认(mouseOut, mouseOver, and mouseDown)鼠标事件来改善用户体验。
SECTION 2的代码片段让dojo加载资源，dojo.require和java的import功能相似。
|
<script type="text/javascript">
// 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");
</script>
|
前一句dojo.require代码用来加载dojo的管理功能函数，而并加载”dojo.widget”下所有的功能。而第二句代码仅仅是加载Button控件。（注：但是通过测试发现无论注释掉那一句，页面功能都不受影响）。
将下面代码加入到html页面的body元素中：
|
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
|
dojoType是关键属性，通过设置不同的属性值控制dojo的处理此控制的方式，这里我们使用的是“Button”，但是我同样可以使用input控件。只要dojoType存在，着两种方式的效果是一样的。使用input控件时，按钮的text值必须通过caption属性来设定。
注：示例中使用的widgetId属性是可选，如果没有设置widgetId，Dojo同样识别id。
4.事件绑定
Dojo的事件系统能更有效的绑定事件。首先必须加载事件包，将上面的SECTION 2 处的代码改成：
|
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>
|
写一个简单的函数共button事件调用，代码如下：
|
function helloPressed() {
alert('You pressed the button');
}
|
你理所当然的会想到通过onclick属性来绑定事件，但是这样做却一点效果也没有，不用担心，dojo当然会有自己的一套办法。为什么要加载event包，作用就是要这里体现，代码如下：
|
function init(){
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}
dojo.addOnLoad(init);
|
最后一句的代码和onload的时间一样，加上这句才不会让你前功尽弃。
Dojo加载了init函数后，页面才会正确的展示给大家。Dojo解析后的页面，原本的dom模型已被修改，只有通过dojo.widget.byId才能获取页面元素。
5.读取服务器端数据
通过alert弹出信息只是万里长征的第一步，后面的风景的跟美丽。怎样从服务器端取出数据才是我们最关心的功能，通过使用dojo.io.bind包，我们可以方便的实现这样的功能(bind包详细信息请参考http://dojotoolkit.org/docs)
回掉函数用来处理服务器端的返回的数据，代码如下：
|
function helloCallback(type, data, evt){
if (type == 'error')
alert('Error when retrieving data from the server!');
else
alert(data);
}
|
三个参数都很重要，缺一不可! Type表示请求成功与否，成功：'load' ，失败：'error'；data保存了服务器端返回来的数据；第三个参数保存了dojo的事件对象。下一步要设定服务端请求，修改helloPressed函数，代码如下：
|
function helloPressed(){
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
}))
}
|
上面的代码设定了请求的url及回调函数。
最后新建 response.txt. 输入'Welcome to the Dojo Hello World Tutorial'.执行效果如图
6.使用GET方法向服务端发送数据
获取静态数据还是相对简单，但是现实生活中的做用不大。因此我们要向服务端发送点什么，才更具有说服力。在html文件的body节点中添加如下代码：
|
<form id="myForm" method="get">
Please enter your name: <input type="text" name="name">
</form>
|
在同一目录下新建HelloWorldResponse.jsp，代码如下：
|
<%
response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!
|
再一次修改helloPressed函数
|
function helloPressed(){
dojo.io.bind({
url: 'HelloWorldResponse.jsp',
handler: helloCallback,
content: {name: dojo.byId('name').value }
});
}
|
以上代码中加入了新的属性-content，content用来向服务端发送任意参数值（name：参数名称，dojo.byId('name').value:参数值），参数名称可以任意给定。
7.使用POST方法向服务端发送数据
真实的应用中都是通过表单来提交一组数据，这时我们就需要使用POST方法。实现很简单，首先将Form中方法改成POST，再修改helloPressed方法就大功告成了，代码如下：
|
function helloPressed(){
//绑定要请求的url及form
dojo.io.bind({
url: 'HelloWorldResponsePOST.jsp',
handler: helloCallback,
formNode: dojo.byId('myForm')
});
}
|
总结：
通过对dojo经典案例helloworld的学习和翻译，算是dojo初步入门。
做人简单一点好