Dojo1.3.x的Ajax示例

整理人：黄诚

QQ群：65643887

这篇文章主要是帮助对Dojo感兴趣的朋友们快速实现网站上的例子。

http://sitepen.com/labs/guides/?guide=DojoQuickStart#Ajax

它教程分了3部分，其中的例子不容易上手。我这里提供一个打包文件AjaxWithDojo.war下面我将详细说明操作步骤，及对应语法解释：

配置环境：

eclipse 3.4.x, tomcat6.x, AjaxWithDojo.war,Dojo1.3.x

 

配置运行环境。

第一步：导入AjaxWithDojo.war

File  -> Import -> Web -> WAR file

WAR file: Bowse..中找到AjaxWithDojo.war

点Finish

就可以在Eclipse中看见我们的刚才的导入的例子。

展开后我们可以看到它的目录结构如下图：

图表 1.1

第二步启动它。

选择skeleton.tml右击Run As -> Run On Server

在How do you want to select the server?

选择Manually define a new server

在Server name:中填写AjaxWithDojo

Server runtime environment:选择Tomcat v6.0 Server

如果没有的配置的话，就在后面的Add…那里增加一个。

如下图2.

 

 

 

1：

 

图表 2.1

 

点Finish

程序会自动启动。

然后我们会在eclipse的内置浏览器中看见效果。

 

语法解释

获取数据

我用的是skeleton.html文件来做下面的演示。

现在我们来分析，产生第一个效果的Dojo代码的语法。

//定义一个init初始化方法，以便页面加载后就好调用，如最后一句dojo.addOnLoad(init);

var init = function(){   

         var contentNode = dojo.byId("content");//这里就是document.getElementById的dojo实现，一样的是为了获取id为content的div标签

         //这是个经过dojo包装后的xmlhttprequest对象方法。

         dojo.xhrGet({                   

                   url: "js/sample.txt",        //同样的它需要请求的目的地址

   handleAs: "text",                 //在请求内容返回后用哪种方式处理text文本格式.

       load: function(data,args){   //这里是定义当数据到达，它将被加载处理，dojo需要一个函数来处理它

                            //这里调用了dojo的一个减隐效果

                            dojo.fadeOut({         

                                      node: contentNode,

                                     onEnd: function(){

                                       contentNode.innerHTML = data;//在接点中添入返回的数据 

                                       dojo.fadeIn({node: contentNode}).play();   

                                     }

                            }).play();

                   },

                   //如果有任何的错误发生，将在下面进行处理，这里是在控制台显示警告错误。

                   error: function(error,args){

                            console.warn("error!",error);

                   }

         });

};

dojo.addOnLoad(init);

 

下面是另一种替代方案。

 

var init = function(){

         dojo.xhrGet({

                   url: "js/sample.txt",

                   handleAs: "text",

                   handle: function(data,args){

                            if(typeof data == "error"){

                                     console.warn("error!");

                                     console.log(args);

                            }else{

                                     // the fade can be plugged in here, too

                                     dojo.byId("content").innerHTML = data;//将取得的数据直接放在div标签里面

                            }

                   }

         });

};

dojo.addOnLoad(init);    

 

它文档中也提到了。XHR对象也是有局限性的，最大的一个问题是url不能跨网域，也就是你不能提交请求到当前的以外的域名。但Dojo提供了dojo.io.iframe和dojo.io.script它们有先进的用法。

 

你可能直接在本地文件系统直接运行例子的想法，这些例子是可以运行的。但推荐你还是在服务器上去测试它们。

 

发送数据

我用的是post.html文件来做演示。

所有的Dojo XHR方法都是双向的，唯一不同的是他们的方法，使用POST方法，就使用dojo.xhrPost,内置数据在请求(而不是写成查询字符串，就如dojo.xhrGet那样)，这个数据能被直接设置为一个content参数对象，如下：

dojo.addOnLoad(function(){

         dojo.xhrPost({

                   url:"submit.html",

                   content: {

                            "key":"value",

                            "foo":42,

                            "bar": {

                                     "baz" :"value"   

                            }

                   },

                   load: function(data,ioargs){

                            console.log(data);

                   }

         });

});

 

而更常见的一个方式使用form表单的形式来提交，这里我使用了submit.jsp文件来替代ajax-submit.php

<form id="mainForm" action="submit.jsp" method="post">

         <label for="firstName">Name: </label>

         <input type="text" id="firstName" name="firstName" value="Enter Name" />

         <input type="submit"  value="submit" />

</form>

原文例子

<form id="mainForm" action="ajax-submit.php" method="post">

         <label for="firstName">Name: </label>

         <input type="text" id="firstName" name="firstName"

                   value="Enter Name" />

</form>

dojo.connect来监听本地表单到目的URL的提交事件

 

 

//提交表单

var formSubmit = function(e){

         // 阻止表单直接提交

         e.preventDefault();

         // 使用xhrPost在后台提交表单

         dojo.xhrPost({

                   url: "submit.jsp",

                   form: "mainForm",

                   handleAs: "text",

                   handle: function(data,args){

                            if(typeof data == "error"){

                                     console.warn("error!",args);

                            }else{

                                     // 在控制台中显示数据

                                     console.log(data);

                            }

                   }

         });

};

dojo.addOnLoad(function(){

         var theForm = dojo.byId("mainForm");

         // dojo.connect来监听本地表单到目的URL的提交事件  

         dojo.connect(theForm,"onsubmit",formSubmit);

});

 

下面是submit.jsp代码

<%

String s = request.getParameter("firstName");

System.out.println(s);

String ss = new String(s.getBytes("ISO-8859-1"), "UTF-8");

out.println(ss);

%>

 

原例子如下ajax-submit.php

 

<?php

         print "DATA RECEIVED:";

         print "<ul>";

         foreach($_REQUEST as $key => $var){

                   print "<li>".$key." = ".$var."</li>";

         }

         print "</ul>";

?>

对象数据

我用的是json.html文件来演示。

从服务器取得文本是不错，但有更好的JavaScript对象json数据对象。下面我们就用json对象为例子来处理，我们 创建一个simple-object.json文件来加载，代码如下：

 

    {

         foo: "bar",

         name: "SitePen",

         aFunction: function(){

                   alert("internal function run");    

         },

         nested: {

             sub: "element",

             another: "subelement"

         }

}

 

 

var postData = function(){

         dojo.xhrPost({

                   url: "js/simple-object.json",

                   handleAs: "json", //获取json对象格式的数据

                   load: function(data,ioargs){

                     //成功后添入内容，运行函数

                     dojo.byId("testHeading").innerHTML += " by: "+data.name;

                     if(data.aFunction && data.aFunction()){

                       //调用了aFunction函数，它只提供弹出对话框

                     }

                   }

         });

};

dojo.addOnLoad(postData);

 

这里没法上传附件.需要AjaxWithDojo.war文件的朋友请到我的qq群的共享空间下载.