ExtJs: Ajax

Ajax (Asynchronous JavaScript and XML) là là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.
Trong ExtJs, Ajax là 1 phần quan trọng, không thể thiếu và hầu như bạn phải làm việc rất thường xuyên.

Ext.Ajax.request({
    url: 'page.php',
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        // process server response here
    }
});

Mặc định, mỗi request có thời gian timeout là 60s, request theo phương thức "GET". Nếu bạn truyền params thì request sẽ theo phương thức "POST".

Một số thủ thuật trong Ajax

Chỉnh Timeout

Khi bạn chỉnh sửa lại timeout, giá trị timeout được áp dụng cho tất cả các request sau đó.
Để tránh điều này, bạn có thể áp dụng cách làm như sau:

                    Ext.Ajax.request({
                        url: 'yourRequestUrl',
                        timeout: 120000,
                        success: function (response) {
                            Ext.Ajax.timeout = 60000;
                            //…your code here…
                        },
                        failure: function (fp, o) {
                            Ext.Ajax.timeout = 60000;
                            //… your code here…
                        }
                    });

Phạm vi

Do ExtJs viết theo hướng đối tượng, nên khi dùng hàm callback, bạn sẽ gặp tình trạng: không dùng được hàm hay biến có phạm vi là class Cách khắc phục: sử dụng scope

        Ext.Ajax.request({
            url: config.getAccounMailClienttUrl,
            success: function (response) {
                //your code here
                }
            },
            failure: function (fp, o) {
                Ext.Msg.alert('Lỗi ' + fp.status, fp.statusText);
            },
            scope: this
        });

Ví dụ cụ thể: Trong đoạn code dùng Ajax, nếu bạn bỏ "scope" đi, thì khi gọi this.showMessage sẽ có giá trị là undefined

    Ext.define("Nhatkyhoctap.Myapp.ScopeExample", {
        doRequest: function () {
            Ext.Ajax.request({
                url: 'page.php',
                success: function () {
                    this.showMessage("success");
                },
                failure: function () {
                    this.showMessage("failure");
                },
                scope: this//nếu bị bỏ đi, this.showMessage = undefined
            });
        },
        showMessage: function (message) {
            Ext.MessageBox.show({
                title: 'Thông báo',
                msg: message,
                width: 300,
                buttons: Ext.MessageBox.OK
            });
        }
    });
    var scopeEx = new Nhatkyhoctap.Myapp.ScopeExample();
    scopeEx.doRequest();

Decode

Kết quả nhận về luôn ở dạng text. Trường hợp bạn muốn nhận về chuỗi json thì phải dùng hàm Ext.decode(responese, true)

        Ext.Ajax.request({
            url: 'page.php',
            success: function (response) {
                var backObj = Ext.decode(response.responseText);
                //your code here...
            },
            failure: function (fp, o) {
                Ext.Msg.alert('Lỗi ' + fp.status, fp.statusText);
            },
            scope: this
        });