SenchaTouch-アップロードとダウンロード

Sencha Touchは、AjaxおよびAjax2開発で動作するXHR2構成を提供します。

XHR2はxmlHttpRequestレベル2であり、サーバーからのデータを要求するために使用されます。どのWebアプリケーションでも、データはサーバーに存在し、ページが読み込まれると、Ajaxリクエストを使用してサーバーからデータにアクセスする必要があります。

Sencha TouchのXHR2は、特定のリクエストに対して転送されたデータの量をユーザーに表示するプログレスバー機能を提供します。XHR2が新たに追加されたため、ブラウザがXHR2をサポートしているかどうかを確認する必要があります。

以下は、ブラウザがXHR2をサポートしているかどうかを確認する機能です。

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

XHR2を使用したプログレッシブアップロードがブラウザでサポートされているかどうかを確認することもできます。

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

SenchaTouchにはさまざまな新しいXHR2機能が含まれています。

シニア番号 機能と説明
1

XHR2: true

これは、アプリケーションのXHR2機能を有効または無効にするために使用されます。
2

Ext.field.File

新しいファイルフィールドが追加され、フィールドのタイプについてより明確になりました。
3

Ext.field.FileInput

これはFileInputを提供します。
4

Ext.progressIndicator

これは、プログレスバーに関して転送されたデータの正確なパーセンテージを提供するためです。
5

xtype: fileinput

fileInputクラスのインスタンスを作成します。
6

xtype: filefield

ファイルクラスのインスタンスを作成します。
7

responseType : value

このパラメーターは、テキスト、ドキュメント、blobなどのさまざまなタイプの応答を許可します。

以下は、パラメーターの有無にかかわらず単純なajaxリクエストを送信し、ajaxを使用してファイルをアップロードする例です。

パラメータなしの単純なAjaxリクエスト-成功

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

次の結果が得られます-

上記の例は、上記のURLが正しい場合のajax呼び出しの成功を示しています。この例では、パラメーターを渡していません。これは、言及されたURLにヒットする単純なajaxリクエストです。

開発者ツールでChromeブラウザを使用している場合は、ネットワークセクションに移動すると、送信されているリクエストと取得したレスポンスを確認できます。

パラメータなしの単純なAjaxリクエスト-失敗

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

次の結果が得られます-

上記の例では、ajaxの失敗がどのように機能するかを示すために、間違ったURLについて言及しました。これと前の例を比較すると、違いがわかります。

Ajaxリクエストでパラメーターを送信する

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

次の結果が得られます-

この例では、ajax呼び出しのdataプロパティを使用してajaxでパラメーターを渡します。

Ajaxを使用したファイルのアップロード

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

次の結果が得られます-

この例は、ajax呼び出しを使用してデータをアップロードする方法を示しています。この例では、進行状況バーインジケーターを使用して、ファイルのアップロード中の進行状況を示しています。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved