EXT ajax

轉載：http://my.oschina.net/zimingforever/blog/65382

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差不多，主要是熟悉幾個參數，處理好返回值。