EXT ajax request是ext中对于ajax请求的实现。
通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息
下面的4个例子来自
http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html
例1异步请求，发送请求头。
01 |
Ext.onReady(function () {
|
02 |
new Ext.Button({
|
03 |
renderTo: "div1", |
04 |
text: "后台Ajax提交",
|
05 |
handler: function () {
|
06 |
Ext.Ajax.request({
|
07 |
url: 'Ajax_Func1',
|
08 |
headers: {
|
09 |
'userHeader': 'userMsg'
|
10 |
},
|
11 |
params: { a: 10,b: 20 },
|
12 |
method: 'GET', |
13 |
success: function (response,options) {
|
14 |
Ext.MessageBox.alert('成功','从服务端获取结果: ' + response.responseText);
|
15 |
},
|
16 |
failure: function (response,options) {
|
17 |
Ext.MessageBox.alert('失败','请求超时或网络故障,错误编号：' + response.status);
|
18 |
}
|
19 |
});
|
20 |
},
|
21 |
id: "bt1"
|
22 |
});
|
23 |
|
24 |
}); |
1 |
public ContentResult Ajax_Func1(int a,int b) |
2 |
{ |
3 |
string userHeaderMsg = Convert.ToString(Request.Headers["userHeader"]);
|
4 |
return Content((a + b).ToString() + "，userHeader：" + userHeaderMsg);
|
5 |
} |
01 |
Ext.onReady(function () {
|
02 |
|
03 |
new Ext.Button({
|
04 |
renderTo: "div1", |
05 |
text: "后台Ajax提交方式2返回JSON",
|
06 |
handler: function () {
|
07 |
Ext.Ajax.request({
|
08 |
url: 'Ajax_Func2',
|
09 |
params: { n: 10 },
|
10 |
method: 'POST', |
11 |
callback: function (options,success,response) {
|
12 |
if (success) {
|
13 |
var responseJson = Ext.JSON.decode(response.responseText);
|
14 |
|
15 |
Ext.Msg.alert("成功",options.params.n + "的阶乘是：<font color='red'>" + responseJson.n1 + "</font><br />"
|
16 |
+ options.params.n + "的累加是：<font color='red'>" + responseJson.n2 + "</font>");
|
17 |
} else { |
18 |
Ext.Msg.confirm('失败',
|
19 |
'请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？',function (btn) {
|
20 |
if (btn == 'yes') {
|
21 |
Ext.Ajax.request(options);
|
22 |
}
|
23 |
});
|
24 |
}
|
25 |
}
|
26 |
});
|
27 |
}
|
28 |
});
|
29 |
|
30 |
}); |
01 |
public JsonResult Ajax_Func2(int n)
|
02 |
{ |
03 |
int n1 = 1;
|
04 |
int n2 = 0;
|
05 |
for (int i = 1; i <= n; i++)
|
06 |
{ |
07 |
n1 *= i;
|
08 |
n2 += i;
|
09 |
} |
10 |
var data = new
|
11 |
{ |
12 |
n1 = n1,
|
13 |
n2 = n2
|
14 |
};
|
15 |
return Json(data,JsonRequestBehavior.AllowGet);
|
16 |
} |
01 |
//文件上传 |
02 |
Ext.get("button1").on("click",function () {
|
03 |
Ext.Ajax.request({
|
04 |
url: "Ajax_FileUp",
|
05 |
isupload: true, |
06 |
form: "form1", |
07 |
success: function (response) {
|
08 |
Ext.MessageBox.alert("上传成功，文本文件内容：",response.responseText);
|
09 |
}
|
10 |
});
|
11 |
}); |
1 |
public ContentResult Ajax_FileUp(HttpPostedFileBase file)
|
2 |
{ |
3 |
System.IO.StreamReader r = new System.IO.StreamReader(file.InputStream,System.Text.UTF8Encoding.Default);
|
4 |
var str = r.ReadToEnd();
|
5 |
return Content(str);
|
6 |
} |
例4 异步请求事件。 当发起ajax请求之前，可以监听beforerequest事件，本例每当发起ajax事件时，都会把计算器+1：
1 |
var ajaxCount = 0;
|
2 |
//每当Ajax请求发起时触发： |
3 |
Ext.Ajax.on('beforerequest',function () { Ext.get("span1").update(++ajaxCount) },this);
|
ajax几个常用的参数如下:
successFunction指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
failureFunction指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
scopeObject指定回调函数的作用域，默认为浏览器window。
formObject/String指定要提交的表单id或表单数据对象。
isuploadBoolean指定要提交的表单是否是文件上传表单，默认情况下会自动检查。
headersObject指定请求的Header信息。
xmlDataObject指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonDataObject/String指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
disableCachingBoolean是否禁止cache。
总结一下，ext ajax和jquery的ajax差不多，主要是熟悉几个参数，处理好返回值。