Учебники

Sencha Touch — загрузка и загрузка

Декабрь 18, 2018

Sencha Touch предоставляет конфигурацию XHR2 для работы с разработками Ajax и Ajax2.

XHR2 — это уровень xmlHttpRequest 2, который используется для запроса данных с сервера. Для любого веб-приложения данные находятся на сервере, и после загрузки страницы доступ к данным с сервера должен осуществляться с помощью запросов Ajax.

XHR2 в Sencha Touch предоставляет функцию индикатора выполнения, которая показывает пользователю объем данных, переданных для определенного запроса. 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
}

Различные новые функции XHR2 включены в Sencha Touch.

Sr.No Особенности и описание
1

XHR2: правда

Это используется для включения и отключения функций XHR2 в приложении.

2

Ext.field.File

Новое поле файла добавлено, чтобы дать больше информации о типе поля.

3

Ext.field.FileInput

Это для обеспечения FileInput.

4

Ext.progressIndicator

Это должно обеспечить точный процент данных, переданных с точки зрения индикатора выполнения.

5

xtype: fileinput

Создать экземпляр класса fileInput.

6

xtype: filefield

Создать экземпляр класса файла.

7

responseType: значение

Этот параметр допускает различные типы ответов, такие как текст, документ, блоб и т. Д.

XHR2: правда

Это используется для включения и отключения функций XHR2 в приложении.

Ext.field.File

Новое поле файла добавлено, чтобы дать больше информации о типе поля.

Ext.field.FileInput

Это для обеспечения FileInput.

Ext.progressIndicator

Это должно обеспечить точный процент данных, переданных с точки зрения индикатора выполнения.

xtype: fileinput

Создать экземпляр класса fileInput.

xtype: filefield

Создать экземпляр класса файла.

responseType: значение

Этот параметр допускает различные типы ответов, такие как текст, документ, блоб и т. Д.

Ниже приведены примеры отправки простого запроса ajax с параметром и без него и загрузки файлов с использованием ajax.

Простой Ajax-запрос без параметров — Успех

Live Demo 

<!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>

Это даст следующий результат —

В приведенном выше примере показан успешный вызов ajax, поскольку указанный URL-адрес правильный. В этом примере мы не передаем никаких параметров, это просто простой запрос ajax, который переходит по указанному URL.

Если вы используете браузер Chrome в инструменте разработчика, перейдите в раздел сети, вы можете увидеть отправляемый запрос и ответ, который мы получаем.

Простой Ajax-запрос без параметров — Сбой

Live Demo 

<!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

Live Demo 

<!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

Live Demo 

<!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. В этом примере мы используем индикатор индикатора выполнения, чтобы показать прогресс при загрузке файла.

39
Share: