Sencha Touch - 上传和下载

Sencha Touch 提供 XHR2 配置，用于处理 Ajax 和 Ajax2 开发。

XHR2 是 xmlHttpRequest 2.0 版本，用于向服务器请求数据。对于任何 Web 应用程序，数据都驻留在服务器上，页面加载后，应使用 Ajax 请求从服务器访问数据。

Sencha Touch 中的 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
}

Sencha Touch 中包含各种新的 XHR2 功能。

序号	功能和描述
1	XHR2: true 用于启用和禁用应用程序中的 XHR2 功能。
2	Ext.field.File 添加新的文件字段以提供有关字段类型的更多信息。
3	Ext.field.FileInput 用于提供 FileInput。
4	Ext.progressIndicator 用于以进度条的形式提供已传输数据的精确百分比。
5	xtype: fileinput 创建 fileInput 类实例。
6	xtype: filefield 创建 file 类实例。
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://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 请求 - 失败

在线演示

<!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://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://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 上传文件

在线演示

<!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://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 调用上传数据。在此示例中，我们使用进度条指示器来显示上传文件时的进度。

打印页面