ExtJS使用Ajax：Ext.Ajax类与DWR整合教程

"ExtJS对Ajax的支持" 在Web开发中，ExtJS是一个强大的JavaScript库，它提供了丰富的组件和功能，其中包括对Ajax（异步JavaScript和XML）的深入支持。Ajax技术使得网页无需刷新整个页面就能与服务器进行交互，提高了用户体验。ExtJS通过其内置的`Ext.Ajax`类提供了一系列API，简化了Ajax请求的处理。 ### 1. Ext.Ajax入门 `Ext.Ajax`是一个全局对象，用于发起Ajax请求并管理这些请求的生命周期。它提供了各种配置选项，以适应不同场景的需求，使得开发者能够灵活地进行Ajax操作。 #### 1.1 Ext.Ajax.request方法详解 `Ext.Ajax.request`是核心的Ajax请求方法，它可以发送GET、POST、PUT、DELETE等HTTP请求。以下是一个使用`Ext.Ajax.request`的简单示例： ```javascript function login() { var requestConfig = { url: 'loginServer.jsp', // 请求的服务器地址 form: 'loginForm', // 指定要提交的表单id callback: function(options, success, response) { // 回调函数 var msg = ["请求是否成功：", success, "\n", "服务器返回值：", response.responseText]; alert(msg.join('')); } }; Ext.Ajax.request(requestConfig); // 发送请求 } ``` 在这个例子中，`requestConfig`对象包含了请求的相关配置，如URL、要提交的表单以及回调函数。当请求完成时，回调函数会被调用，提供有关请求结果的信息。 ### 2. 提交不同类型的数据 `Ext.Ajax.request`不仅可以处理传统的表单数据，还可以处理XML和JSON数据。例如： - 提交XML数据：通过设置`requestConfig`中的`headers`属性和`dataType`属性，可以指定发送XML数据。 - 提交JSON数据：同样，通过设置`dataType`为'json'，并提供JSON格式的参数，`Ext.Ajax.request`会自动处理JSON编码和解码。 ### 3. 整合Direct Web Remoting (DWR) DWR是一种JavaScript库，允许在浏览器和服务器之间进行实时、安全的通信。在ExtJS中，可以通过以下方式整合DWR： - 在Grid中使用DWR获取后台数据：可以使用DWR的`DWREngine`和`RemoteProxy`来加载和更新Grid的数据。 - DWRTreeLoader：对于树形结构的数据，`DWRTreeLoader`可以便捷地加载和渲染树节点。 - DWRProxy和ComboBox：DWRProxy可以与ExtJS的ComboBox组件结合，动态地填充下拉列表的选项。 ### 4. 数据更新器（Ext.UpdateManager） 除了`Ext.Ajax`，ExtJS还提供了`Ext.UpdateManager`，用于处理简单的页面元素的更新，通常用于实现局部刷新功能。它封装了Ajax请求，简化了更新HTML元素的过程。 ### 5. 任务与总结 学习完这部分内容后，开发者应该能够： 1. 掌握`Ext.Ajax`类的基本用法，包括使用`Ext.Ajax.request`发送Ajax请求。 2. 熟悉如何在ExtJS环境中整合DWR，以利用其强大的功能，如在Grid和ComboBox中使用DWR。 ExtJS的Ajax支持使得开发者可以构建交互性强、响应速度快的Web应用，而无需深入理解底层的XMLHttpRequest细节。通过`Ext.Ajax`和DWR的结合，开发者可以更高效地处理服务器端的数据交互。