EXT ajax简单实例

转载：http://www.cnblogs.com/xiepeixing/archive/2012/10/24/2736751.html

 

EXT ajax request是ext中对于ajax请求的实现。

通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息

例1异步请求，发送请求头。

Ext.onReady(function () {
    new Ext.Button({
        renderTo: "div1",
        text: "后台Ajax提交",
        handler: function () {
            Ext.Ajax.request({
                url: 'Ajax_Func1',
                headers: {
                    'userHeader': 'userMsg'
                },
                params: { a: 10, b: 20 },
                method: 'GET',
                success: function (response, options) {
                    Ext.MessageBox.alert('成功', '从服务端获取结果: ' + response.responseText);
                },
                failure: function (response, options) {
                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                }
            });
        },
        id: "bt1"
    });
 
});

后台的代码：

public ContentResult Ajax_Func1(int a, int b)
{
    string userHeaderMsg = Convert.ToString(Request.Headers["userHeader"]);
    return Content((a + b).ToString() + "，userHeader：" + userHeaderMsg);
}

例2 异步请求，返回json结果

Ext.onReady(function () {
 
    new Ext.Button({
        renderTo: "div1",
        text: "后台Ajax提交方式2返回JSON",
        handler: function () {
            Ext.Ajax.request({
                url: 'Ajax_Func2',
                params: { n: 10 },
                method: 'POST',
                callback: function (options, success, response) {
                    if (success) {
                        var responseJson = Ext.JSON.decode(response.responseText);
 
                        Ext.Msg.alert("成功", options.params.n + "的阶乘是：<font color='red'>" + responseJson.n1 + "</font><br />"
　　　　　　　　　　　　　　　　　　　　　　+ options.params.n + "的累加是：<font color='red'>" + responseJson.n2 + "</font>");
                    } else {
                        Ext.Msg.confirm('失败',
                                            '请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？', function (btn) {
                                                if (btn == 'yes') {
                                                    Ext.Ajax.request(options);
                                                }
                                            });
                    }
                }
            });
        }
    });
 
});

例3 异步文件上传：

//文件上传
Ext.get("button1").on("click", function () {
    Ext.Ajax.request({
        url: "Ajax_FileUp",
        isUpload: true,
        form: "form1",
        success: function (response) {
            Ext.MessageBox.alert("上传成功，文本文件内容：", response.responseText);
        }
    });
});

public ContentResult Ajax_FileUp(HttpPostedFileBase file)
{
    System.IO.StreamReader r = new System.IO.StreamReader(file.InputStream, System.Text.UTF8Encoding.Default);
    var str = r.ReadToEnd();
    return Content(str);
}

例4 异步请求事件。 当发起ajax请求之前，可以监听beforerequest事件，本例每当发起ajax事件时，都会把计算器+1：

var ajaxCount = 0;
//每当Ajax请求发起时触发：
Ext.Ajax.on('beforerequest', function () { Ext.get("span1").update(++ajaxCount) }, this);

 

ajax几个常用的参数如下:

success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。

failure Function 指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。

scope Object 指定回调函数的作用域，默认为浏览器window。

form Object/String 指定要提交的表单id或表单数据对象。

isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。

headers Object 指定请求的Header信息。

xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。

jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。

 

disableCaching Boolean 是否禁止cache。

 

总结一下，ext ajax和jquery的ajax差不多，主要是熟悉几个参数，处理好返回值。