Sencha Touch：Ajax

Ajax是异步JavaScript和xml。Ajax提供了无需刷新整个页面即可获取和加载数据的功能。

Sencha Touch提供了使用ajax加载和存储数据的功能。在ajax中，我们可以从同一域中获取和存储数据。它不允许我们在不同域之间交换数据。

例如，如果您使用域www.myApp.com，则可以在同一域的不同页面之间交换数据，例如www.myApp.com?page=1或www.myApp.com/#Page.html。但是，如果您位于www.myApp.com域，并且想与其他域（例如，www.myNewApp.com）交换数据，那么它将不允许您这样做。

即使Ajax有此限制，Sencha Touch也使您可以灵活地在不同域之间交换数据，我们将在后续章节中学习。

简单的Ajax请求

Ext.Ajax.request({
   url: 'myUrl', Method: 'GET', timeout: 5000, params: {
      username: 'Ed', id: '1234'
   },
   headers: {
      "Content-Type": "application/json"
   }, 
   success: function(response) {
      console.log("The request was successfull");
   }, 
   failure: function(response) {
      console.log("Request is failed");
   }, 
   callback: function(options, success, response) {
      console.log(response.responseText);
   }
});

Ext.Ajax.request是发出ajax请求的方法。

在ajax调用中传递了不同的参数。第一个参数是发出Ajax请求的域的URL。

第二个参数是确定发出ajax请求的目的的方法，例如GET，POST，PUT，DELETE。Get是仅获取数据。POST是用于创建新数据并保存它。PUT用于更新或替换服务器上的现有数据。DELETE是删除一些记录。

下一个参数是参数，其中我们以JSON的形式发送数据，这有助于获取和存储数据。

标头参数显示服务器为请求发送的数据类型。在上面的示例中，返回的数据将为json。

最有用的方法中的回调，使整个ajax概念异步。发送请求后，服务器将处理该请求并将响应发送回去。一旦获得响应，便会调用回调函数。基于此，我们可以获得成功，失败或正常的回调。

因此，如果响应成功，则将调用成功回调，如果响应失败，则将调用失败回调。如果我们没有定义任何成功或失败，则将调用常规回调。在回调中，只有在收到特定响应后，我们才能编写要处理的代码。

有时，请求花费的时间太长，无法回复，并且发生超时。默认超时时间为30秒。我们可以通过ajax请求中传递的timeout参数来自定义它。如上例所示，超时为5000毫秒。一旦发生超时，就会调用失败函数。

也可以通过调用中止请求。

var myReq = Ext.Ajax.request({
   url: 'myUrl', failure: function(response) {
      console.log(response.aborted); 
   }
});
Ext.Ajax.abort(myReq);

请求中止后，将调用失败回调。如果response.aborted返回true，则由于请求中止而导致失败。

跨域请求

Ajax请求只能在同一域中，但是，Sencha提供了进行跨域请求的功能。

现代浏览器提供了一项新功能CORS（跨源请求共享），因此可以在没有浏览器安全限制的情况下发出跨域请求。如果您的网络服务器启用了CORS，则在Sencha Touch中，您需要在ajax请求中提供参数，然后才能进行跨域请求。

Ext.Ajax.request({
   url: 'https://www.myNewDomain.com/newPage.html', withCredentials: true, useDefaultXhrHeader: false
});