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函数，其具体内容如下：

 

1. function helloPressed()  
2. {  
3.         dojo.io.bind({  
4.   
5.                        url: 'Operator.jsp',  
6.   
7.                        load: helloCallback,  
8.   
9.                        error: helloCallbackError,  
10.   
11.                        content: {user: dojo.byId('name').value }  
12.   
13.                     });  
14. }  

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

 

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

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

 

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

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

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

下面来看看helloCallback和helloCallbackError函数：

1、helloCallback函数

 

1. function helloCallback(type, data, evt)  
2. {  
3.                   alert(data);  
4.                   ///alert(evt instanceof XMLHttpRequest);  
5. }  

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

2、helloCallbackError函数

 

1. function helloCallbackError(type, error) {  
2.   
3.                       alert("Error when retrieving data from the server!")  
4.   
5. }  

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

 

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

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

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