Sencha Touch - 上传和下载
Sencha Touch 提供 XHR2 配置，用于 Ajax 和 Ajax2 开发。
XHR2 是 xmlHttpRequest 级别 2，用于从服务器请求数据。对于任何 Web 应用程序，数据都驻留在服务器上，一旦页面加载完毕，就应该借助 Ajax 请求从服务器访问数据。
Sencha Touch 中的 XHR2 提供进度条功能，向用户显示特定请求传输的数据量。 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 创建 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://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 是正确的。在这个例子中，我们没有传递任何参数，它只是一个点击提到的 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 调用上传数据。在此示例中，我们使用进度条指示器来显示上传文件时的进度。
