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功能.
Sr.No | 功能&描述 |
---|---|
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上传文件的示例.
<!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.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); } } ] }); } }); </script> </head> <body> </body> </html>
上面的示例显示了成功的ajax调用,因为提到的URL是正确的。 在此示例中,我们没有传递任何参数,只是一个简单的ajax请求,它命中了所提到的URL。
如果您在开发人员工具中使用chrome浏览器,请导航至"网络"部分,您可以看到正在发送的请求和得到的响应。
<!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.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); } } ] }); } }); </script> </head> <body> </body> </html>
在上面的示例中,仅为了说明ajax失败的工作原理,我们提到了错误的URL。 比较此示例和上一个示例,您会发现区别。
<!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.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); } } ] }); } }); </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://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"); } } } ] }); } }); </script> </head> <body> </body> </html>
此示例显示如何使用ajax调用上传数据.在此示例中,我们使用进度条指示器显示上载文件时的进度.