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 概念非同步。傳送請求後，伺服器將處理請求併發送響應。一旦我們收到響應，回撥函式將被呼叫。基於此，我們可以獲得成功、失敗或正常的回撥。

因此，如果響應成功，則會呼叫 success 回撥，如果響應失敗，則會呼叫 failure 回撥。如果我們沒有定義任何 success 或 failure，則會呼叫正常的回撥。在回撥中，我們可以在獲得特定響應後編寫我們想要處理的程式碼。

有時請求需要很長時間才能響應，並且會發生超時。超時的預設時間為 30 秒。我們可以透過 ajax 請求中傳遞的 timeout 引數來自定義它。如上例所示，超時時間為 5000 毫秒。一旦發生超時，就會呼叫 failure 函式。

也可以透過呼叫來中止請求。

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

一旦請求被中止，就會呼叫 failure 回撥。如果 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
});