Sencha Touch - Cargar y descargar
Sencha Touch proporciona la configuración XHR2 para trabajar con el desarrollo Ajax y Ajax2.
XHR2 es xmlHttpRequest nivel 2, que solía solicitar datos del servidor. Para cualquier aplicación web, los datos residen en el servidor y, una vez que se carga la página, se debe acceder a los datos desde el servidor con la ayuda de solicitudes Ajax.
XHR2 en Sencha Touch proporciona la función de barra de progreso, que muestra al usuario la cantidad de datos transferidos para una solicitud en particular. XHR2 se agregó recientemente, por lo que debemos verificar si el navegador lo admite o no.
A continuación se muestra la función para verificar si el navegador es compatible con XHR2:
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Incluso podemos comprobar si la subida progresiva con XHR2 es compatible con el navegador o no.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Se incluyen varias funciones nuevas de XHR2 en Sencha Touch.
| No Señor | Características y descripción |
|---|---|
| 1 | XHR2: true Esto se usa para habilitar y deshabilitar la funcionalidad XHR2 en la aplicación. |
| 2 | Ext.field.File Se agrega un nuevo campo de archivo para brindar más información sobre el tipo de campo. |
| 3 | Ext.field.FileInput Esto para proporcionar FileInput. |
| 4 | Ext.progressIndicator Esto es para proporcionar el porcentaje exacto de datos transferidos en términos de barra de progreso. |
| 5 | xtype: fileinput Para crear una instancia de la clase fileInput. |
| 6 | xtype: filefield Para crear una instancia de clase de archivo. |
| 7 | responseType : value Este parámetro permite varios tipos de respuestas como texto, documento, blob, etc. |
A continuación se muestran los ejemplos para enviar una solicitud ajax simple con y sin parámetro y cargar archivos usando ajax.
Solicitud de Ajax simple sin parámetros: éxito
<!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>Producirá el siguiente resultado:
El ejemplo anterior muestra la llamada ajax exitosa ya que la URL mencionada es correcta. En este ejemplo, no estamos pasando ningún parámetro, es solo una simple solicitud ajax que llega a la URL mencionada.
Si está utilizando el navegador Chrome en la herramienta para desarrolladores, navegue a la sección de red, puede ver la solicitud que se envía y la respuesta que obtenemos.
Solicitud simple de Ajax sin parámetros - Fallo
<!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>Producirá el siguiente resultado:
En el ejemplo anterior, solo para mostrar cómo funciona la falla de ajax, hemos mencionado la URL incorrecta. Compare este y el ejemplo anterior, encontrará la diferencia.
Envío de parámetros en solicitud 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>Producirá el siguiente resultado:
En este ejemplo, estamos pasando parámetros con el ajax usando la propiedad de datos de la llamada ajax.
Subiendo archivos usando 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>Producirá el siguiente resultado:
Este ejemplo muestra cómo cargar datos usando una llamada ajax. En este ejemplo, usamos el indicador de la barra de progreso para mostrar el progreso mientras se carga el archivo.