在 Sencha Touch 中使用 AJAX

Sencha Touch 提供了多种便捷的方式来获取应用程序的输入和输出数据。所有数据绑定的组件（如列表、嵌套列表和 DataViews）都使用 Stores，这些 Stores 易于配置，可以从各种来源获取数据并将其保存到各种来源。我们稍后将研究如何使用 stores 管理数据，但首先让我们从如何生成简单的 AJAX 请求开始。

使用 Ext.Ajax 的简单请求

由于浏览器安全限制，AJAX 请求通常发送到与您的应用程序位于同一域中的 URL。例如，如果您的应用程序位于 http://myapp.com，您可以将 AJAX 请求发送到诸如 http://myapp.com/login.php 和 http://myapp.com/products/1.json 之类的 URL，但不能发送到其他域，例如 http://google.com。但是，Sencha Touch 提供了一些替代方法来绕过此限制，如本指南的最后一部分所示（跨域请求和 JSON-P）。

以下代码显示了一个 AJAX 请求，用于从同一域中的 URL 加载数据

Ext.Ajax.request({
    url: 'myUrl',
    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

假设您的应用程序位于 http://myapp.com，则之前的代码向 http://myapp.com/myUrl 发送 GET 请求。由于 AJAX 调用是异步的，因此一旦响应返回，就会使用响应调用回调函数。在此示例中，回调函数在请求完成后将响应内容记录到控制台。

AJAX 选项

Ext.Ajax 接受各种选项，包括设置方法（GET、POST、PUT 或 DELETE）、发送标头以及设置要在 URL 中发送的参数。以下代码设置了方法，以便发送 POST 请求而不是 GET 请求

Ext.Ajax.request({
    url: 'myUrl',
    method: 'POST',

    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

参数设置如下例所示

Ext.Ajax.request({
    url: 'myUrl',

    params: {
        username: 'Ed',
        password: 'not a good place to put a password'
    },

    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

当像此示例中那样设置参数时，请求会自动作为 POST 发送，并将 params 对象作为表单数据发送。上面的上一个请求就像提交带有用户名和密码字段的表单。

如果我们想将其作为 GET 请求发送，我们必须再次指定方法，在这种情况下，我们的参数会自动转义并附加到 URL

Ext.Ajax.request({
    url: 'myUrl',
    method: 'GET',

    params: {
        username: 'Ed',
        password: 'bad place for a password'
    },

    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

之前的代码示例生成以下请求

http://mywebsite.com/myUrl?_dc=1329443875411&username=Ed&password=bad%20place%20for%20a%20password

您可能已经注意到，我们的请求创建了一个包含 "_dc=1329443875411" 的 URL。当您像这样发出 GET 请求时，许多 Web 服务器会缓存响应并在您每次发出请求时将相同的响应发送回给您。虽然这加快了 Web 速度，但这并不总是您想要的。实际上，在应用程序中，这很少是您想要的，因此我们通过向每个请求添加时间戳来“破坏”缓存。这告诉 Web 服务器将其视为新的、未缓存的请求。

如果您想关闭此行为，我们可以将 disableCaching 设置为 false，如下面的代码示例所示

Ext.Ajax.request({
    url: 'myUrl',
    method: 'GET',
    disableCaching: false,

    params: {
        username: 'Ed',
        password: 'bad place for a password'
    },

    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

由于请求不再包含缓存破坏字符串，因此它看起来像以下字符串

http://mywebsite.com/myUrl?username=Ed&password=bad%20place%20for%20a%20password

发送标头

与自定义请求相关的另一个选项是 headers 选项。这使您可以向服务器发送任何自定义标头，当 Web 服务器根据这些标头返回不同的内容时，这通常很有用。例如，如果您的 Web 服务器根据传递给它的标头返回 JSON、XML 或 CSV，我们可以像以下示例中那样请求 JSON

Ext.Ajax.request({
    url: 'myUrl',

    headers: {
        "Content-Type": "application/json"
    },

    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

如果您创建这样的请求并在 Firebug/Web Inspector 中检查它，您将看到 Content-Type 标头已设置为 application/json。您的 Web 服务器可以接收到此信息并向您发送正确的响应。您可以将任意数量的标头传递到 headers 选项中。

回调选项

并非每个 AJAX 请求都成功：有时服务器宕机，或者您的互联网连接断开，或者发生其他糟糕的事情。Ext.Ajax 允许您为每种情况指定单独的回调

Ext.Ajax.request({
    url: 'myUrl',

    success: function(response) {
        console.log("Spiffing, everything worked");
    },

    failure: function(response) {
        console.log("Curses, something terrible happened");
    }
});

这些回调的作用与您期望的完全相同，并且希望大多数时候都会调用您的 success 回调。提供一个 success 回调来更新 UI 或执行应用程序流程所需的任何其他操作，以及一个 failure 处理程序来重新发送请求或警告用户出现问题，这非常常见。

您可以同时提供 success/failure 和 callback，因此对于此请求，首先调用 success 函数（如果一切正常），然后调用主 callback 函数。在失败的情况下，首先调用 failure 函数，然后调用 callback

Ext.Ajax.request({
    url: 'myUrl',

    success: function(response) {
        console.log("Spiffing, everything worked");
    },

    failure: function(response) {
        console.log("Curses, something terrible happened");
    },

    callback: function(options, success, response) {
        console.log("It is what it is");
    }
});

超时和中止请求

请求可能失败的另一种方式是服务器响应时间过长且请求超时。在这种情况下，将调用您的 failure 函数，并且传递给它的请求对象会将 timedout 变量设置为 true

Ext.Ajax.request({
    url: 'myUrl',

    failure: function(response) {
        console.log(response.timedout); // logs true
    }
});

默认情况下，超时阈值为 30 秒，但您可以通过在毫秒内设置 timeout 值来为每个请求指定超时阈值。在以下情况下，请求将在 5 秒后放弃

Ext.Ajax.request({
    url: 'myUrl',
    timeout: 5000,

    failure: function(response) {
        console.log(response.timedout); // logs true
    }
});

也可以中止当前正在进行的请求。为此，您需要保存对 Ext.Ajax.request 返回的请求对象的引用，如下面的代码示例所示

var myRequest = Ext.Ajax.request({
    url: 'myUrl',

    failure: function(response) {
        console.log(response.aborted); // logs true
    }
});

Ext.Ajax.abort(myRequest);

此时将调用 failure 回调，并且其 response.aborted 属性已设置。您可以在您的应用程序中使用上面的所有错误处理

Ext.Ajax.request({
    url: 'myUrl',

    failure: function(response) {
        if (response.timedout) {
            Ext.Msg.alert('Timeout', "The server timed out :(");
        } else if (response.aborted) {
            Ext.Msg.alert('Aborted', "Looks like you aborted the request");
        } else {
            Ext.Msg.alert('Bad', "Something went wrong with your request");
        }
    }
});

跨域请求

现代浏览器的一项相对较新的功能称为 CORS，它代表跨域资源共享。这允许您向其他域发送请求，而没有浏览器强制执行的通常安全限制。Sencha Touch 提供对 CORS 的支持，尽管您可能需要配置您的 Web 服务器才能启用它。如果您不熟悉为 CORS 设置 Web 服务器所需的操作，那么快速的 Web 搜索应该会给您提供大量的答案。

假设您的服务器已设置好，发送 CORS 请求很容易

Ext.Ajax.request({
    url: 'http://www.somedomain.com/some/awesome/url.php',
    withCredentials: true,
    useDefaultXhrHeader: false
});

表单上传

本指南中涵盖的最后一个主题是上传表单，以下示例代码对此功能进行了说明

Ext.Ajax.request({
    url: 'myUrl',
    form: 'myFormId',

    callback: function(options, success, response) {
        if (success) {
            Ext.Msg.alert('Success', 'We got your form submission');
        } else {
            Ext.Msg.alert('Fail', 'Hmm, that did not work');
        }
    }
});

这会在页面上查找 id="myFormId" 的 <form> 标记，检索其数据并将其放入请求 params 对象中，如本指南开头所示。然后，它将其提交到指定的 URL 并像往常一样调用您的回调。