ExtJS的Ajax封装

来源：互联网发布：测量数据的表达方法编辑：程序博客网时间：2024/06/06 02:05

对Ext JS的Ajax作了一个简单的封装，以期能适应业务需要。这里只展示了类中的一个方法，希望高手能多提意见。

1、类的定义

/** * 自己的Ajax */Ext.define('Mine.util.Ajax', {    xtype: 'myajax',token: localStorage.getItem("my-token"),    apiDomain: 'http://mydomain.com',//服务端域名/**     *对象型参数的ajax请求     * @param options  object 参数对象     * * {     * *  url:string  api地址，不含域名(*)     * *  method:enum 请求类型（POST as default） optional     *  * if_serialize 是否需要转成JSON （true as default） optional     * *  headers:头部信息（其中的Content-Type默认值为applicatoin/json as default） optional     * *  data:object 要传输的数据，默认为{} optional     * *  success:fn 请求成功时的处理函数 签名：function(returnObj,opts) optional     * *  * returnObj:object 服务端返回数据 optional     * *  * opts:object 传入的参数参数 optional     *  * }     * @constructor     */    Ajax: function (options) {        var method = options.method || 'POST';        var origData = options.data || {};        var data = options.if_serialize ? JSON.parse(origData) : origData;        var success = options.success || this.successProcess;        var headers = {            "X-AUTH-TOKEN": this.token,            "Content-Type": 'application/json'        };        if (options.headers) {            Object.assign(headers, options.headers);        }        if (!Ext.isEmpty(this.token)) {            var me = this;            Ext.Ajax.request({                url: this.apiDomain + options.url,                method: method,                headers: headers,                params: data,                scope: this,                success: function (response, opts) {                    var status = response.status;                    var returnObj = {};                    if (!Ext.isEmpty(response.responseText)) {                        returnObj = JSON.parse(response.responseText);                    }                    if (status >= 200 && status < 300) {                        success(returnObj, opts);                    }                },                failure: me.failProcess            });        }    },    /**     * 请求失败时的处理     * @param response     * @param opts     */    failProcess: function (response, opts) {        var status = response.status;        var returnObj = JSON.parse(response.responseText);        if (status >= 400 && status < 500) {            Ext.Msg.alert('提示：', '您填写的字段格式不正确。');            console.info("status code:", status, "return data:", returnObj);        }        if (status >= 500 && status < 600) {            Ext.Msg.alert('提示：', '服务器错误。');            console.info("status code:", status, "return data:", returnObj);        }        ;    },    /**     * 请求成功时的默认处理     * @param response     * @param otps     */    successProcess: function (response, otps) {        console.info("请求成功，返回数据为：", response);    }});

2、使用

（1）在视图里引入类

requires: ['Mine.util.Ajax']

（2）在对应的控制器里实例化并使用：

    ajax: Ext.create({        xtype: 'vcajax'    }),    createActivity: function (button) {//        var domElements = Ext.getDom(button.up('window').down('form').getEl());        var sendData = Ext.dom.Element.serializeForm(domElements);        this.ajax.Ajax({            url: '/api/xyz',            if_serialize: false,            headers: {                'Content-Type': 'application/x-www-form-urlencoded'            },            data: sendData,            success: this.createActivitySuccess.bind(this)        });    },

1 0