Sencha-概念-Ajax（异步JavaScript和XML）（官网文档翻译13）

煎茶触摸2提供了各种方便的方式来获得您的应用程序的流入和流出的数据。所有的数据绑定的组件，如列表，嵌套列表和DataView使用商店的，这是很容易配置获取并保存了大量的各种来源的数据。我们将在数据管理与商店，但首先让我们从如何发出简单的AJAX请求。

简单的请求Ext.Ajax

AJAX请求的URL通常是为您的应用程序在同一个域。例如，如果您的应用程序在http://myapp.com，您可以发送Ajax请求URL类似http://myapp.com/login.php和http://myapp.com/products/1.json的但不是到其他领域，如http://google.com。这是因为浏览器的安全限制，，但煎茶触摸功能提供了一些替代方案来解决这个问题，我们将在短期内（跨域请求和JSON-P）。

现在，这里是我们如何能够使一个AJAX请求加载数据形成我们的域名上的URL：

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

假设您的应用程序是http://myapp.com，这是怎么回事发送一个GET请求，http://myapp.com/myUrl。AJAX调用是异步的，所以一旦响应回来，我们的回调函数被调用的响应。我们正在做上面的内容记录到控制台的请求完成时的响应。至今很简单，让我们来看看我们还有什么可以做的。

AJAX选项

，Ext.Ajax需要各种各样的选择，包括设置的方法（GET，POST，PUT和DELETE），发送头文件和设置URL中的params来发送。首先，让我们来看看如何设置的方法，所以我们发送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);}});

当我们这样设置PARAMS，请求将被自动发送一个POST params对象作为表单数据发送。上述请求，就像提交表单的用户名和密码字段。

如果我们想这是一个GET请求发送，而不是我们可以指定方法再次，在这种情况下，我们的PARAMS自动转义，附加到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”。这样，当你犯了一个GET请求，许多Web服务器将缓存响应，并给你同样的事情每次你的要求。这加快了网络，但不总是你想要的。在应用程序中其实是很少，你想要什么，所以我们“萧条”通过添加时间戳到每一个请求的缓存。这告诉web服务器把它是一个新鲜的，未缓存的请求。

如果你想关闭该行为，我们就可以设置为false disableCaching：

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

发送消息头

我们来看看当它涉及到自定义请求本身的最后一个选项是标头选项。这使您可以发送任何自定义的头，你要到你的服务器，这常常是有用的，当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的/网页检查，你会看到，Content-Type头被设置为application / json。您的Web服务器可以拿起发送给您正确的反应。你可以传递任何数量的头，你喜欢的标头“选项。

回拨选项

并不是每一个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");}});

这不正是你所期望他们做的，希望是大部分的时间，这是你的成功回调，被称为。这是很常见的一个成功回调，更新UI或任何其他需要的应用程序流，和故障处理程序，要么重试的要求或提醒用户出现了错误。

您可以在相同的时间提供成功 / 失败和回调，所以此请求如果一切正常，我们的 成功函数被称为第一，其次是主要的回调函数，否则它会是失败，随后回调：

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");}});

超时和中止请求

请求可能会失败的另一种方式是，如果服务器的响应和请求超时时间过长。在这种情况下，你的 失败函数将被调用，并请求对象，它是通过将有TIMEDOUT的真实：

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

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

默认情况下，超时阈值是30秒，但你可以指定它为每个请求通过设定超时时间，单位为毫秒。在这种情况下，我们的请求将在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);

这一次我们的失败回调被称为其response.aborted属性设置。我们可以使用所有的错误处理，在我们的应用程序：

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

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

跨域请求

一个相对较新的现代浏览器的能力被称为的CORS，代表跨地资源共享。这可以让你的浏览器没有通常的安全限制，执行请求发送到其他域。煎茶触摸2 CORS的支持，虽然你可能需要做一个小小的设置，使Web服务器上的。如果你不熟悉你所需要的做您的Web服务器上，使CORS，快速谷歌搜索应该给你足够的答案。

假设你的服务器的建立，尽管，发送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');}}});

这找到一个<form>的页面上的标签ID =的“myFormId”，抓住它的数据，并把它的请求参数对象，就像在本指南开始。然后将其提交给指定的URL，并调用回调函数，像正常的。