Sencha Touch 2 使用AJAX进行数据交互

"Sencha Touch 2 是一个用于构建移动Web应用程序的JavaScript框架，它提供了丰富的组件和功能，包括对AJAX请求的支持。本帮助文档主要聚焦于在Sencha Touch 2 中如何使用AJAX进行数据交互，涵盖简单请求、跨域请求以及表单上传等内容。" Sencha Touch 2 通过其内置的`Ext.Ajax`类提供了一套完整的AJAX API，使得开发者可以轻松地向服务器发送异步请求并接收响应数据，这对于移动应用的数据加载和输出至关重要。所有基于数据绑定的组件，如Lists（列表）、Nested Lists（嵌套列表）以及使用Store（存储）的DataViews，都依赖于AJAX请求来获取或保存数据。 ### 1. Simple Requests with `Ext.Ajax` 在Sencha Touch 2中，执行简单的AJAX请求通常涉及到调用`Ext.Ajax.request`方法。这个方法允许你指定URL、请求方法（GET、POST等）、请求头、参数以及其他配置项。例如，以下代码展示了如何发送一个GET请求： ```javascript Ext.Ajax.request({ url: 'http://myapp.com/data', method: 'GET', success: function(response) { var data = Ext.decode(response.responseText); // 处理返回的数据 }, failure: function(response) { // 处理请求失败的情况 } }); ``` `success`和`failure`回调函数分别处理请求成功和失败时的操作，`response.responseText`包含服务器返回的JSON或其他格式的数据。 ### 2. Cross-Domain Requests 由于浏览器的安全限制，通常只能向同一域名下发送AJAX请求。但Sencha Touch 2 支持跨域请求（CORS），允许你向其他域名发送AJAX请求。要实现跨域，你需要在服务器端设置适当的CORS策略，并在客户端的请求配置中指定`withCredentials`和`headers`等选项： ```javascript Ext.Ajax.request({ url: 'http://otherdomain.com/data', method: 'GET', withCredentials: true, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, success: function(response) { // ... }, failure: function(response) { // ... } }); ``` 设置`withCredentials`为`true`允许携带用户认证信息，而添加自定义`headers`则可能因跨域策略不同而需要。 ### 3. Form Uploads Sencha Touch 2 还支持通过AJAX方式进行表单文件上传。这通常涉及使用`formId`配置项来指定包含上传表单的ID，并使用`params`传递额外的POST数据。以下是一个示例： ```javascript Ext.Ajax.request({ url: 'http://myapp.com/upload', method: 'POST', params: { name: 'John Doe' }, formId: 'upload-form', // 表单ID success: function(response) { // ... }, failure: function(response) { // ... } }); ``` 在这个例子中，`upload-form`是包含文件输入字段的表单ID，文件将会随着POST数据一起发送到服务器。 在深入学习Sencha Touch 2 的Store管理和数据处理之前，了解如何利用`Ext.Ajax`进行基本的AJAX操作是非常重要的，这为构建复杂的数据驱动应用奠定了基础。通过结合使用Store、Models和AJAX，开发者可以实现与服务器的高效数据交换，创建出强大的移动应用。