博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Sencha-概念-Ajax(异步JavaScript和XML)(官网文档翻译13)
阅读量:6369 次
发布时间:2019-06-23

本文共 5344 字,大约阅读时间需要 17 分钟。

煎茶触摸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:

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

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

AJAX选项

需要各种各样的选择,包括设置的方法(GET,POST,PUT和DELETE),发送头文件和设置URL中的params来发送。首先,让我们来看看如何设置的方法,所以我们发送POST请求,而不是GET:

({
url:'myUrl', method:'POST', callback:function(options, success, response){
console.log(response.responseText);}});

发送参数也很简单:

({
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为:

({
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:

({
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是这样的:

({
url:'myUrl', headers:{
"Content-Type":"application/json"}, callback:function(options, success, response){
console.log(response.responseText);}});

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

回拨选项

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

({
url:'myUrl', success:function(response){
console.log("Spiffing, everything worked");}, failure:function(response){
console.log("Curses, something terrible happened");}});

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

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

({
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的真实:

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

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

({
url:'myUrl', timeout:5000, failure:function(response){
console.log(response.timedout);// logs true}});

也有可能中止当前的请求出色的。要做到这一点,你需要保存请求对象的引用给你:

var myRequest =({
url:'myUrl', failure:function(response){
console.log(response.aborted);// logs true}});(myRequest);

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

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

跨域请求

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

假设你的服务器的建立,尽管,发送CORS要求很简单:

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

表上传

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

({
url:'myUrl', form:'myFormId', callback:function(options, success, response){
if(success){
('Success','We got your form submission');}else{
('Fail','Hmm, that did not work');}}});

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

posted on
2012-12-26 21:55 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834860.html

你可能感兴趣的文章
[LeetCode] Water and Jug Problem 水罐问题
查看>>
java数组遍历——iterator和for方法
查看>>
Linux程序存储结构与进程结构堆和栈的区别【转】
查看>>
重置 radio 和 checkbox 的样式
查看>>
Android实战简易教程-第二十三枪(基于Baas的用户注冊和登录模块实现!)
查看>>
oc59--匿名分类
查看>>
redis 持久化
查看>>
机器学习算法总结
查看>>
高效的找出两个List中的不同元素
查看>>
Revit二次钢筋
查看>>
Vertx简介
查看>>
项目经理在项目各阶段的工作重点-更新版
查看>>
s3c2440中U-boot移植时执行cp.b提示:Flash not Erased【转】
查看>>
docker Redis的主从配置
查看>>
博文参考:Java编程中“为了性能”尽量要做到的一些地方
查看>>
【JAVASCRIPT】jquery实现ajax无刷新评论
查看>>
flex---->MXML语法
查看>>
mysql日志设置优化
查看>>
安装oracle遇到的故障
查看>>
进一步了解String
查看>>