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 用于删除某些记录。

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

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

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

因此，如果响应成功，将调用成功回调，如果响应失败，则将调用失败回调。如果我们没有定义任何成功或失败，则将调用正常回调。在回调中，我们可以编写仅在获得特定响应后才要处理的代码。

有时请求需要很长时间才能响应并发生超时。超时的默认时间为 30 秒。我们可以通过 ajax 请求中传递的超时参数对其进行自定义。如上例所示，超时为 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(跨源请求共享)，因此可以不受浏览器安全限制地进行跨域请求。如果您的 Web 服务器启用了 CORS，那么在 Sencha Touch 中，您需要在 ajax 请求中提供参数，然后就可以进行跨域请求。

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

sencha_touch_core_concepts.html