Sencha Touch - Carica e scarica
Sencha Touch fornisce la configurazione XHR2 per funzionare con lo sviluppo Ajax e Ajax2.
XHR2 è xmlHttpRequest livello 2, utilizzato per richiedere dati dal server. Per qualsiasi applicazione web, i dati risiedono sul server e una volta caricata la pagina, è necessario accedere ai dati dal server con l'aiuto delle richieste Ajax.
XHR2 in Sencha Touch fornisce la funzione di barra di avanzamento, che mostra all'utente la quantità di dati trasferiti per una particolare richiesta. XHR2 è stato aggiunto di recente, quindi dobbiamo verificare se il browser lo supporta o meno.
Di seguito è riportata la funzione per verificare se il browser supporta XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Possiamo anche verificare se il caricamento progressivo con XHR2 è supportato dal browser o meno.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Diverse nuove funzionalità XHR2 sono incluse in Sencha Touch.
| Suor n | Caratteristiche e descrizione |
|---|---|
| 1 | XHR2: true Viene utilizzato per abilitare e disabilitare la funzionalità XHR2 nell'applicazione. |
| 2 | Ext.field.File Viene aggiunto un nuovo campo file per dare più chiarezza sul tipo di campo. |
| 3 | Ext.field.FileInput Questo per fornire FileInput. |
| 4 | Ext.progressIndicator Questo per fornire la percentuale esatta dei dati trasferiti in termini di barra di avanzamento. |
| 5 | xtype: fileinput Per creare un'istanza della classe fileInput. |
| 6 | xtype: filefield Per creare istanze di file class. |
| 7 | responseType : value Questo parametro consente vari tipi di risposte come testo, documento, blob ecc. |
Di seguito sono riportati gli esempi per inviare una semplice richiesta ajax con e senza parametri e caricare file utilizzando ajax.
Richiesta Ajax semplice senza parametri - Operazione riuscita
<!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>Produrrà il seguente risultato:
L'esempio sopra mostra la chiamata ajax riuscita poiché l'URL menzionato è corretto. In questo esempio, non stiamo passando alcun parametro, è solo una semplice richiesta ajax che colpisce l'URL menzionato.
Se stai utilizzando il browser Chrome nello strumento per sviluppatori, vai alla sezione di rete, puoi vedere la richiesta che viene inviata e la risposta che otteniamo.
Richiesta Ajax semplice senza parametri - Errore
<!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>Produrrà il seguente risultato:
Nell'esempio sopra, solo per mostrare come funziona l'errore ajax, abbiamo menzionato l'URL sbagliato. Confronta questo e l'esempio precedente, troverai la differenza.
Invio di parametri nella richiesta 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>Produrrà il seguente risultato:
In questo esempio, stiamo passando i parametri con l'ajax utilizzando la proprietà data della chiamata ajax.
Caricamento di file utilizzando 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>Produrrà il seguente risultato:
Questo esempio mostra come caricare i dati utilizzando la chiamata ajax. In questo esempio, stiamo utilizzando l'indicatore della barra di avanzamento per mostrare l'avanzamento durante il caricamento del file.