ExtJS中的Ajax使用教程

"本资源主要介绍了ExtJS框架中对Ajax的支持，包括Ext.Ajax类的使用和整合DWR的方法。" 在ExtJS中，Ajax功能是通过`Ext.Ajax`类来实现的，它提供了一种简洁且灵活的方式来处理Ajax请求。`Ext.Ajax`是一个全局的对象，简化了与服务器端的异步通信。这个类的核心方法是`Ext.Ajax.request`，它是发送Ajax请求的主要手段。 1. Ext.Ajax.request方法详解 `Ext.Ajax.request`方法允许开发者向服务器发送HTTP请求，其参数`requestConfig`是一个配置对象，包含以下关键属性： - `url`: 指定请求的服务器URL。 - `form`: 如果需要提交表单数据，可以设置为表单的ID，Ext会自动处理表单数据的序列化。 - `params`: 可选参数，用于传递额外的数据，可以是对象或字符串形式。 - `callback`: 回调函数，接收三个参数：`options`（请求配置）、`success`（布尔值，表示请求是否成功）和`response`（服务器返回的响应对象）。 例如： ```javascript function login() { var requestConfig = { url: 'loginServer.jsp', form: 'loginForm', callback: function(options, success, response) { var msg = ["请求是否成功：", success, "\n", "服务器返回值：", response.responseText]; alert(msg.join('')); } }; Ext.Ajax.request(requestConfig); } ``` 这个示例展示了如何使用`Ext.Ajax.request`进行登录操作，提交表单数据到服务器，并在回调函数中处理返回结果。 2. Ext.Ajax.request提交数据 - 提交XML数据：可以通过`params`或`jsonData`配置项来传递XML数据，`jsonData`会自动设置`Content-Type`为`application/json`。 - 提交JSON数据：使用`params`时，可以将数据序列化为JSON字符串，或者直接在`jsonData`中设置JSON对象。 3. Ext.Update数据更新器 `Ext.UpdateManager`是用于更新DOM元素内容的工具，通常与Ajax请求结合使用，更新指定元素的HTML内容。它提供了一种简便的方式，将服务器返回的数据应用到页面的某个部分。 4. 在Ext中直接使用DWR Direct Web Remoting (DWR) 是一种在JavaScript和服务器端之间进行异步通信的技术。在ExtJS中，可以使用DWR来方便地获取和操作后台数据。 - 在Grid中使用DWR获取后台数据：可以利用DWR的特性，直接将服务器返回的数据绑定到Ext Grid面板。 - DWRTreeLoader：用于加载DWR生成的树结构数据，可以实现在Ext TreePanel中的动态加载。 - DWRProxy与ComboBox：DWRProxy可以配合ComboBox控件，实现远程数据源的动态加载和选择。 总结来说，`Ext.Ajax`类是ExtJS中进行Ajax操作的关键，提供了丰富的功能，包括数据提交、请求处理和回调函数，使得开发者能够更高效地处理前后端交互。同时，通过整合DWR，可以进一步增强ExtJS应用程序的交互性和实时性。学习和掌握这些知识点对于进行富客户端应用开发非常重要。