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

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

简单的请求Ext.Ajax

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

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

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

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

AJAX选项

&＃xff0c;Ext.Ajax需要各种各样的选择&＃xff0c;包括设置的方法&＃xff08;GET&＃xff0c;POST&＃xff0c;PUT和DELETE&＃xff09;&＃xff0c;发送头文件和设置URL中的params来发送。首先&＃xff0c;让我们来看看如何设置的方法&＃xff0c;所以我们发送POST请求&＃xff0c;而不是GET&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,method:&＃39;POST&＃39;,callback:function(options, success, response){console.log(response.responseText);}});

发送参数也很简单&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,params:{username:&＃39;Ed&＃39;,password:&＃39;not a good place to put a password&＃39;},callback:function(options, success, response){console.log(response.responseText);}});

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

如果我们想这是一个GET请求发送&＃xff0c;而不是我们可以指定方法再次&＃xff0c;在这种情况下&＃xff0c;我们的PARAMS自动转义&＃xff0c;附加到URL为&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,method:&＃39;GET&＃39;,params:{username:&＃39;Ed&＃39;,password:&＃39;bad place for a password&＃39;},callback:function(options, success, response){console.log(response.responseText);}});

它发送一个请求到&＃xff1a;

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

您可能已经注意到&＃xff0c;我们的最后一个请求创建了一个网址&＃xff0c;包含“_DC &＃61; 1329443875411”。这样&＃xff0c;当你犯了一个GET请求&＃xff0c;许多Web服务器将缓存响应&＃xff0c;并给你同样的事情每次你的要求。这加快了网络&＃xff0c;但不总是你想要的。在应用程序中其实是很少&＃xff0c;你想要什么&＃xff0c;所以我们“萧条”通过添加时间戳到每一个请求的缓存。这告诉web服务器把它是一个新鲜的&＃xff0c;未缓存的请求。

如果你想关闭该行为&＃xff0c;我们就可以设置为false disableCaching&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,method:&＃39;GET&＃39;,disableCaching:false,params:{username:&＃39;Ed&＃39;,password:&＃39;bad place for a password&＃39;},callback:function(options, success, response){console.log(response.responseText);}});

现在我们的要求不再包含缓存清除的字符串&＃xff0c;并期待更多类似这样的&＃xff1a;

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

发送消息头

我们来看看当它涉及到自定义请求本身的最后一个选项是标头选项。这使您可以发送任何自定义的头&＃xff0c;你要到你的服务器&＃xff0c;这常常是有用的&＃xff0c;当Web服务器返回不同的内容&＃xff0c;根据这些头文件。例如&＃xff0c;如果你的Web服务器返回的头它是通过基于JSON&＃xff0c;XML或CSV&＃xff0c;我们可以要求它为JSON是这样的&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,headers:{"Content-Type":"application/json"},callback:function(options, success, response){console.log(response.responseText);}});

如果您创建一个这样的请求&＃xff0c;并检查它在Firebug的/网页检查&＃xff0c;你会看到&＃xff0c;Content-Type头被设置为application / json。您的Web服务器可以拿起发送给您正确的反应。你可以传递任何数量的头&＃xff0c;你喜欢的标头“选项。

回拨选项

并不是每一个AJAX请求成功。有时服务器已关闭&＃xff0c;或您的网络连接断开&＃xff0c;或别的什么不好的事情发生。通过Ext.Ajax让您指定这些情况下&＃xff0c;每个单独的回调&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,success:function(response){console.log("Spiffing, everything worked");},failure:function(response){console.log("Curses, something terrible happened");}});

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

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

Ext.Ajax.request({url:&＃39;myUrl&＃39;,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");}});

超时和中止请求

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

Ext.Ajax.request({url:&＃39;myUrl&＃39;,failure:function(response){console.log(response.timedout);// logs true}});

默认情况下&＃xff0c;超时阈值是30秒&＃xff0c;但你可以指定它为每个请求通过设定超时时间&＃xff0c;单位为毫秒。在这种情况下&＃xff0c;我们的请求将在5秒后放弃&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,timeout:5000,failure:function(response){console.log(response.timedout);// logs true}});

也有可能中止当前的请求出色的。要做到这一点&＃xff0c;你需要保存请求对象的引用Ext.Ajax.request给你&＃xff1a;

var myRequest &＃61;Ext.Ajax.request({url:&＃39;myUrl&＃39;,failure:function(response){console.log(response.aborted);// logs true}});Ext.Ajax.abort(myRequest);

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

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

跨域请求

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

假设你的服务器的建立&＃xff0c;尽管&＃xff0c;发送CORS要求很简单&＃xff1a;

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

表上传

我们将讨论的最后一件事是上传的形式。这也很容易&＃xff1a;

Ext.Ajax.request({url:&＃39;myUrl&＃39;,form:&＃39;myFormId&＃39;,callback:function(options, success, response){if(success){Ext.Msg.alert(&＃39;Success&＃39;,&＃39;We got your form submission&＃39;);}else{Ext.Msg.alert(&＃39;Fail&＃39;,&＃39;Hmm, that did not work&＃39;);}}});

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