Dojo Helloworld分析

昨天研究了一下dojo的helloworld，将一些心得记录如下。

dojo的加载有四步,顺序一定不能颠倒。

1、加载dojo配置	<script type="text/javascript"> var djConfig = { bindEncoding: 'UTF-8' }; </script>
2、导入dojo.js文件	<script type="text/javascript" src="js/dojo/dojo.js"></script>
、自定义函数	<script>…………….</script>
4、定义初始加载函数	//接在上面的脚本中 function initMethod() { var helloButton = dojo.widget.byId('helloButton'); ojo.event.connect(helloButton, 'onClick', 'helloPressed'); } dojo.addOnLoad(initMethod);

 

Hellword的例子中，主线是一个button，通过它触发三个不同的函数，来实现三个典型的dojo调用，以下分别叙述：

 

1、直接弹出对话框。（直接调用客户端的JavaScript函数）

定义helloPressed函数，直接调用alert方法就可以了。

 

2、用get方法与后台通信。

同样是定义helloPressed函数，其具体内容如下：

function helloPressed()
{
        dojo.io.bind({

                       url: 'Operator.jsp',

                       load: helloCallback,

                       error: helloCallbackError,

                       content: {user: dojo.byId('name').value }

                    });
}

与后台通信，关键的调用就是这个dojo.io.bind。其中的url就不说了，load表示得到响应后的处理函数，error表示服务器端报错后的处理函数，content表示的就是get方法要传送的内容，其中，user表示变量名，在后台可以用getParameter("user")来取得变量值，user后面的就是变量值了。

 

3、用post方法与后台通信。

也是定义helloPressed函数，具体内容如下：

function helloPressed()
{
          dojo.io.bind({
                         url: 'Operator.jsp',
                         load: helloCallback,
                         error: helloCallbackError,
                       ///formNode属性只不过是将表单中的参数全部读出，然后由dojo.io.bind来
                       ///传送到服务器端（以post的形式），表单并没有被提交。
                       formNode: dojo.byId('myForm')
                    });
}

可以看到，这里不同的仅仅是formNode属性。这个属性指定了一个要传输的form。在试验中我发现，被指定的form并没有被提交，而只是dojo.io.bind提取了form中的变量，然后用自己的方法提交到了服务器端。

至此，三个典型的dojo方法调用就展示完毕了。

下面来看看helloCallback和helloCallbackError函数：

1、helloCallback函数

function helloCallback(type, data, evt)
{
                  alert(data);
                  ///alert(evt instanceof XMLHttpRequest);
}

这个函数的参数都是特定的。其中，data是从服务器端传回的文本，evt是一个XMLHttpRequest变量。

2、helloCallbackError函数

function helloCallbackError(type, error) {

                      alert("Error when retrieving data from the server!")

}

这个函数的参数同样也是固定的。

 

最后，来说一说用get或post方法与服务器通信时，中文问题的解决。

在Operator.jsp这个页面中，不需要设置任何的编码信息，就可以正确显示中文。在这里，dojo的客户端程序中，只能用UTF-8编码。

在更复杂的应用中（比如连接数据库），若发现有乱码问题，那么一定是服务器端的问题，通过在服务器端的程序中改变编码格式，就可以解决。

评论

8 楼 reasonsoft 2007-08-09  

好东西，谢谢，dojo还要学啊

7 楼 reasonsoft 2007-08-09  

oppopp

6 楼 ahut9923 2007-07-16  

效果就像我们写快速回复时候，当你提交时，在提交按钮旁边出现的提示

5 楼 ahut9923 2007-07-16  

楼上，loading效果是当提交一个数据的时候，页面提示“数据提交中....”，当用户再次提交的时候，提示用户操作还没结束，不能继续提交。

4 楼 Tin 2007-07-16  

loding...的效果是出现指示条么？
你需要在io.bind的时候让这个div的display为none。
在callback的时候让display为""。
即可。
formNode的方式是使用dojo默认的序列化，如果你需要可以自己定义bind的函数，然后自己调用dojo的序列化表格功能就可以了。

3 楼 ahut9923 2007-07-16  

我用dojo.io.bind函数的返回值实现loading效果，但是感觉又感觉不是很对! 能把自己写的js代码发一份给我吗？[e-mail]

2 楼 trace 2007-07-13  

loading...效果，用自己写的js代码很好办，但在dojo里面怎么做我还不知道，实在抱歉。

1 楼 ahut9923 2007-07-12  

上面的代码着实给了我很大的帮助，请问楼主，怎么样实现提交时候的"loading......"效果？