第十五天(Using AJAX with Sencha Touch)
原文地址:http://docs-origin.sencha.com/touch/2.2.0/#!/guide/ajax
Using AJAX with Sencha Touch在st中使用AJAXContents
Sencha Touch provides a variety of convenient ways to get data into and out of your application. All of the data-bound Components such as Lists,Nested Lists,and DataViews use Stores,which are easily configured to fetch and save data to a large variety of sources. We will look at managing data with stores later on,but first let us start with how to generate simple AJAX requests. st提供了很多种向应用导入导出数据的方式。所有的数据绑定组件,例如Lists、Nested List及DataViews都使用了很容易配置的数据存储来从大量的数据源存取数据。我们稍后会看如何管理数据存储的数据,首先我们看下如何生成一个简单的ajax请求。 Simple Requests with Ext.Ajax用Ext.Ajax发送简单的请求Because of browser security restrictions,AJAX requests are usually made to urls on the same domain as your application. For example,if your application is found at http://myapp.com,you can send AJAX requests to urls such as http://myapp.com/login.php and http://myapp.com/products/1.json,but not to other domains such as http://google.com. However,Sencha Touch provides some alternatives to get around this limitation,as shown in the final part of this guide (Cross-Domain Requests and JSON-P). 由于浏览器安全策略的限制,ajax请求通常与你的应用使用相同的域。例如,如果你的应用建立在http://myapp.com, 你可以向这些url发送请求,http://myapp.com/login.php 、http://myapp.com/products/1.json,但是不能向其它域如http://google.com发送请求。然而,st提供了几种绕开该限制的方法,如该向导的最后一部分所述(Cross-Domain Request 和JSON-P). The following code shows an AJAX request to load data from an url on the same domain: 下面的代码展示了向同一个域上的url请求数据: Ext.Ajax.request({ url: 'myUrl', callback function(options success response) { consolelogresponseresponseText);}}); Assuming that your app is on http://myapp.com,the previous code sends a GET request to http://myapp.com/myUrl. Since AJAX calls are asynchronous,once the response comes back,the callback function is called with the response. In this example the callback function logs the contents of the response to the console when the request has finished. 假设你的app在http://myapp.com上,上面的代码向http://myapp.com/myUrl发送了一个get请求。尽管AJAX调用是异步的,一旦响应返回,callback函数就会被调用。在这个例子中,当请求结束时,callback函数会将响应的内容打印出来。 AJAX OptionsAJAX配置项Ext.Ajaxtakes a wide variety of options,including setting the method (GET,POST,PUT,or DELETE),sending headers,and setting params to be sent in the url. The following code sets the method such that a POST request is sent instead of a GET: Ext.Ajax有大量的配置项,包括设置请求方法(GET、POST、PUT 或者DELETE),请求头,url中要发送的参数。下面的代码设置了请求的方法为POST而不是GET: method'POST' Sending parameters done as shown in the following example: Sending Headers发送头信息Another option related to customizing the request is the headers option. This enables you to send any custom headers to your server,which is often useful when the web server returns different content based on these headers. For example,if your web server returns JSON,XML,or CSV based on the header it is passed,we can request JSON like in the following example: 请求的另一个可配置项时头信息。这让你能够将任何客户头信息发送给服务器,这在服务器依据不同的头信息返回不同的内容时很有用。例如,如果你的web服务器依据头信息返回json、xml或者csv时,我们可以像下面这样请求json: headers"Content-Type""application/json" If you create a request like this and inspect it in Firebug/web inspector,you will see that the Content-Type header has been set to application/json. Your web server can pick up on this and send you the right response. You can pass any number of headers you like into the headers option. Timeouts and Aborting Requests超时和废弃请求Another way requests can fail is when the server took too long to respond and the request timed out. In this case yourfailurefunction is called,and the request object it is passed has the timedout variable set to true: 请求失败的另一种情况是服务器需要很长时间响应导致请求超时。在这种情况下,failure方法被调用,传递的请求对象的timedout参数被设为true: timedout // logs true By default the timeout threshold is 30 seconds,but you can specify it for every request by setting the timeout value in millisecond. In the following case the request will give up after 5 seconds: This time the failure callback is called and its response.aborted property is set. You can use all of the error handling above in your apps: 这一次,failure方法会被调用,并且response.aborted参数会被设置。你可以在你的app中使用下面所有的错误处理: if Msgalert'Timeout'"The server timed out :("else'Aborted'"Looks like you aborted the request"'Bad'"Something went wrong with your request"}); Cross-Domain Requests跨域请求A relatively new capability of modern browsers is calledCORS,which stands for Cross-Origin Resource Sharing. This allows you to send requests to other domains,without the usual security restrictions enforced by the browser. Sencha Touch provides support for CORS,although you will probably need to configure your web server in order to enable it. If you are not familiar with the required actions for setting up your web server for CORS,a quick web search should give you plenty of answers. 现代浏览器的一个相对比较新的功能叫CORS,代表Cross-Origin Resource Sharing(跨域资源共享)。这允许你撇开浏览器的安全策略要求向其他的域发起请求。st对cors提供了支持,但是你需要配置你的服务器以允许它。如果你对配置web服务器允许cors不熟,一个快速的检索将给你很多答案。 Assuming your server is set up,sending a CORS request is easy: 假设你的服务器已经配置好了,发送一个cors请求是很简单的: 'http://www.somedomain.com/some/awesome/url.php' withCredentialstrue useDefaultXhrHeaderfalse}); Form Uploads表单上传The final topic covered in this guide is uploading forms,a functionality that is illustrated in the following sample code: 本向导包含的最后一个话题 是表单上传,如下代码所示的功能: form'myFormId'success'Success''We got your form submission''Fail''Hmm,that did not work' This finds a <form> tag on the page with id="myFormId",retrieves its data and puts it into the request params object,as shown at the start of this guide. Then it submits it to the specified url and calls your callbacks like normal. |