dojo入门笔记(免费)
- 格式：doc
- 大小：58.00 KB
- 文档页数：10
2006年初，dojo还是0.22的时候就很关注它的发展，可一直没有在实际项目中使用。
一来是由于文档的缺少，而来是dojo的相关介绍总是让人望而生畏。
到现在都如此，第一个hello world就搞了一大堆东西，比如widget组件，自定义的script 标签等，加上要引入什么css文件，djConfig、dojo.require等等，让人很迷惑，这么复杂，到底dojo该怎么使用呢？我只是想把dojo当作一个普通的js类库，就像prototype那样？OK，闲话少说，来看看如何使用dojo。
第一步，引入dojo.jsdojo的发行包里有4个子目录，要引入的文件是名叫"dojo"的子目录里的dojo.js。
假设你是这样的目录结构:project|+--dojo-lib| || +--dijit| +--dojo| +--dojox| +--util|+--dojo_hello_world.html<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').valuealert(username);</script>OK，是不是和普通的js库一样，没有任何玄机？dojo.addOnLoad现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo 里叫做dojo.addOnLoad。
dojo.addOnLoad(function(){var username = dojo.byId('username').valuealert(username);});dojo.connectOK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场。
<script type="text/javascript">function sayHello(event){alert("Hello");}dojo.addOnLoad(function(){var btn = dojo.byId('hello');dojo.connect(btn,"onclick",sayHello);});</script><input type="button" id="hello" value="Hello" />是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope：var name = "Mark"function sayHello(){alert("Hello " + );}var obj = {name: "Karl"}dojo.addOnLoad(function(){var btn = dojo.byId('hello');dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数});OK，点击按钮，将输出：Hello Karl。
这里dojo.connect的第三个参数变成了scope，而handler函数是第四个，实际上dojo.connect(btn,"onclick",sayHello); 与dojo.connect(btn,"onclick",null,sayHello); 相同。
更加复杂的用法这里不作介绍，写太多就越搞越复杂了，后面再写文章详细介绍dojo.connect，这里只简单介绍如何绑定DOM事件。
xmlhttp dojo.xhrGetOK，介绍了简单的DOM操作方法，接下来该到Ajax的传统项目-XmlHttp了。
在使用xmlhttp时，需要注意到编码的问题，要让dojo默认绑定为utf-8怎么办呢？很简单，只需要修改一下引入dojo.js时的标签：<script type="text/javascript" src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>多了一个djConfig属性，很简单，第一个isDebug是说是否打开FireBug的Console，第二个是xmlhttp使用的编码。
第二个才是重点，设置了就一劳永逸了。
这次我们要点击了hello按钮后发出一个xmlhttp请求:function sayHello() {dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",load: function(responseText){alert(responseText);dojo.byId("divHello").innerHTML = responseText;},error: function(response){alert("Error");}});}dojo.connect(btn,"onclick",sayHello);看看，够不够一目了然？url 就是url…… ；handleAs 把获取的内容作为text/html ；load 成功时的回调函数；error 失败时的回调函数那如果要传入参数怎么办?var params = {username:'Mark',id:'105'}dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",content:params,//...});注意那个content参数，你要传入的参数是个关联数组/object，dojo会自动把参数解析出来，要使用post方法？dojo.xhrGet ---> dojo.xhrPost ，其他的还有，dojo.xhrPut、dojo.xhrDelete。
json那要是我想更换获取到的数据类型，比如json？xml？修改handleAs即可，如：handleAs:"json"dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "json",load: function(json){alert()}//...});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的转换等，在/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous -function/converting-json有一个表格，应该能找到你需要的。
想要直接提交一个表单就这样:dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",form: dojo.byId("form1")//...});要解决IE下那个臭名昭著的缓存问题，就这样,preventCache会帮你自动生成一个timestampdojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",preventCache: true//...});dojo.hitch scope/context既然用到了xmlhttp，一个常见的问题就是回调函数的scope/context。
在prototype、mootools里我们常用Function.bind，在dojo中，做相同事情的东西叫做dojo.hitch。
var handler = {name:'Mark',execute1: function(){dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",error: function(text){console.dir(this);alert();//输出undefined,这里的this表示当前io参数}//...});},load: function(text){alert();},execute2: function(){dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",error: dojo.hitch(this,"load") //输出Mark//error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx//...});}}OK，基本的东西解决了，还有很多常用的函数没有介绍，比如：dojo.query，dojo.forEach，dojo.marginBox，dojo.contentBox等等。
