Sencha Touch - загрузка и загрузка
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
}В 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 Создать экземпляр класса файла. |
| 7 | responseType : value Этот параметр позволяет использовать различные типы ответов: текст, документ, большой двоичный объект и т. Д. |
Ниже приведены примеры отправки простого запроса 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-адрес правильный. В этом примере мы не передаем никаких параметров, это просто простой запрос 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://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. В этом примере мы используем индикатор выполнения, чтобы показать прогресс при загрузке файла.