dojo快速入门

第一步，引入dojo.js
dojo的发行包里有4个子目录，要引入的文件是名叫"dojo"的子目录里的dojo.js。
假设你是这样的目录结构:
引用

Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>
Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>
Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>

开始使用dojo
现在开始使用dojo的第一个函数:dojo.byId
dojo.byId就等同于常用的document.getElement
<input type="text" name="username" id="username" value="Mark" />
<script type="text/javascript">
var username = dojo.byId('username').value
alert(username);
</script>
OK，是不是和普通的js库一样，没有任何玄机？

dojo.addOnLoad
现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad
Java代码
1. dojo.addOnLoad(function(){
2.     var username = dojo.byId('username').value
3.     alert(username);
4. });
Java代码
1. dojo.addOnLoad(function(){
2.     var username = dojo.byId('username').value
3.     alert(username);
4. });
Java代码
1. dojo.addOnLoad(function(){
2.     var username = dojo.byId('username').value
3.     alert(username);
4. });

dojo.connect
OK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场
Java代码
1. <script type="text/javascript">
2. function sayHello(event)
3. {
4.     alert("Hello");
5. }
6. dojo.addOnLoad(function(){
7.     var btn = dojo.byId('hello');
8.     dojo.connect(btn,"onclick",sayHello);
9. });
10. </script>
11. <input type="button" id="hello" value="Hello" />
Java代码
1. <script type="text/javascript">
2. function sayHello(event)
3. {
4.     alert("Hello");
5. }
6. dojo.addOnLoad(function(){
7.     var btn = dojo.byId('hello');
8.     dojo.connect(btn,"onclick",sayHello);
9. });
10. </script>
11. <input type="button" id="hello" value="Hello" />
Java代码
1. <script type="text/javascript">
2. function sayHello(event)
3. {
4.     alert("Hello");
5. }
6. dojo.addOnLoad(function(){
7.     var btn = dojo.byId('hello');
8.     dojo.connect(btn,"onclick",sayHello);
9. });
10. </script>
11. <input type="button" id="hello" value="Hello" />

是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope：
Java代码
1. var name = "Mark"
2. function sayHello()
3. {
4.     alert("Hello " + this.name);
5. }
6. var obj = {
7.     name: "Karl"
8. }
9. dojo.addOnLoad(function(){
10.     var btn = dojo.byId('hello');
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
12. });
Java代码
1. var name = "Mark"
2. function sayHello()
3. {
4.     alert("Hello " + this.name);
5. }
6. var obj = {
7.     name: "Karl"
8. }
9. dojo.addOnLoad(function(){
10.     var btn = dojo.byId('hello');
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
12. });
Java代码
1. var name = "Mark"
2. function sayHello()
3. {
4.     alert("Hello " + this.name);
5. }
6. var obj = {
7.     name: "Karl"
8. }
9. dojo.addOnLoad(function(){
10.     var btn = dojo.byId('hello');
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数
12. });

OK，点击按钮，将输出：Hello Karl
这里dojo.connect的第三个参数变成了scope，而handler函数是第四个，实际上
dojo.connect(btn,"onclick",sayHello);
与
dojo.connect(btn,"onclick",null,sayHello);
相同。
更加复杂的用法这里不作介绍，写太多就越搞越复杂了，后面再写文章详细介绍dojo.connect，这里只简单介绍如何绑定DOM事件。

xmlhttp dojo.xhrGet
OK，介绍了简单的DOM操作方法，接下来该到Ajax的传统项目-XmlHttp了
在使用xmlhttp时，需要注意到编码的问题，要让dojo默认绑定为utf-8怎么办呢？很简单，只需要修改一下引入dojo.js时的标签：
Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
Java代码
1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>

多了一个djConfig属性，很简单，第一个isDebug是说是否打开FireBug的Console，第二个是xmlhttp使用的编码。第二个才是重点，设置了就一劳永逸了。

