Dojo—ajax框架实战

xhrGet 是 XHR 框架中最重要的函数，使用频率也最高。使用它即可以请求服务器上的静态文本资源如 txt、xml 等，也可以获取动态页面 php、jsp、asp 等，只要从服务器返回的是字符数据流即可。

 

除了 xhrGet，Dojo 的 XHR 框架还包含 xhrPost，rawXhrPost，xhrPut，rawXhrPut，xhrDelete 。这几个函数与 xhrGet 类似，使用方法和参数都可以参考 xhrGet 。区别在于他们的 HTTP 请求类型，xhrPost 发送的是 Post 请求，xhrPut 发送的是 Put 请求，xhrDelete 发生的是 Delete 请求。

 

下面我们看几个实例：

 

1、使用 xhrGet 请求文本资源

 客户端——

[html] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloDojoAjax.aspx.cs"  
  2.     Inherits="DojoTest.HelloDojoAjax" %>  
  3.   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.   
  11.       function　helloWorld(){  
  12.           dojo.xhrGet({  
  13. 　　　　        url:"HelloDojo.txt",//请求的服务器资源url  
  14. 　　　　        handleAs:"text",//返回的数据类型  
  15. 　　　　        load:function(response,ioArgs){alert(response);},//成功后回调函数  
  16. 　　　　        error:function(error,ioArgs){alert(error.message);}//出错时回调函数  
  17. 　　        });  
  18.        }  
  19.   
  20.        //绑定页面加载完成后的初始化函数  
  21.        dojo.ready(helloWorld);  
  22.     </script>  
  23. </head>  
  24. <body>  
  25.      
  26. </body>  
  27. </html>  

 

服务端资源——

[html] view plaincopyprint?
  1. hello world!!Dojo!  

 

 

2、使用 xhrGet 获取Json数据

客户端——

[html] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxJson.aspx.cs" Inherits="DojoTest.DojoAjaxJson" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <%-- 引入 Dojo--%>  
  8.     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>  
  9.       
  10.     <script type="text/javascript">  
  11.         function GetJsonData() {  
  12.             dojo.xhrGet({  
  13.                 url: "GetCity.aspx", //请求的服务器资源url  
  14.                 handleAs: "json", //返回的数据类型  
  15.                 handle: PrintResult//回调函数  
  16.             });  
  17.             return false;  
  18.         }  
  19.   
  20.   
  21.         //对返回的json数据进行处理，放入表格  
  22.         function PrintResult(data){  
  23.             
  24.             var table = "<table border=\"1\">";  
  25.             table += "<tr><th>ProvinceId</th><th>CityName</th></tr>";  
  26.             dojo.forEach(data, function(city) {  
  27.                 table += "<tr><td>";  
  28.                 table += city.ProvinceId;  
  29.                 table += "</td><td>";  
  30.                 table += city.CityName;  
  31.                 table += "</td></tr>";  
  32.             });  
  33.             table += "</table>";  
  34.             dojo.place(table, dojo.body());  
  35.        }  
  36.   
  37.        function init() {  
  38.            //helloworld 函数到按钮的点击事件  
  39.            dojo.connect(dojo.byId("mybutton"), "onclick", "GetJsonData");  
  40.        }  
  41.   
  42.        //绑定页面加载完成后的初始化函数  
  43.        dojo.ready(init);  
  44.     </script>  
  45. </head>  
  46. <body>  
  47.       <input type="button" id="mybutton" value="获取json数据" />  
  48. </body>  
  49. </html>  

 

服务端——

[html] view plaincopyprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace JqueryAjaxTest.Data  
  9. {  
  10.     public partial class GetCity : System.Web.UI.Page  
  11.     {  
  12.         
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             string result = @"  
  16. [{""ProvinceId"":""BJ"",""CityName"":""北京""},  
  17.  {""ProvinceId"":""TJ"",""CityName"":""天津""}]";  
  18.   
  19.            //清空缓冲区  
  20.            Response.Clear();  
  21.            //将字符串写入响应输出流  
  22.            Response.Write(result);  
  23.            //将当前所有缓冲的输出发送的客户端，并停止该页执行  
  24.            Response.End();  
  25.         }  
  26.   
  27.     }  
  28. }  

 

3、使用xhrGet提交表单

客户端——

