Sencha Touch - 上传 和下载

Sencha Touch提供XHR2配置以使用Ajax和Ajax2开发.

XHR2是xmlHttpRequest级别2，用于从服务器请求数据.对于任何Web应用程序，数据驻留在服务器上，加载页面后，应在Ajax请求的帮助下从服务器访问数据.

Sencha Touch中的XHR2提供进度bar功能，向用户显示为特定请求传输的数据量. XHR2是新添加的，所以我们需要检查浏览器是否支持它.

以下是检查浏览器是否支持XHR2 : 的功能;

if(Ext.feature.has.XHR2){//这里我们可以编写功能，如果浏览器支持XHR2 }

我们甚至可以检查浏览器是否支持使用XHR2的渐进式上传.

if(Ext.feature.has.XHRUploadProgress){//这里我们可以编写功能，如果浏览器支持渐进式上传}

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

以下是使用和不带参数发送简单ajax请求并使用ajax上传文件的示例.

没有参数的简单Ajax请求 - 成功

                              Ext.setup({            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {               var request = {                  url: 'https://www.it1352.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);                        }                     }                  ]               });            }         });               

上面的示例显示了成功的ajax调用，因为提到的URL是正确的。 在此示例中，我们没有传递任何参数，只是一个简单的ajax请求，它命中了所提到的URL。

如果您在开发人员工具中使用chrome浏览器，请导航至"网络"部分，您可以看到正在发送的请求和得到的响应。

Simple Ajax request without parameters - Failure

                              Ext.setup({            requires: [               'Ext.Panel',               'Ext.Button',               'Ext.form.Panel'            ],            onReady: function() {               var request = {                  url: 'https://www.it1352.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);                        }                     }                  ]               });            }         });               

在上面的示例中，仅为了说明ajax失败的工作原理，我们提到了错误的URL。 比较此示例和上一个示例，您会发现区别。

Sending parameters in Ajax request

                              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.it1352.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);                        }                     }                  ]               });            }         });                     

在此示例中，我们使用ajax调用的data属性将参数与ajax一起传递。

Uploading files using Ajax

                              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.it1352.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");                           }                        }                     }                  ]               });            }         });               

此示例显示如何使用ajax调用上传数据.在此示例中，我们使用进度条指示器显示上载文件时的进度.