这次我们要点击了hello按钮后发出一个xmlhttp请求:
Java代码
1. function sayHello() {
2.     dojo.xhrGet({
3.         url: "http://localhost/hello/sayHello.jsp",
4.         handleAs: "text",
5.         load: function(responseText)
6.         {
7.           alert(responseText);
8.           dojo.byId("divHello").innerHTML = responseText;
9.         },
10.         error: function(response)
11.         {
12.           alert("Error");
13.         }
14.     });
15. }
16. dojo.connect(btn,"onclick",sayHello);
Java代码
1. function sayHello() {
2.     dojo.xhrGet({
3.         url: "http://localhost/hello/sayHello.jsp",
4.         handleAs: "text",
5.         load: function(responseText)
6.         {
7.           alert(responseText);
8.           dojo.byId("divHello").innerHTML = responseText;
9.         },
10.         error: function(response)
11.         {
12.           alert("Error");
13.         }
14.     });
15. }
16. dojo.connect(btn,"onclick",sayHello);
Java代码
1. function sayHello() {
2.     dojo.xhrGet({
3.         url: "http://localhost/hello/sayHello.jsp",
4.         handleAs: "text",
5.         load: function(responseText)
6.         {
7.           alert(responseText);
8.           dojo.byId("divHello").innerHTML = responseText;
9.         },
10.         error: function(response)
11.         {
12.           alert("Error");
13.         }
14.     });
15. }
16. dojo.connect(btn,"onclick",sayHello);

看看，够不够一目了然？

url 就是url……
handleAs 把获取的内容作为text/html
load 成功时的回调函数
error 失败时的回调函数

那如果要传入参数怎么办?
Java代码
1. var params = {
2.     username:'Mark',
3.     id:'105'
4. }
5. dojo.xhrGet({
6.     url: "http://localhost/hello/sayHello.jsp",
7.     content:params,
8.     //...
9. });
Java代码
1. var params = {
2.     username:'Mark',
3.     id:'105'
4. }
5. dojo.xhrGet({
6.     url: "http://localhost/hello/sayHello.jsp",
7.     content:params,
8.     //...
9. });
Java代码
1. var params = {
2.     username:'Mark',
3.     id:'105'
4. }
5. dojo.xhrGet({
6.     url: "http://localhost/hello/sayHello.jsp",
7.     content:params,
8.     //...
9. });

注意那个content参数，你要传入的参数是个关联数组/object，dojo会自动把参数解析出来，要使用post方法？
dojo.xhrGet ---> dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrDelete

json
那要是我想更换获取到的数据类型，比如json？xml？
修改handleAs即可，如：
handleAs: "json"
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     handleAs: "json",
4.     load: function(json)
5.     {
6.         alert(json.name)
7.     }
8.     //...
9. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     handleAs: "json",
4.     load: function(json)
5.     {
6.         alert(json.name)
7.     }
8.     //...
9. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     handleAs: "json",
4.     load: function(json)
5.     {
6.         alert(json.name)
7.     }
8.     //...
9. });

引用

handleAs: "json-comment-filtered" 使用注释符号/**/把json数据包含起来,推荐使用
handleAs: "json-comment-optional" 首先尝试使用json-comment-filtered,如果执行错误,再使用普通的json格式解析
handleAs: "javascript" dojo尝试把服务器返回的数据当作javascript执行,并把结果作为参数传递给load函数
handleAs: "xml" xml对象。注意在Mozilla和IE中的xml是不同的，推荐使用sarissa

至于json和object的转换等，在http://dojotoolkit.org/book/dojo-book-0-9/part-3- programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json 有一个表格，应该能找到你需要的。

想要直接提交一个表单,就这样:
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     form: dojo.byId("form1")
4.     //...
5. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     form: dojo.byId("form1")
4.     //...
5. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     form: dojo.byId("form1")
4.     //...
5. });

要解决IE下那个臭名昭著的缓存问题，就这样,preventCache会帮你自动生成一个timestamp
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     preventCache: true
4.     //...
5. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     preventCache: true
4.     //...
5. });
Java代码
1. dojo.xhrGet({
2.     url: "http://localhost/hello/sayHello.jsp",
3.     preventCache: true
4.     //...
5. });

价值中国

新知识 - 新思想 - 新经济实名制-专业主义-权益激励

dojo快速入门

您还没有登录，请您登录后发表评论。