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 请求文本资源
客户端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloDojoAjax.aspx.cs"
Inherits="DojoTest.HelloDojoAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>
<script type="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>
服务端资源——
hello world!!Dojo!
2、使用 xhrGet 获取Json数据
客户端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxJson.aspx.cs" Inherits="DojoTest.DojoAjaxJson" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- 引入 Dojo--%>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
function GetJsonData() {
dojo.xhrGet({
url: "GetCity.aspx", //请求的服务器资源url
handleAs: "json", //返回的数据类型
handle: PrintResult//回调函数
});
return false;
}
//对返回的json数据进行处理,放入表格
function PrintResult(data){
var table = "<table border=\"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());
}
function init() {
//helloworld 函数到按钮的点击事件
dojo.connect(dojo.byId("mybutton"), "onclick", "GetJsonData");
}
//绑定页面加载完成后的初始化函数
dojo.ready(init);
</script>
</head>
<body>
<input type="button" id="mybutton" value="获取json数据" />
</body>
</html>
服务端——
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace JqueryAjaxTest.Data
{
public partial class GetCity : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string result = @"
[{""ProvinceId"":""BJ"",""CityName"":""北京""},
{""ProvinceId"":""TJ"",""CityName"":""天津""}]";
//清空缓冲区
Response.Clear();
//将字符串写入响应输出流
Response.Write(result);
//将当前所有缓冲的输出发送的客户端,并停止该页执行
Response.End();
}
}
}
3、使用xhrGet提交表单
客户端——
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DojoAjaxText.aspx.cs" Inherits="DojoTest.DojoAjaxText" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- 引入 Dojo--%>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
function SubmitForm() {
dojo.xhrGet({
url:"GetService.aspx",
form: "myform", //需要异步提交的表单的 id
handleAs: "text", //默认值,不对返回的数据做任何处理
handle: PrintResult, //正常和错误返回的情况都能处理,可以说是 load 和 error 的混合体,但优先级比 load 低,只有在没有设置 load 时才起作用。
content:{Password:"123456"},//这里可以修改表单中的内容,如果起始表单都为空,则修改无效
sync:false //默认为异步,所设不设false意义不大
});
return false; //为了阻止系统默认的表单提交事件,让表单提交异步进行,如果不返回 false,会引起页面跳转。
}
function PrintResult(response){
dojo.create(
"div",
{
"innerHTML": response
},
dojo.body()
);
}
</script>
</head>
<body>
<form id="myform" onsubmit="return SubmitForm();">
用户名:<input type="text" name="UserID" />
密码:<input type="password" name="Password" />
<input type="submit" name="sub" value="提交" />
</form>
</body>
</html>
服务端——
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DojoTest
{
public partial class GetService : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string id = "";
string pwd = "";
//获取参数
if (!String.IsNullOrEmpty(HttpContext.Current.Request["UserID"]) && !String.IsNullOrEmpty(HttpContext.Current.Request["Password"]))
{
id = HttpContext.Current.Request["UserID"];
pwd=HttpContext.Current.Request["Password"];
}
//清空缓冲区
Response.Clear();
//将字符串写入响应输出流
Response.Write("用户输入id为:"+id+",输入密码为:"+pwd);
//将当前所有缓冲的输出发送的客户端,并停止该页执行
Response.End();
}
}
}
注意:
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、代码中的注释,也说明了一些值得注意的地方。
分享到:
相关推荐
不错的zk+ajax实战教程,推荐下载。 注:K框架Ajax开发实战,共四卷,需要都下载后放在一起,才可以解压打开。
不错的zk+ajax实战教程,推荐下载。
不错的zk+ajax实战教程,推荐下载。
不错的zk+ajax实战教程,推荐下载。
《实战Dojo工具包》教程 pdf,Dojo是一个品质远远超出“原型建造”的Ajax框架库,本实用教程就是为Dojo而写。她将向我们介绍Dojo开发环境的创建、旅行路线编辑器、DOM和HTML的效果、处理DOM、使用Dojo创建AJAX远程...
不错的ajax实战教程,详细讲述用zk快速开发ajax。
内部包含: ajax官方文档 AJAX WEB2.0技术详解.pdf AJAX表格分页模板.doc ajax专家开发手记 如何使用Dojo的DatePicker控件制作联动...ajax框架:dwr 实战.pdf 突破JavaScript编程实例五十讲.rar JavaScript源代码集.rar
从零开始学习jQuery (六) AJAX快餐 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战...
作者处处从实战出发。在丰富的示例中直观地探讨了许多实用的技术。如数据类型转换、文件上传和下载、Struts2应用的安全性、调试与性能分析、FreeMarker、Velocily、Ajax,等等。跟随作者一道深入Struts2。聆听大量...
作者处处从实战出发,在丰富的示例中直观地探讨了许多实用的技术,如数据类型转换、文件上传和下载、提高Struts 2应用的安全性、调试与性能分析、FreeMarker、Velocity、Ajax,等等。跟随作者一道深入Struts 2,聆听...