Sencha Touch-アヤックス

Ajaxは非同期JavaScriptおよびxmlです。 Ajaxは、ページ全体を更新せずにデータをフェッチしてロードする機能を提供します。

Sencha Touchは、ajaxを使用してデータをロードおよび保存する機能を提供します。 ajaxでは、同じドメインからデータを取得して保存できます。異なるドメイン間でデータを交換することはできません。

たとえば、ドメイン www.myApp.com を使用している場合、 www.myApp.com？page = 1 や www.myApp.com/など、同じドメインの異なるページ間でデータを交換できます。＃Pagel 。ただし、ドメイン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 です。

2番目のパラメーターは、GET、POST、PUT、DELETEなどのAjaxリクエストを作成する目的を決定する method です。 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/newPagel', withCredentials: true, useDefaultXhrHeader: false
});

Sencha-touch-ajax

Sencha Touch-アヤックス

シンプルなAjaxリクエスト

クロスドメインリクエスト