[html] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxText.aspx.cs" Inherits="DojoTest.DojoAjaxText" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <%-- 引入 Dojo--%>  
  8.     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.   
  11.         function SubmitForm() {  
  12.             dojo.xhrGet({  
  13.                 url:"GetService.aspx",  
  14.                 form: "myform", //需要异步提交的表单的 id  
  15.                 handleAs: "text", //默认值，不对返回的数据做任何处理  
  16.                 handle: PrintResult, //正常和错误返回的情况都能处理，可以说是 load 和 error 的混合体，但优先级比 load 低，只有在没有设置 load 时才起作用。  
  17.                 content:{Password:"123456"},//这里可以修改表单中的内容，如果起始表单都为空，则修改无效  
  18.                 sync:false //默认为异步，所设不设false意义不大  
  19.   
  20.             });  
  21.             return false; //为了阻止系统默认的表单提交事件，让表单提交异步进行，如果不返回 false，会引起页面跳转。  
  22.         }  
  23.   
  24.         function PrintResult(response){  
  25.             dojo.create(  
  26.                 "div",  
  27.                 {  
  28.                     "innerHTML": response  
  29.                 },  
  30.                 dojo.body()  
  31.               );  
  32.         }  
  33.     </script>  
  34. </head>  
  35. <body>  
  36.     <form id="myform" onsubmit="return SubmitForm();">  
  37.         用户名：<input type="text" name="UserID" />  
  38.         密码：<input type="password" name="Password" />  
  39.         <input type="submit" name="sub" value="提交" />  
  40.     </form>  
  41. </body>  
  42. </html>  

服务端——

[html] view plaincopyprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace DojoTest  
  9. {  
  10.     public partial class GetService : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             string id = "";  
  15.             string pwd = "";  
  16.             //获取参数  
  17.             if (!String.IsNullOrEmpty(HttpContext.Current.Request["UserID"]) && !String.IsNullOrEmpty(HttpContext.Current.Request["Password"]))  
  18.             {  
  19.                 id = HttpContext.Current.Request["UserID"];  
  20.                 pwd=HttpContext.Current.Request["Password"];  
  21.             }  
  22.   
  23.             //清空缓冲区  
  24.             Response.Clear();  
  25.             //将字符串写入响应输出流  
  26.             Response.Write("用户输入id为："+id+",输入密码为："+pwd);  
  27.             //将当前所有缓冲的输出发送的客户端，并停止该页执行  
  28.             Response.End();  
  29.   
  30.         }  
  31.     }  
  32. }  

 

注意：

1、

回调函数PrintResult包含两个参数：response 和 ioArgs。

response：表示从服务器端返回的数据，Dojo 已经根据 handleAs 设置的数据类型进行了预处理。

ioArgs: 这是一个对象，包含调用 xhrGet 时使用的一些参数。之所以把这些信息放在一个对象中并传递给回调函数是为了给回调函数一个执行“上下文”，让回调函数知道自己属于哪个 HTTP 请求，请求有哪些参数，返回的数据是什么类型等。这些信息在调试程序时特别有用。

ioArgs.url：请求的 URL，与调用 xhrGet 时设置的值一样。

ioArgs.query：请求中包含的参数， URL 中“ ? ”后面的内容。

ioArgs.handAs：如何对返回的数据进行预处理，与调用 xhrGet 时设置的值一样。

ioArgs.xhr： xhrGet 函数使用的 XHR 对象。

 

2、handleAs（预处理方式）

text：默认值，不对返回的数据做任何处理

xml：返回 XHR 对象的 responseXML

javascript：使用 dojo.eval 处理返回的数据，返回处理结果

json：使用 dojo.fromJSon 来处理返回的数据，返回生成的 Json 对象

json-comment-optional：如果有数据包含在注释符中，则只使用 dojo.fromJSon 处理这部分数据，如果没有数据包含在注释符中，则使用 dojo.fromJSon 处理全部数据。

json-comment-filtered：数据应该包含在 /* … */ 中，返回使用 dojo.fromJSon 生成的 Json 对象，如果数据不是包含在注释符中则不处理。

 

3、代码中的注释，也说明了一些值得注意的地方。

 

 

posted @ 2013-10-15 18:25  huidaoli  阅读(671)  评论(0)  编辑  收藏  举报