2007-06-18

Dojo Helloworld分析

关键字: dojo ajax helloworld

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


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

1、加载dojo配置

 
  1. <script type="text/javascript">  
  2. var djConfig = {  
  3.         bindEncoding: 'UTF-8'  
  4. };  
  5. </script>  

2、导入dojo.js文件

 
  1. <script type="text/javascript" src="js/dojo/dojo.js"></script>  

、自定义函数

<script>…………….</script>

4、定义初始加载函数
 
  1. //接在上面的脚本中  
  2. function initMethod()  
  3. {  
  4.        var helloButton = dojo.widget.byId('helloButton');  
  5.    ojo.event.connect(helloButton, 'onClick', 'helloPressed');  
  6. }  
  7. 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编码。

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

  • 源码.rar (2.2 KB)
  • 描述: 主要页面及Servlet源码
  • 下载次数: 288
评论
ahut9923 2007-07-16
效果就像我们写快速回复时候，当你提交时，在提交按钮旁边出现的提示
ahut9923 2007-07-16
楼上，loading效果是当提交一个数据的时候，页面提示“数据提交中....”，当用户再次提交的时候，提示用户操作还没结束，不能继续提交。
Tin 2007-07-16
loding...的效果是出现指示条么？
你需要在io.bind的时候让这个div的display为none。
在callback的时候让display为""。
即可。
formNode的方式是使用dojo默认的序列化，如果你需要可以自己定义bind的函数，然后自己调用dojo的序列化表格功能就可以了。
ahut9923 2007-07-16
我用dojo.io.bind函数的返回值实现loading效果，但是感觉又感觉不是很对! 能把自己写的js代码发一份给我吗？ahut9923@126.com
trace 2007-07-13
loading...效果，用自己写的js代码很好办，但在dojo里面怎么做我还不知道，实在抱歉。
ahut9923 2007-07-12
上面的代码着实给了我很大的帮助，请问楼主，怎么样实现提交时候的"loading......"效果？
trace
搜索本博客
我的相册
A2b936ce-df10-4c34-ac1d-9d9e96f4141f-thumb
Range表达式图示说明
共 8 张
最近加入圈子
存档
最新评论