在Ext JS中，处理Ajax异步请求时，常见的几种方式主要基于`Ext.Ajax`类或者`Ext.form.Panel`（对于表单提交）的封装。虽然不严格限定为四种，但以下是一些常用的Ajax异步提交方式：
1. **使用`Ext.Ajax.request`方法**
这是最基本的Ajax请求方式，允许你发送HTTP请求到服务器，并处理响应。你可以通过配置`options`对象来定义请求的各种参数，如URL、请求方法（GET/POST等）、请求头、请求体等。
Ext.Ajax.request({
url: 'your-server-endpoint',
method: 'POST',
jsonData: {
key: 'value'
},
success: function(response) {
// 处理成功响应
},
failure: function(response) {
// 处理失败响应
}
});
2. **使用`Ext.Ajax.get`和`Ext.Ajax.post`方法**
这两个方法分别是`Ext.Ajax.request`的便捷包装，用于发送GET和POST请求。它们简化了请求的配置，使得发送简单的请求变得更加容易。
- 使用`Ext.Ajax.get`：
Ext.Ajax.get({
url: 'your-server-endpoint',
params: {
key: 'value'
},
success: function(response) {
// 处理成功响应
},
failure: function(response) {
// 处理失败响应
}
});
- 使用`Ext.Ajax.post`：
Ext.Ajax.post({
url: 'your-server-endpoint',
jsonData: {
key: 'value'
},
success: function(response) {
// 处理成功响应
},
failure: function(response) {
// 处理失败响应
}
});
3. **通过表单（`Ext.form.Panel`）提交**
如果你的应用场景涉及到表单数据的提交，你可以使用`Ext.form.Panel`的`submit`方法。这个方法允许你以Ajax的方式提交表单，而无需重新加载页面。
var form = Ext.create('Ext.form.Panel', {
// 表单配置...
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password'
}],
buttons: [{
text: 'Submit',
handler: function() {
form.submit({
url: 'your-server-endpoint',
success: function(form, action) {
// 处理成功响应
},
failure: function(form, action) {
// 处理失败响应
}
});
}
}]
});
4. **使用`Ext.data.Store`的`load`方法**
虽然这通常不直接用于发送Ajax请求，但`Ext.data.Store`的`load`方法背后也涉及到了Ajax调用，特别是当你从远程数据源加载数据时。这种方法在数据绑定和自动更新UI组件时非常有用。
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'your-data-endpoint',
reader: {
type: 'json',
rootProperty: 'data'
}
},
listeners: {
load: function(store, records, successful, operation, eOpts) {
// 数据加载完成后的处理
}
}
});
注意：`autoLoad: true`会使Store在创建时自动加载数据，但你也可以通过调用`store.load()`来手动加载数据。
以上是Ext JS中处理Ajax异步请求的一些常用方式。每种方式都有其适用场景，你可以根据具体需求选择最合适的方法。