前端之家收集整理的这篇文章主要介绍了
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 请求文本资源
客户端——
- <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="HelloDojoAjax.aspx.cs"
- Inherits="DojoTest.HelloDojoAjax"%>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title></title>
- <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"type="text/javascript"></script>
- <scripttype="text/javascript">
- function helloWorld(){
- dojo.xhrGet({
- url:"HelloDojo.txt",//请求的服务器资源url
- handleAs:"text",//返回的数据类型
- load:function(response,ioArgs){alert(response);},//成功后回调函数
- error:function(error,ioArgs){alert(error.message);}//出错时回调函数
- });
- }
- //绑定页面加载完成后的初始化函数
- dojo.ready(helloWorld);
- </script>
- </head>
- <body>
- </body>
- </html>
服务端资源——
helloworld!!Dojo!
2、使用 xhrGet 获取Json数据
客户端——
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="DojoAjaxJson.aspx.cs"Inherits="DojoTest.DojoAjaxJson"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<%--引入Dojo--%>
<scripttype="text/javascript">
functionGetJsonData(){
url:"GetCity.aspx",0); background-color:inherit">handleAs:"json",0); background-color:inherit">handle:PrintResult//回调函数
});
returnfalse;
//对返回的json数据进行处理，放入表格
functionPrintResult(data){
vartable="<tableborder=\"1\">";
table+="<tr><th>ProvinceId</th><th>CityName</th></tr>";
dojo.forEach(data,function(city){
table+="<tr><td>";
table+=city.ProvinceId;
table+="</td><td>";
table+=city.CityName;
table+="</td></tr>";
table+="</table>";
dojo.place(table,dojo.body());
}
functioninit(){
//helloworld函数到按钮的点击事件
dojo.connect(dojo.byId("mybutton"),"onclick","GetJsonData");
dojo.ready(init);
<inputtype="button"id="mybutton"value="获取json数据"/>
服务端——
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
namespaceJqueryAjaxTest.Data
{
publicpartialclassGetCity:System.Web.UI.Page
protectedvoidPage_Load(objectsender,EventArgse)
{
stringresult=@"
[{""ProvinceId"":""BJ"",""CityName"":""北京""},
{""ProvinceId"":""TJ"",""CityName"":""天津""}]";
//清空缓冲区
Response.Clear();
//将字符串写入响应输出流
Response.Write(result);
//将当前所有缓冲的输出发送的客户端，并停止该页执行
Response.End();
}
3、使用xhrGet提交表单
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="DojoAjaxText.aspx.cs"Inherits="DojoTest.DojoAjaxText"%>
functionSubmitForm(){
url:"GetService.aspx",
form:"myform",//需要异步提交的表单的id
handleAs:"text",//默认值，不对返回的数据做任何处理
handle:PrintResult,//正常和错误返回的情况都能处理，可以说是load和error的混合体，但优先级比load低，只有在没有设置load时才起作用。
content:{Password:"123456"},//这里可以修改表单中的内容，如果起始表单都为空，则修改无效
sync:false//默认为异步，所设不设false意义不大
returnfalse;//为了阻止系统默认的表单提交事件，让表单提交异步进行，如果不返回false，会引起页面跳转。
functionPrintResult(response){
dojo.create(
"div",0); background-color:inherit">"innerHTML":response
},0); background-color:inherit">dojo.body()
);
</script>
</head>
<body>
<formid="myform"onsubmit="returnSubmitForm();">
用户名：<inputtype="text"name="UserID"/>
密码：<inputtype="password"name="Password"/>
<inputtype="submit"name="sub"value="提交"/>
</form>
</body>
服务端——
namespaceDojoTest
publicpartialclassGetService:System.Web.UI.Page
stringid="";
stringpwd="";
//获取参数
if(!String.IsNullOrEmpty(HttpContext.Current.Request["UserID"])&&!String.IsNullOrEmpty(HttpContext.Current.Request["Password"]))
id=HttpContext.Current.Request["UserID"];
pwd=HttpContext.Current.Request["Password"];
Response.Write("用户输入id为："+id+",输入密码为："+pwd);
注意：
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、代码中的注释，也说明了一些值得注意的地方。
